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

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

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

HTML

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

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

HTML

									
										<div class=" event">
  <div class="event_body">
    <div class="event_meta">
        <time class="event_date">24 June 2015</time>        <time class="event_time">9:21</time>    </div>
    <a href="#">
        <h2 class="event_title">Lorem ipsum dolor sit (37 characters)</h2>    </a>
  </div>
  <div class="event_figure">
  </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">
      <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

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 Job Empty

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_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 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)

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

HTML

									
										<div class=" person">
  <div class="person_body">
    <a href="#">
      <h5 class="person_name">Lorem ipsum dolor sit (37 characters)</h5>    </a>
  </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>