Free University of Bozen-Bolzano

Banner

This pattern contains: atoms-heading-1 atoms-heading-2 atoms-text-paragraph atoms-button-alternate atoms-button-medium

HTML

									
										<div class="banner" role="banner" style="background-image:url('../../images/fpo_16x9.png')">
  <div class="l-container">
      <h1 class="banner_title">Lorem ipsum dolor sit (37 characters)</h1>      <h2 class="banner_subTitle">Lorem ipsum dolor sit (37 characters)</h2>      <p class="banner_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 btn-medium banner_btn">Lorem ipsum</a>  </div>
</div>

Banner Empty

This pattern contains: atoms-heading-1 atoms-heading-2 atoms-text-paragraph atoms-button-alternate atoms-button-medium

HTML

									
										<div class="banner" role="banner" >
  <div class="l-container">
      <h1 class="banner_title">Lorem ipsum dolor sit (37 characters)</h1>      <h2 class="banner_subTitle">Lorem ipsum dolor sit (37 characters)</h2>      <p class="banner_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 btn-alt banner_btn">Lorem ipsum</a>  </div>
</div>

Block Links

Lorem ipsum dolor sit (37 characters)

This pattern contains: molecules-block-link

HTML

									
										<div class="blockLink_wrapper g-row">
    <div class="g g-sm-12 g-md-12 g-lg-8 g-xl-6">
        <a class="blockLink" href="#">Lorem ipsum dolor sit (37 characters)</a>    </div>
</div>

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: molecules-block-post

HTML

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

Latest Events

Lorem ipsum dolor sit (37 characters)

Lorem Lorem

24 June 2015 9:21

Lorem ipsum dolor sit (37 characters)

Lorem Lorem

24 June 2015 9:21

Lorem ipsum dolor sit (37 characters)

Lorem Lorem

24 June 2015 9:21

This pattern contains: molecules-block-event

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

Magazine

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 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-paragraph atoms-button-medium

HTML

									
										<div class="magazine">
  <div class="l-container">
    <div class="magazine_inner">
      <h2 class="magazine_title">Lorem ipsum dolor sit (37 characters)</h2>      <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>      <img class="magazine_cover" src="../../images/fpo_portrait.png" alt="" />        <h5 class="magazineArticle_title">Lorem ipsum dolor sit (37 characters)</h5>        <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>      <a href="#" class="btn btn-medium ">Lorem ipsum</a>    </div>
  </div>
</div>

People Section

Lorem ipsum dolor sit (37 characters)

Lorem

This pattern contains: atoms-heading-3 molecules-block-person

HTML

									
										<section class="l-section">
  <div class="l-container-small">
    <div class="typography">
      <h3 class="">Lorem ipsum dolor sit (37 characters)</h3>    </div>
    <div class="g-row g-sm-clear-2 g-lg-clear-3">
        <div class="g g-md-12 g-lg-8">
          <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>        </div>
    </div>
  </div>
</section>

Banner

HTML

Banner Empty

HTML

Block Links

HTML

Latest News

Lorem ipsum dolor sit (37 characters)

HTML

Latest Events

Lorem ipsum dolor sit (37 characters)

Lorem ipsum dolor sit (37 characters)

Lorem ipsum dolor sit (37 characters)

HTML

Magazine

Lorem ipsum dolor sit (37 characters)

Lorem ipsum dolor sit (37 characters)

HTML

People Section

Lorem ipsum dolor sit (37 characters)

Lorem ipsum dolor sit (37 characters)

HTML