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

This pattern contains: molecules-block-post

HTML

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

Latest Events

24 June 2015 9:21

Lorem ipsum dolor sit (37 characters)

24 June 2015 9:21

Lorem ipsum dolor sit (37 characters)

24 June 2015 9:21

Lorem ipsum dolor sit (37 characters)

This pattern contains: molecules-block-event

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">
      <img class="" src="../../images/fpo_4x3.png" alt="" />    </div>
  </div>  <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">
      <img class="" src="../../images/fpo_4x3.png" alt="" />    </div>
  </div>  <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">
      <img class="" src="../../images/fpo_4x3.png" alt="" />    </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 Lorem

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

HTML

									
										  <div class="typography typography-left">
    <h3 class="h-theme">Lorem ipsum dolor sit (37 characters)</h3>  </div>
  <div class="g-row g-md-clear-2 g-lg-clear-3">
      <div class="g g-md-12 g-lg-8">
        <div class=" person">
          <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>      </div>
  </div>

Lectures

Lorem ipsum dolor sit (37 characters)

Lorem

Lorem ipsum dolor sit (37 characters)

Lorem ipsum

This pattern contains: molecules-block-lecture

HTML

									
										  <div class="typography typography-left">
    <h3 class="h-theme">Lorem ipsum dolor sit (37 characters)</h3>  </div>
  <div class="blockLectures">
      <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>  </div>

Study Programs

Lorem ipsum dolor sit (37 characters)

Lorem

Lorem ipsum dolor sit (37 characters)

Lorem

This pattern contains: molecules-block-study-program

HTML

									
										  <div class="typography typography-left">
    <h3 class="h-theme">Lorem ipsum dolor sit (37 characters)</h3>  </div>
  <div class="program_wrap">
      <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>  </div>

Latest Highlights

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

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

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

HTML

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