Free University of Bozen-Bolzano

Social Share

HTML

									
										<div class="share">
	<a class="socialItem socialItem-facebook" href="#"><i class="i i-facebook"></i></a>
	<a class="socialItem socialItem-twitter" href="#"><i class="i i-twitter"></i></a>
  <a class="socialItem socialItem-linkedin" href="#"><i class="i i-linkedin"></i></a>
  <a class="socialItem socialItem-mail" href="#"><i class="i i-mail"></i></a>
  <a class="socialItem socialItem-print" href="#"><i class="i i-print"></i></a>
</div>

Social Links

HTML

									
										<div class="social">
	<a class="socialItem socialItem-facebook" href="#"><i class="i i-facebook"></i></a>
	<a class="socialItem socialItem-twitter" href="#"><i class="i i-twitter"></i></a>
  <a class="socialItem socialItem-instagram" href="#"><i class="i i-instagram"></i></a>
  <a class="socialItem socialItem-linkedin" href="#"><i class="i i-linkedin"></i></a>
</div>

Filters

This pattern contains: atoms-button-outline

HTML

									
										<div class="filter_wrapper">
</div>

Filters Alone

This pattern contains: atoms-button-outline

HTML

									
										<div class="l-container">
  <div class="typography">
    <div class="filtersAlone_wrapper">
      <div class="filtersAlone_list">
      </div>
    </div>
  </div>
</div>

Find Tools

This pattern contains: atoms-button-toggle atoms-forms-input-search

HTML

									
										<div class="find_tools">
    <a class="btn-toggle find_toolToggle find_toolToggle-search" href="#"><i class="i i-search"></i></a>    <input class="form_input find_toolSearch" type="search" placeholder="Lorem">    <a class="btn-toggle find_toolToggle" href="#"><i class="i i-filter"></i></a>    <a class="btn-toggle find_toolToggle" href="#"><i class="i i-calendar"></i></a></div>

Calendar Days

Mon 2 OCT

Tue 3 OCT

Wed 4 OCT

Thu 5 OCT

Fri 6 OCT

Sat 7 OCT

Sun 8 OCT

Mon 9 OCT

Tue 10 OCT

Wed 11 OCT

Thu 12 OCT

Fri 13 OCT

Sat 14 OCT

Sun 15 OCT

Mon 16 OCT

Tue 17 OCT

Wed 18 OCT

Thu 19 OCT

Fri 20 OCT

Sat 21 OCT

Sun 22 OCT

Mon 23 OCT

Tue 24 OCT

Wed 25 OCT

Thu 26 OCT

Fri 27 OCT

Sat 28 OCT

Sun 29 OCT

Mon 30 OCT

Tue 31 OCT

Wed 1 NOV

Thu 2 NOV

This pattern contains: atoms-button-round

HTML

									
										<div class="calendarDays">
  <div class="cd_navBtnWrapper cd_navBtnWrapper-lft">
    <a href="#" class="btn-round cd_navBtn"><i class="i i-arrow-left"></i></a>  </div>
  <div class="cd_navDays">
    <div class="cd_navDay">
      <span class="cd_navDayName">Mon</span>
      <span class="cd_navDayNum">2</span>
      <span class="cd_navDayMonth">OCT</span>
    </div>
    <div class="cd_navDay">
      <span class="cd_navDayName">Tue</span>
      <span class="cd_navDayNum">3</span>
      <span class="cd_navDayMonth">OCT</span>
    </div>
    <div class="cd_navDay">
      <span class="cd_navDayName">Wed</span>
      <span class="cd_navDayNum">4</span>
      <span class="cd_navDayMonth">OCT</span>
    </div>
    <div class="cd_navDay cd_navDay-current">
      <span class="cd_navDayName">Thu</span>
      <span class="cd_navDayNum">5</span>
      <span class="cd_navDayMonth">OCT</span>
    </div>
    <div class="cd_navDay">
      <span class="cd_navDayName">Fri</span>
      <span class="cd_navDayNum">6</span>
      <span class="cd_navDayMonth">OCT</span>
    </div>
    <div class="cd_navDay">
      <span class="cd_navDayName">Sat</span>
      <span class="cd_navDayNum">7</span>
      <span class="cd_navDayMonth">OCT</span>
    </div>
    <div class="cd_navDay">
      <span class="cd_navDayName">Sun</span>
      <span class="cd_navDayNum">8</span>
      <span class="cd_navDayMonth">OCT</span>
    </div>
    <div class="cd_navDay">
      <span class="cd_navDayName">Mon</span>
      <span class="cd_navDayNum">9</span>
      <span class="cd_navDayMonth">OCT</span>
    </div>
    <div class="cd_navDay">
      <span class="cd_navDayName">Tue</span>
      <span class="cd_navDayNum">10</span>
      <span class="cd_navDayMonth">OCT</span>
    </div>
    <div class="cd_navDay">
      <span class="cd_navDayName">Wed</span>
      <span class="cd_navDayNum">11</span>
      <span class="cd_navDayMonth">OCT</span>
    </div>
    <div class="cd_navDay">
      <span class="cd_navDayName">Thu</span>
      <span class="cd_navDayNum">12</span>
      <span class="cd_navDayMonth">OCT</span>
    </div>
    <div class="cd_navDay">
      <span class="cd_navDayName">Fri</span>
      <span class="cd_navDayNum">13</span>
      <span class="cd_navDayMonth">OCT</span>
    </div>
    <div class="cd_navDay">
      <span class="cd_navDayName">Fri</span>
      <span class="cd_navDayNum">13</span>
      <span class="cd_navDayMonth">OCT</span>
    </div>
    <div class="cd_navDay">
      <span class="cd_navDayName">Sat</span>
      <span class="cd_navDayNum">14</span>
      <span class="cd_navDayMonth">OCT</span>
    </div>
    <div class="cd_navDay">
      <span class="cd_navDayName">Sun</span>
      <span class="cd_navDayNum">15</span>
      <span class="cd_navDayMonth">OCT</span>
    </div>
    <div class="cd_navDay">
      <span class="cd_navDayName">Mon</span>
      <span class="cd_navDayNum">16</span>
      <span class="cd_navDayMonth">OCT</span>
    </div>
    <div class="cd_navDay">
      <span class="cd_navDayName">Tue</span>
      <span class="cd_navDayNum">17</span>
      <span class="cd_navDayMonth">OCT</span>
    </div>
    <div class="cd_navDay">
      <span class="cd_navDayName">Wed</span>
      <span class="cd_navDayNum">18</span>
      <span class="cd_navDayMonth">OCT</span>
    </div>
    <div class="cd_navDay">
      <span class="cd_navDayName">Thu</span>
      <span class="cd_navDayNum">19</span>
      <span class="cd_navDayMonth">OCT</span>
    </div>
    <div class="cd_navDay">
      <span class="cd_navDayName">Fri</span>
      <span class="cd_navDayNum">20</span>
      <span class="cd_navDayMonth">OCT</span>
    </div>
    <div class="cd_navDay">
      <span class="cd_navDayName">Sat</span>
      <span class="cd_navDayNum">21</span>
      <span class="cd_navDayMonth">OCT</span>
    </div>
    <div class="cd_navDay">
      <span class="cd_navDayName">Sun</span>
      <span class="cd_navDayNum">22</span>
      <span class="cd_navDayMonth">OCT</span>
    </div>
    <div class="cd_navDay">
      <span class="cd_navDayName">Mon</span>
      <span class="cd_navDayNum">23</span>
      <span class="cd_navDayMonth">OCT</span>
    </div>
    <div class="cd_navDay">
      <span class="cd_navDayName">Tue</span>
      <span class="cd_navDayNum">24</span>
      <span class="cd_navDayMonth">OCT</span>
    </div>
    <div class="cd_navDay">
      <span class="cd_navDayName">Wed</span>
      <span class="cd_navDayNum">25</span>
      <span class="cd_navDayMonth">OCT</span>
    </div>
    <div class="cd_navDay">
      <span class="cd_navDayName">Thu</span>
      <span class="cd_navDayNum">26</span>
      <span class="cd_navDayMonth">OCT</span>
    </div>
    <div class="cd_navDay">
      <span class="cd_navDayName">Fri</span>
      <span class="cd_navDayNum">27</span>
      <span class="cd_navDayMonth">OCT</span>
    </div>
    <div class="cd_navDay">
      <span class="cd_navDayName">Sat</span>
      <span class="cd_navDayNum">28</span>
      <span class="cd_navDayMonth">OCT</span>
    </div>
    <div class="cd_navDay">
      <span class="cd_navDayName">Sun</span>
      <span class="cd_navDayNum">29</span>
      <span class="cd_navDayMonth">OCT</span>
    </div>
    <div class="cd_navDay">
      <span class="cd_navDayName">Mon</span>
      <span class="cd_navDayNum">30</span>
      <span class="cd_navDayMonth">OCT</span>
    </div>
    <div class="cd_navDay">
      <span class="cd_navDayName">Tue</span>
      <span class="cd_navDayNum">31</span>
      <span class="cd_navDayMonth">OCT</span>
    </div>
    <div class="cd_navDay">
      <span class="cd_navDayName">Wed</span>
      <span class="cd_navDayNum">1</span>
      <span class="cd_navDayMonth">NOV</span>
    </div>
    <div class="cd_navDay">
      <span class="cd_navDayName">Thu</span>
      <span class="cd_navDayNum">2</span>
      <span class="cd_navDayMonth">NOV</span>
    </div>
  </div>
  <div class="cd_navBtnWrapper cd_navBtnWrapper-rgt">
    <a href="#" class="btn-round cd_navBtn"><i class="i i-arrow-right"></i></a>  </div>
</div>

Calendar Month

October 2015

Mon Tue Wed Thu Fri Sat Sun

28

29

30

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

1

This pattern contains: atoms-button-round

HTML

									
										<div class="calendarMonths">
  <div class="cm_navMonthNav">
    <div class="cm_navMonthBtnWrapper">
      <a href="#" class="btn-round cm_navMonthBtn"><i class="i i-arrow-left"></i></a>    </div>
      <span class="cm_navMonthName">October 2015</span>
    <div class="cm_navMonthBtnWrapper">
      <a href="#" class="btn-round cm_navMonthBtn"><i class="i i-arrow-right"></i></a>    </div>
  </div>
  <div class="cm_navMonthDays">
    <span class="cm_navMonthDay">Mon</span>
    <span class="cm_navMonthDay">Tue</span>
    <span class="cm_navMonthDay">Wed</span>
    <span class="cm_navMonthDay">Thu</span>
    <span class="cm_navMonthDay">Fri</span>
    <span class="cm_navMonthDay">Sat</span>
    <span class="cm_navMonthDay">Sun</span>
  </div>
  <div class="cm_navMonthCalendar">
    <div class="cm_navMonthDay">
      <span class="cm_navMonthDayNum cm_navMonthDayNum-inactive">28</span>
    </div>
    <div class="cm_navMonthDay">
      <span class="cm_navMonthDayNum cm_navMonthDayNum-inactive">29</span>
    </div>
    <div class="cm_navMonthDay">
      <span class="cm_navMonthDayNum cm_navMonthDayNum-inactive">30</span>
    </div>
    <div class="cm_navMonthDay">
      <span class="cm_navMonthDayNum">1</span>
    </div>
    <div class="cm_navMonthDay">
      <span class="cm_navMonthDayNum">2</span>
    </div>
    <div class="cm_navMonthDay">
      <span class="cm_navMonthDayNum">3</span>
    </div>
    <div class="cm_navMonthDay">
      <span class="cm_navMonthDayNum">4</span>
    </div>
    <div class="cm_navMonthDay">
      <span class="cm_navMonthDayNum">5</span>
    </div>
    <div class="cm_navMonthDay">
      <span class="cm_navMonthDayNum">6</span>
    </div>
    <div class="cm_navMonthDay">
      <span class="cm_navMonthDayNum cm_navMonthDayNum-current">7</span>
    </div>
    <div class="cm_navMonthDay">
      <span class="cm_navMonthDayNum">8</span>
    </div>
    <div class="cm_navMonthDay">
      <span class="cm_navMonthDayNum">9</span>
    </div>
    <div class="cm_navMonthDay">
      <span class="cm_navMonthDayNum">10</span>
    </div>
    <div class="cm_navMonthDay">
      <span class="cm_navMonthDayNum">11</span>
    </div>
    <div class="cm_navMonthDay">
      <span class="cm_navMonthDayNum">12</span>
    </div>
    <div class="cm_navMonthDay">
      <span class="cm_navMonthDayNum">13</span>
    </div>
    <div class="cm_navMonthDay">
      <span class="cm_navMonthDayNum">14</span>
    </div>
    <div class="cm_navMonthDay">
      <span class="cm_navMonthDayNum">15</span>
    </div>
    <div class="cm_navMonthDay">
      <span class="cm_navMonthDayNum">16</span>
    </div>
    <div class="cm_navMonthDay">
      <span class="cm_navMonthDayNum">17</span>
    </div>
    <div class="cm_navMonthDay">
      <span class="cm_navMonthDayNum">18</span>
    </div>
    <div class="cm_navMonthDay">
      <span class="cm_navMonthDayNum">19</span>
    </div>
    <div class="cm_navMonthDay">
      <span class="cm_navMonthDayNum">20</span>
    </div>
    <div class="cm_navMonthDay">
      <span class="cm_navMonthDayNum">21</span>
    </div>
    <div class="cm_navMonthDay">
      <span class="cm_navMonthDayNum">22</span>
    </div>
    <div class="cm_navMonthDay">
      <span class="cm_navMonthDayNum">23</span>
    </div>
    <div class="cm_navMonthDay">
      <span class="cm_navMonthDayNum">24</span>
    </div>
    <div class="cm_navMonthDay">
      <span class="cm_navMonthDayNum">25</span>
    </div>
    <div class="cm_navMonthDay">
      <span class="cm_navMonthDayNum">26</span>
    </div>
    <div class="cm_navMonthDay">
      <span class="cm_navMonthDayNum">27</span>
    </div>
    <div class="cm_navMonthDay">
      <span class="cm_navMonthDayNum">28</span>
    </div>
    <div class="cm_navMonthDay">
      <span class="cm_navMonthDayNum">29</span>
    </div>
    <div class="cm_navMonthDay">
      <span class="cm_navMonthDayNum">30</span>
    </div>
    <div class="cm_navMonthDay">
      <span class="cm_navMonthDayNum">31</span>
    </div>
    <div class="cm_navMonthDay">
      <span class="cm_navMonthDayNum cm_navMonthDayNum-inactive">1</span>
    </div>
  </div>
</div>