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>    <div class="mediaBlock_excerpt">
      <div class="typography">
        <p class="">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>      </div>
    </div>
    <a href="#" class="btn-text btn-text-alt mediaBlock_btn">Lorem ipsum</a>	</div>
</div>

Block Highlight

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">
  </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-wrapper

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">
        <div class="typography ">
          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>
</div>

Block Post

24 June 2015 Lorem

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-date atoms-image-4x3 atoms-heading-4 atoms-text-paragraph

HTML

									
										<div class=" post">
  <span class="post_date">24 June 2015</span>  <span class="post_topic">Lorem</span>  <div class="post_body">
    <a href="#">
      <h4 class="post_title">Lorem ipsum dolor sit (37 characters)</h4>    </a>
    <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>  </div>
</div>

Block Event

24 June 2015 9:21 Lorem

Lorem ipsum dolor sit (37 characters)

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

HTML

									
										<div class=" event">
    <div class="event_figure">
      <a href="#">
        <img class="" src="../../images/fpo_4x3.png" alt="" />      </a>
    </div>
  <div class="event_body">
    <div class="event_meta">
        <span class="event_date">24 June 2015</span>        <span class="event_time">9:21</span>        <span class="event_location">Lorem</span>    </div>
    <a href="#">
        <h2 class="event_title">Lorem ipsum dolor sit (37 characters)</h2>        <h4 class="event_subtitle">Lorem ipsum dolor sit (37 characters)</h4>    </a>
  </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

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_itemMeta">
      <span class="tt_itemTime">9:21</span>        <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

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>  </div>
</div>

Block Job

Lorem Lorem

Lorem ipsum dolor sit (37 characters)

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

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>
  </div>
</div>

Block Tender

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-text-span atoms-heading-5 atoms-text-paragraph atoms-button-text-small

HTML

									
										<div class=" tender">
  <div class="tender_body">
    <a href="#">
      <h5 class="tender_title">Lorem ipsum dolor sit (37 characters)</h5>    </a>
    <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="#" class="btn-text btn-text-small tender_link">Lorem ipsum</a>  </div>
</div>

Block Person

Lorem ipsum dolor sit (37 characters)

Lorem Lorem

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

HTML

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

Block Lecture

Lorem

Lorem ipsum dolor sit (37 characters)

Lorem ipsum

This pattern contains: atoms-text-span atoms-heading-3 atoms-button-text

HTML

									
										<div class="blockLecture">
  <span class="blockLecture_meta">Lorem</span>  <a href="#">
    <h3 class="blockLecture_title">Lorem ipsum dolor sit (37 characters)</h3>  </a>
    <a href="#" class="btn-text btn-text-small blockLecture_btn">Lorem ipsum</a></div>

Block Research

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-image-4x3 atoms-heading-3

HTML

									
										<div class="blockResearch">
  <div class="blockResearch_image">
    <img class="" src="../../images/fpo_4x3.png" alt="" />  </div>
  <a href="#">
    <h3 class="blockResearch_title">Lorem ipsum dolor sit (37 characters)</h3>    <p class="blockResearch_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>
</div>

Block Text

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-text-paragraph atoms-button-text-primary

HTML

									
										  <h2 class="h2">Lorem ipsum dolor sit (37 characters)</h2>
<div class="typography">
    <img class="" src="../../images/fpo_4x3.png" alt="" />
    <p class="">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>
    <p>
      <a href="#" class="btn-text btn-text-primary ">Lorem ipsum</a>    </p>
</div>

Block Typography

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-wrapper

HTML

									
										  <div class="typography typography-left">
    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>