Free University of Bozen-Bolzano

Media Block

Lorem ipsum dolor sit (37 characters)

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris ni (210 characters)

Lorem ipsum

This pattern contains: atoms-image-4x3 atoms-heading-2 atoms-text-paragraph atoms-button-text-alternate

HTML

									
										<div class="mediaBlock">
  <a class="mediaBlock_figure" href="#">
    <img class="mediaBlock_thumb" src="../../images/fpo_4x3.png" alt="" />  </a>
	<div class="mediaBlock_body">
    <h2 class="mediaBlock_title">Lorem ipsum dolor sit (37 characters)</h2>    <p class="mediaBlock_excerpt">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris ni (210 characters)</p>    <a href="#" class="btn-text btn-text-alt mediaBlock_btn">Lorem ipsum</a>	</div>
</div>

Block Highlight

Lorem ipsum dolor sit (37 characters)

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris ni (210 characters)

Lorem ipsum

This pattern contains: atoms-image-4x3 atoms-heading-4 atoms-text-paragraph atoms-button-text-alternate

HTML

									
										<div class="highlight ">
  <a href="#">
    <img class="highlight_thumb" src="../../images/fpo_4x3.png" alt="" />  </a>
  <div class="highlight_body">
    <h4 class="highlight_title">Lorem ipsum dolor sit (37 characters)</h4>    <p class="highlight_text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris ni (210 characters)</p>    <a href="#" class="btn-text btn-text-alt highlight_button">Lorem ipsum</a>  </div>
</div>

Block Glance

Lorem ipsum dolor sit (37 characters)

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris ni (210 characters)

This pattern contains: atoms-text-container

HTML

									
										<div class="glance">
  <div class="l-container">
    <div class="glance_inner">
      <h2 class="glance_title">Lorem ipsum dolor sit (37 characters)</h2>      <div class="glance_text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris ni (210 characters)</div>    </div>
  </div>
</div>

Block Post

Lorem ipsum dolor sit (37 characters)

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris ni (210 characters)

24 June 2015

This pattern contains: atoms-heading-5 atoms-image-4x3 atoms-text-paragraph atoms-text-date

HTML

									
										<div class="post">
  <a href="#">
    <h5 class="post_title">Lorem ipsum dolor sit (37 characters)</h5>  </a>
  <div class="post_content">
      <div class="post_figure">
        <a href="#">
          <img class="post_thumb" src="../../images/fpo_4x3.png" alt="" />        </a>
      </div>
    <div class="post_body">
      <p class="post_excerpt">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris ni (210 characters)</p>      <time class="post_date">24 June 2015</time>    </div>
  </div>
</div>

Block Post Empty

Lorem ipsum dolor sit (37 characters)

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris ni (210 characters)

24 June 2015

This pattern contains: atoms-heading-5 atoms-image-4x3 atoms-text-paragraph atoms-text-date

HTML

									
										<div class="post">
  <a href="#">
    <h5 class="post_title">Lorem ipsum dolor sit (37 characters)</h5>  </a>
  <div class="post_content">
    <div class="post_body">
      <p class="post_excerpt">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris ni (210 characters)</p>      <time class="post_date">24 June 2015</time>    </div>
  </div>
</div>

Block Event

Lorem ipsum dolor sit (37 characters)

Lorem Lorem

24 June 2015 9:21

This pattern contains: atoms-heading-2 atoms-text-span atoms-text-date atoms-text-time

HTML

									
										<div class="event ">
  <div class="event_body">
      <a href="#">
        <h2 class="event_title">Lorem ipsum dolor sit (37 characters)</h2>      </a>
    <div class="event_where">
        <span class="event_campus">Lorem</span>        <span class="event_room">Lorem</span>    </div>
    <div class="event_when">
        <time class="event_date">24 June 2015</time>        <time class="event_time">9:21</time>    </div>
  </div>
</div>

Block Link

Lorem ipsum dolor sit (37 characters)

HTML

									
										<a class="blockLink" href="#">Lorem ipsum dolor sit (37 characters)</a>

Block Contact

Name of the office

Street or Square

City

Telephone

Fax

E-mail address

Opening hours

Dayname HH:MM - HH:MM

This pattern contains: atoms-heading-6 atoms-text-paragraph atoms-text-link

HTML

									
										<div class="contactBlock">
  <div class="contactBlock_elem contactBlock_contacts">
      <h6 class="elem_title">Name of the office</h6>        <p class="elem_item">Street or Square</p>        <p class="elem_item">City</p>        <p class="elem_item">Telephone</p>        <p class="elem_item">Fax</p>      <a class="contactBlock_link" href="#">E-mail address</a>  </div>
  <div class="contactBlock_elem contactBlock_details">
      <h6 class="elem_title">Opening hours</h6>        <p class="elem_item">Dayname HH:MM - HH:MM</p>        <p class="elem_item">Dayname HH:MM - HH:MM</p>  </div>
</div>

Block Timetable Item

Lorem

9:21 Lorem

Lorem ipsum dolor sit (37 characters)

Lorem ipsum

This pattern contains: atoms-text-span atoms-text-time atoms-heading-5

HTML

									
										<div class="">
  <div class="timetable_item">
    <div class="tt_itemLocation">
      <span class="tt_itemRoom">Lorem</span>    </div>
    <div class="tt_itemMeta">
      <time class="tt_itemTime">9:21</time>        <span class="tt_itemLabel">Lorem</span>      <a class="tt_itemTitleLink" href="#">
        <h5 class="tt_itemTitle">Lorem ipsum dolor sit (37 characters)</h5>      </a>
        <a href="#" class="btn-text btn-text-small tt_itemButton">Lorem ipsum</a>    </div>
  </div>
</div>

Block Study Program

Lorem

Lorem ipsum dolor sit (37 characters)

Lorem Lorem

HTML

									
										<div class=" program">
    <span class="program_tag">Lorem</span>  <a href="#">
    <h3 class="program_title">Lorem ipsum dolor sit (37 characters)</h3>  </a>
  <div class="program_details">
      <span class="program_location">Lorem</span>      <span class="program_lang">Lorem</span>  </div>
</div>

Block Job

Lorem Lorem

Lorem ipsum dolor sit (37 characters)

Lorem ipsum

This pattern contains: atoms-image-4x3 atoms-text-span atoms-heading-5 atoms-button-text-small-primary

HTML

									
										<div class="job">
    <div class="job_thumb">
      <img class="job_thumb" src="../../images/fpo_4x3.png" alt="" />    </div>
  <div class="job_body">
      <span class="job_brand">Lorem</span>      <span class="job_location">Lorem</span>    <a href="#">
      <h5 class="job_title">Lorem ipsum dolor sit (37 characters)</h5>    </a>
    <a href="#" class="btn-text btn-text-small btn-text-primary job_button">Lorem ipsum</a>  </div>
</div>

Block Job Empty

Lorem Lorem

Lorem ipsum dolor sit (37 characters)

Lorem ipsum

This pattern contains: atoms-image-4x3 atoms-text-span atoms-heading-5 atoms-button-text-small-primary

HTML

									
										<div class="job">
  <div class="job_body">
      <span class="job_brand">Lorem</span>      <span class="job_location">Lorem</span>    <a href="#">
      <h5 class="job_title">Lorem ipsum dolor sit (37 characters)</h5>    </a>
    <a href="#" class="btn-text btn-text-small btn-text-primary job_button">Lorem ipsum</a>  </div>
</div>

Block Tender

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris ni (210 characters)

Lorem ipsum dolor sit (37 characters)

Lorem ipsum

This pattern contains: atoms-text-span atoms-text-paragraph atoms-heading-5 atoms-button-text-small

HTML

									
										<div class=" tender">
  <p class="tender_text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris ni (210 characters)</p>  <a href="#">
    <h5 class="tender_title">Lorem ipsum dolor sit (37 characters)</h5>  </a>
    <a href="#" class="btn-text btn-text-small tender_link">Lorem ipsum</a></div>

Block Person

Lorem ipsum dolor sit (37 characters)

Lorem

This pattern contains: atoms-avatar atoms-heading-5 atoms-text-span

HTML

									
										<div class=" person">
  <img class="person_image" src="../../images/fpo_avatar.png" alt="" />  <h5 class="person_name">Lorem ipsum dolor sit (37 characters)</h5>  <span class="person_role">Lorem</span></div>