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

HTML

									
										<div class="highlight">
  <a href="#">
    <img class="highlight_thumb" src="../../images/fpo_4x3.png" alt="" />  </a>
  <div class="highlight_body">
    <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>  </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-4 atoms-image-4x3 atoms-text-paragraph atoms-text-date

HTML

									
										<div class="post">
  <div class="post_body">
    <h4 class="post_title">Lorem ipsum dolor sit (37 characters)</h4>      <img class="post_thumb" src="../../images/fpo_4x3.png" alt="" />    <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>

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

HTML

									
										<div class="post">
  <div class="post_body">
    <h4 class="post_title">Lorem ipsum dolor sit (37 characters)</h4>    <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>

Block Event

Lorem ipsum dolor sit (37 characters)

Lorem Lorem 9:21 24 June 2015

Lorem ipsum

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

HTML

									
										<div class="event">
    <a class="event_figure" href="#">
      <img class="event_thumb" src="../../images/fpo_4x3.png" alt="" />    </a>
  <div class="event_body">
      <h2 class="event_title">Lorem ipsum dolor sit (37 characters)</h2>    <div class="event_details">
        <span class="event_meta">Lorem</span>        <span class="event_meta">Lorem</span>        <time class="event_meta">9:21</time>        <time class="event_meta">24 June 2015</time>    </div>
    <a href="#" class="btn-text btn-text-alt event_btn">Lorem ipsum</a>  </div>
</div>

Block Event Empty

Lorem ipsum dolor sit (37 characters)

Lorem Lorem 9:21 24 June 2015

Lorem ipsum

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

HTML

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

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