Banner

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

HTML

									
										<section class="l-sectionLarge ">
  <div class="banner " role="banner" style="background-image:url('../../images/fpo_16x9.png')">
    <div class="banner_inner">
      <div class="l-containerSmall">
          <h1 class="banner_title">Lorem ipsum dolor sit (37 characters)</h1>          <h2 class="banner_subTitle">Lorem ipsum dolor sit (37 characters)</h2>      </div>
      <div class="l-container">
            <a href="#" class="btn btn-medium banner_btn">Lorem ipsum</a>      </div>
    </div>
  </div>
</section>

Lorem ipsum dolor sit (37 characters)

This pattern contains: atoms-heading-2 atoms-text-paragraph molecules-block-link

HTML

									
										<section class="l-section">
  <div class="l-containerSmall">
    <h2 class="">Lorem ipsum dolor sit (37 characters)</h2>  </div>
  <div class="l-container ">
    <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 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 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>
  </div>
</section>

Lorem ipsum dolor sit (37 characters)

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)

Lorem ipsum

This pattern contains: atoms-heading-2 molecules-block-post atoms-button-text-primary

HTML

									
										<section class="l-section">
    <div class="l-containerSmall">
        <h2 class="">Lorem ipsum dolor sit (37 characters)</h2>        <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>        <a href="#" class="btn-text btn-text-primary ">Lorem ipsum</a>    </div>
</section>

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: atoms-heading-2 molecules-block-event atoms-button-text-primary

HTML

									
										<section class="l-section">
  <div class="l-containerSmall">
      <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>          </div>
          <a href="#">
        <h2 class="event_title">Lorem ipsum dolor sit (37 characters)</h2>          </a>
        </div>
      </div>      <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>          </div>
          <a href="#">
        <h2 class="event_title">Lorem ipsum dolor sit (37 characters)</h2>          </a>
        </div>
      </div>      <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>          </div>
          <a href="#">
        <h2 class="event_title">Lorem ipsum dolor sit (37 characters)</h2>          </a>
        </div>
      </div>  </div>
</section>

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

Lorem ipsum dolor sit (37 characters)

Lorem Lorem

Lorem ipsum dolor sit (37 characters)

Lorem Lorem

Lorem ipsum dolor sit (37 characters)

Lorem Lorem

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

HTML

									
										<section class="l-section">
  <div class="l-container">
    <div class="l-container_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 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 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 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>
  </div>
</section>

Grid Title

Lorem ipsum dolor sit (37 characters)

Lorem

Lorem ipsum dolor sit (37 characters)

Lorem ipsum

This pattern contains: molecules-block-lecture

HTML

									
										<section class="l-section">
  <div class="l-container">
      <div class="l-container_left">
        <h3 class="h-theme">Lorem ipsum dolor sit (37 characters)</h3>      </div>
      <div class="gridTitle">
          <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>
  </div>
</section>

Study Programs

Lorem ipsum dolor sit (37 characters)

Lorem

Lorem ipsum dolor sit (37 characters)

Lorem

This pattern contains: molecules-block-study-program

HTML

									
										<section class="l-sectionSmall">
  <div class="l-container">
      <h3 class="h-theme">Lorem ipsum dolor sit (37 characters)</h3>      <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>
  </div>
</section>

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

HTML

									
										<section class="l-section">
  <div class="l-containerSmall">
    <h3 class="h3">Lorem ipsum dolor sit (37 characters)</h3>  </div>
  <div class="l-container">
    <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>
  </div>
</section>

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

HTML

									
										<section class="l-section">
      <div class="l-containerSmall">
  <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>      </div>
</section>

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

HTML

									
										<section class="l-section">
      <div class="l-containerSmall">
  <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>      </div>
</section>

Block Media

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

HTML

									
										<section class="l-sectionLarge">
  <div class="l-container">
    <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>  </div>
</section>

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

HTML

									
										<section class="l-sectionLarge">
  <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></section>

Testimonial

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

HTML

									
										<section class="l-sectionLarge">
  <img class="testimonial_avatar" src="../../images/fpo_avatar.png" alt="" />  <div class="testimonial " role="banner">
    <div class="l-containerSmall">
      <h3 class="testimonial_name">Lorem ipsum dolor sit (37 characters)</h3>      <span class="testimonial_role">Lorem</span>      <div class="testimonial_text">
        <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>
    </div>
  </div>
</section>

Pagination

1 2 3 4 5 6 7 8 9 10

This pattern contains: molecules-nav-pagination

HTML

									
										<section class="l-section">
  <div class="l-containerSmall">
    <div class="pagination">
  <a href="#" class="btn-round pagination_button"><i class="i i-arrow-left"></i></a>      <div class="pagination_pagesWrapper">
        <span class="pagination_page pagination_page-current">1</span>
        <span class="pagination_page">2</span>
        <span class="pagination_page">3</span>
        <span class="pagination_page">4</span>
        <span class="pagination_page">5</span>
        <span class="pagination_page">6</span>
        <span class="pagination_page">7</span>
        <span class="pagination_page">8</span>
        <span class="pagination_page">9</span>
        <span class="pagination_page">10</span>
      </div>
  <a href="#" class="btn-round pagination_button"><i class="i i-arrow-right"></i></a>    </div>
  </div>
</section>

Latest Jobs

Lorem Lorem

Lorem ipsum dolor sit (37 characters)

This pattern contains: organisms-power-tools molecules-block-job

HTML

									
										<section class="l-section">
  <div class="l-container">
    <div class="g-row">
      <div class="g g-md-9 g-md-off-1 g-md-push-14">
        <div class="powerTools">


        </div>      </div>
      <div class="g g-md-14 g-md-pull-10">
          <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>      </div>
    </div>
  </div>
</section>

Latest Tenders

This pattern contains: organisms-power-tools molecules-block-tender

HTML

									
										<section class="l-section">
  <div class="l-container">
    <div class="g-row">
    <div class="g g-md-9 g-md-off-1 g-md-push-14">
      <div class="powerTools">


      </div>    </div>
    <div class="g g-md-14 g-md-pull-10">
    </div>
  </div>
</section>

Post

Lorem

Lorem ipsum dolor sit (37 characters)

Lorem Lorem 24 June 2015

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-post-header atoms-text-paragraph molecules-block-typography

HTML

									
										<section class="l-section">
  <div class="l-container">
    <div class="g-row">
      <div class="g g-lg-16">
        <header class="postHeader">
    <span class="postHeader_tag">Lorem</span>  <h1 class="postHeader_title">Lorem ipsum dolor sit (37 characters)</h1>    <span class="theme postHeader_author">Lorem</span>    <span class="postHeader_authorSocial">Lorem</span>  <span class="postHeader_date">24 June 2015</span>        </header>          <div class="typography">
            <p class="intro-post">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>
</section>
<section class="l-section">
  <div class="l-container">
    <div class="g-row">
      <div class="g g-lg-16">
  <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>
</section>

Event Intro

Lorem 24 June 2015 9:21

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-span atoms-text-date atoms-text-time atoms-text-paragraph

HTML

									
										<section class="l-section">
  <div class="l-container">
    <div class="g-row">
      <div class="g g-md-8 g-lg-8 g-md-push-16">
        <img class="event_poster" src="../../images/fpo_portrait.png" alt="" />      </div>
      <div class="g g-md-16 g-lg-14 g-xl-14 g-md-pull-8">
          <div class="event_meta eventDetail_meta">
              <span class="event_location">Lorem</span>              <span class="event_date">24 June 2015</span>              <span class="event_time">9:21</span>          </div>
          <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>
</section>

Location

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

HTML

									
										<section class="l-section">
  <div class="l-container">
    <h3 class="h3 h-theme">Lorem ipsum dolor sit (37 characters)</h3>    <div class="g-row">
      <div class="g g-lg-8">
        <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 class="g g-lg-14 g-lg-off-2">
        <div class="maps">
          <iframe class="maps_iframe" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2746.5067386875935!2d11.3503271!3d46.498078799999995!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x47829e795d3a902d%3A0xdc939b140fa714ad!2sFree+University+of+Bozen-Bolzano!5e0!3m2!1sen!2sde!4v1442240508917" height="300" frameborder="0" style="border:0"></iframe>
        </div>      </div>
    </div>
  </div>
</section>

Office

This pattern contains: atoms-text-paragraph

HTML

									
										<section class="l-section">
  <div class="l-container">
    <div class="g-row">
      <div class="g g-md-8 g-lg-8 g-md-push-16">
      </div>
      <div class="g g-md-16 g-lg-14 g-xl-14 g-md-pull-8">
      </div>
    </div>
  </div>
</section>

Person

Lorem Lorem Lorem Lorem ipsum

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 Lorem

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

Lorem ipsum dolor sit (37 characters)

Lorem ipsum

Lorem ipsum dolor sit (37 characters)

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)

Lorem ipsum

This pattern contains: atoms-text-link atoms-text-span atoms-button-text-small atoms-text-paragraph molecules-block-lecture molecules-block-post atoms-button-medium

HTML

									
										<section class="l-section">
  <div class="l-container">
    <div class="g-row">
      <div class="g g-md-8 g-lg-6">
        <div class="person_meta">
          <div class="person_metaPhoto">
            <img class="person_photo" src="../../images/fpo_4x3.png" alt="" />          </div>
          <div class="person_metaInfo">
              <a class="person_mail" href="#">Lorem</a>              <span class="person_phone">Lorem</span>              <span class="person_office">Lorem</span>              <a href="#" class="btn-text btn-text-small person_link">Lorem ipsum</a>              <p class="person_address">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>
      <div class="g g-md-14 g-lg-16">
          <span class="person_department">Lorem</span>          <span class="person_position">Lorem</span>        <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>          <h3 class="h3 h-theme">Lorem ipsum dolor sit (37 characters)</h3>          <div class="person_lectures">
              <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>
          <h3 class="h3 h-theme">Lorem ipsum dolor sit (37 characters)</h3>            <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>          <a href="#" class="btn btn-medium ">Lorem ipsum</a>      </div>
  </div>
</section>

News

Lorem ipsum dolor sit (37 characters) Lorem ipsum dolor sit (37 characters)

(12) ✕ (8) ✕ (5) ✕ (3) ✕ (13) ✕

Lorem ipsum dolor sit (37 characters)

October 2015

Mon Tue Wed Thu Fri Sat Sun

28

29

30

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

1

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

HTML

									
										<section class="l-section">
  <div class="l-container">
    <div class="g-row">
      <div class="g g-md-9 g-md-off-1 g-md-push-14">
        <div class="powerTools">
            <span class="tag powerTools_tag">Lorem ipsum dolor sit (37 characters)</span>
    <a class="btn-toggle powerTools_toggle" href="#"><i class="i i-search"></i></a>    <form class="form_input-search powerTools_search" role="search">
      <input class="form_input" type="search" placeholder="Search for news...">
      <a class="form_input-searchButton" href="#"><i class="i i-search-gray"></i></a>
    </form>
            <span class="tag powerTools_tag">Lorem ipsum dolor sit (37 characters)</span>
    <a class="btn-toggle powerTools_toggle" href="#"><i class="i i-filter"></i></a>            <div class="powerTools_filters">
  <a href="#" class="btn btn-filter ">
    <span class="btn-filter_label">AWARDS</span>
    <span class="btn-filter_counter">(12)</span>
    <span class="btn-filter_close">✕</span>
  </a>  <a href="#" class="btn btn-filter btn-filter-active">
    <span class="btn-filter_label">RESEARCH</span>
    <span class="btn-filter_counter">(8)</span>
    <span class="btn-filter_close">✕</span>
  </a>  <a href="#" class="btn btn-filter ">
    <span class="btn-filter_label">NEWS</span>
    <span class="btn-filter_counter">(5)</span>
    <span class="btn-filter_close">✕</span>
  </a>  <a href="#" class="btn btn-filter ">
    <span class="btn-filter_label">CALL</span>
    <span class="btn-filter_counter">(3)</span>
    <span class="btn-filter_close">✕</span>
  </a>  <a href="#" class="btn btn-filter ">
    <span class="btn-filter_label">EVENT</span>
    <span class="btn-filter_counter">(13)</span>
    <span class="btn-filter_close">✕</span>
  </a>
            </div>

            <span class="tag powerTools_tag">Lorem ipsum dolor sit (37 characters)</span>
    <a class="btn-toggle powerTools_toggle" href="#"><i class="i i-calendar"></i></a>    <div class="calendarMonths powerTools_calendar">
      <div class="cm_navMonthNav">
        <div class="cm_navMonthBtnWrapper">
      <a href="#" class="btn-round cm_navMonthBtn"><i class="i i-arrow-left"></i></a>        </div>
          <span class="cm_navMonthName">October 2015</span>
        <div class="cm_navMonthBtnWrapper">
      <a href="#" class="btn-round cm_navMonthBtn"><i class="i i-arrow-right"></i></a>        </div>
      </div>
      <div class="cm_navMonthDays">
        <span class="cm_navMonthDay">Mon</span>
        <span class="cm_navMonthDay">Tue</span>
        <span class="cm_navMonthDay">Wed</span>
        <span class="cm_navMonthDay">Thu</span>
        <span class="cm_navMonthDay">Fri</span>
        <span class="cm_navMonthDay">Sat</span>
        <span class="cm_navMonthDay">Sun</span>
      </div>
      <div class="cm_navMonthCalendar">
        <div class="cm_navMonthDay">
          <span class="cm_navMonthDayNum cm_navMonthDayNum-inactive">28</span>
        </div>
        <div class="cm_navMonthDay">
          <span class="cm_navMonthDayNum cm_navMonthDayNum-inactive">29</span>
        </div>
        <div class="cm_navMonthDay">
          <span class="cm_navMonthDayNum cm_navMonthDayNum-inactive">30</span>
        </div>
        <div class="cm_navMonthDay">
          <span class="cm_navMonthDayNum">1</span>
        </div>
        <div class="cm_navMonthDay">
          <span class="cm_navMonthDayNum">2</span>
        </div>
        <div class="cm_navMonthDay">
          <span class="cm_navMonthDayNum">3</span>
        </div>
        <div class="cm_navMonthDay">
          <span class="cm_navMonthDayNum">4</span>
        </div>
        <div class="cm_navMonthDay">
          <span class="cm_navMonthDayNum">5</span>
        </div>
        <div class="cm_navMonthDay">
          <span class="cm_navMonthDayNum">6</span>
        </div>
        <div class="cm_navMonthDay">
          <span class="cm_navMonthDayNum cm_navMonthDayNum-current">7</span>
        </div>
        <div class="cm_navMonthDay">
          <span class="cm_navMonthDayNum">8</span>
        </div>
        <div class="cm_navMonthDay">
          <span class="cm_navMonthDayNum">9</span>
        </div>
        <div class="cm_navMonthDay">
          <span class="cm_navMonthDayNum">10</span>
        </div>
        <div class="cm_navMonthDay">
          <span class="cm_navMonthDayNum">11</span>
        </div>
        <div class="cm_navMonthDay">
          <span class="cm_navMonthDayNum">12</span>
        </div>
        <div class="cm_navMonthDay">
          <span class="cm_navMonthDayNum">13</span>
        </div>
        <div class="cm_navMonthDay">
          <span class="cm_navMonthDayNum">14</span>
        </div>
        <div class="cm_navMonthDay">
          <span class="cm_navMonthDayNum">15</span>
        </div>
        <div class="cm_navMonthDay">
          <span class="cm_navMonthDayNum">16</span>
        </div>
        <div class="cm_navMonthDay">
          <span class="cm_navMonthDayNum">17</span>
        </div>
        <div class="cm_navMonthDay">
          <span class="cm_navMonthDayNum">18</span>
        </div>
        <div class="cm_navMonthDay">
          <span class="cm_navMonthDayNum">19</span>
        </div>
        <div class="cm_navMonthDay">
          <span class="cm_navMonthDayNum">20</span>
        </div>
        <div class="cm_navMonthDay">
          <span class="cm_navMonthDayNum">21</span>
        </div>
        <div class="cm_navMonthDay">
          <span class="cm_navMonthDayNum">22</span>
        </div>
        <div class="cm_navMonthDay">
          <span class="cm_navMonthDayNum">23</span>
        </div>
        <div class="cm_navMonthDay">
          <span class="cm_navMonthDayNum">24</span>
        </div>
        <div class="cm_navMonthDay">
          <span class="cm_navMonthDayNum">25</span>
        </div>
        <div class="cm_navMonthDay">
          <span class="cm_navMonthDayNum">26</span>
        </div>
        <div class="cm_navMonthDay">
          <span class="cm_navMonthDayNum">27</span>
        </div>
        <div class="cm_navMonthDay">
          <span class="cm_navMonthDayNum">28</span>
        </div>
        <div class="cm_navMonthDay">
          <span class="cm_navMonthDayNum">29</span>
        </div>
        <div class="cm_navMonthDay">
          <span class="cm_navMonthDayNum">30</span>
        </div>
        <div class="cm_navMonthDay">
          <span class="cm_navMonthDayNum">31</span>
        </div>
        <div class="cm_navMonthDay">
          <span class="cm_navMonthDayNum cm_navMonthDayNum-inactive">1</span>
        </div>
      </div>
    </div>        </div>      </div>
      <div class="g g-md-14 g-md-pull-10">
          <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>      </div>
    </div>
  </div>
</section>

Events

Lorem ipsum dolor sit (37 characters) Lorem ipsum dolor sit (37 characters)

(12) ✕ (8) ✕ (5) ✕ (3) ✕ (13) ✕

Lorem ipsum dolor sit (37 characters)

October 2015

Mon Tue Wed Thu Fri Sat Sun

28

29

30

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

1

24 June 2015 9:21

HTML

									
										<section class="l-section">
  <div class="l-container">
    <div class="g-row">
      <div class="g g-md-9 g-md-off-1 g-md-push-14">
        <div class="powerTools">
            <span class="tag powerTools_tag">Lorem ipsum dolor sit (37 characters)</span>
    <a class="btn-toggle powerTools_toggle" href="#"><i class="i i-search"></i></a>    <form class="form_input-search powerTools_search" role="search">
      <input class="form_input" type="search" placeholder="Search for news...">
      <a class="form_input-searchButton" href="#"><i class="i i-search-gray"></i></a>
    </form>
            <span class="tag powerTools_tag">Lorem ipsum dolor sit (37 characters)</span>
    <a class="btn-toggle powerTools_toggle" href="#"><i class="i i-filter"></i></a>            <div class="powerTools_filters">
  <a href="#" class="btn btn-filter ">
    <span class="btn-filter_label">AWARDS</span>
    <span class="btn-filter_counter">(12)</span>
    <span class="btn-filter_close">✕</span>
  </a>  <a href="#" class="btn btn-filter btn-filter-active">
    <span class="btn-filter_label">RESEARCH</span>
    <span class="btn-filter_counter">(8)</span>
    <span class="btn-filter_close">✕</span>
  </a>  <a href="#" class="btn btn-filter ">
    <span class="btn-filter_label">NEWS</span>
    <span class="btn-filter_counter">(5)</span>
    <span class="btn-filter_close">✕</span>
  </a>  <a href="#" class="btn btn-filter ">
    <span class="btn-filter_label">CALL</span>
    <span class="btn-filter_counter">(3)</span>
    <span class="btn-filter_close">✕</span>
  </a>  <a href="#" class="btn btn-filter ">
    <span class="btn-filter_label">EVENT</span>
    <span class="btn-filter_counter">(13)</span>
    <span class="btn-filter_close">✕</span>
  </a>
            </div>

            <span class="tag powerTools_tag">Lorem ipsum dolor sit (37 characters)</span>
    <a class="btn-toggle powerTools_toggle" href="#"><i class="i i-calendar"></i></a>    <div class="calendarMonths powerTools_calendar">
      <div class="cm_navMonthNav">
        <div class="cm_navMonthBtnWrapper">
      <a href="#" class="btn-round cm_navMonthBtn"><i class="i i-arrow-left"></i></a>        </div>
          <span class="cm_navMonthName">October 2015</span>
        <div class="cm_navMonthBtnWrapper">
      <a href="#" class="btn-round cm_navMonthBtn"><i class="i i-arrow-right"></i></a>        </div>
      </div>
      <div class="cm_navMonthDays">
        <span class="cm_navMonthDay">Mon</span>
        <span class="cm_navMonthDay">Tue</span>
        <span class="cm_navMonthDay">Wed</span>
        <span class="cm_navMonthDay">Thu</span>
        <span class="cm_navMonthDay">Fri</span>
        <span class="cm_navMonthDay">Sat</span>
        <span class="cm_navMonthDay">Sun</span>
      </div>
      <div class="cm_navMonthCalendar">
        <div class="cm_navMonthDay">
          <span class="cm_navMonthDayNum cm_navMonthDayNum-inactive">28</span>
        </div>
        <div class="cm_navMonthDay">
          <span class="cm_navMonthDayNum cm_navMonthDayNum-inactive">29</span>
        </div>
        <div class="cm_navMonthDay">
          <span class="cm_navMonthDayNum cm_navMonthDayNum-inactive">30</span>
        </div>
        <div class="cm_navMonthDay">
          <span class="cm_navMonthDayNum">1</span>
        </div>
        <div class="cm_navMonthDay">
          <span class="cm_navMonthDayNum">2</span>
        </div>
        <div class="cm_navMonthDay">
          <span class="cm_navMonthDayNum">3</span>
        </div>
        <div class="cm_navMonthDay">
          <span class="cm_navMonthDayNum">4</span>
        </div>
        <div class="cm_navMonthDay">
          <span class="cm_navMonthDayNum">5</span>
        </div>
        <div class="cm_navMonthDay">
          <span class="cm_navMonthDayNum">6</span>
        </div>
        <div class="cm_navMonthDay">
          <span class="cm_navMonthDayNum cm_navMonthDayNum-current">7</span>
        </div>
        <div class="cm_navMonthDay">
          <span class="cm_navMonthDayNum">8</span>
        </div>
        <div class="cm_navMonthDay">
          <span class="cm_navMonthDayNum">9</span>
        </div>
        <div class="cm_navMonthDay">
          <span class="cm_navMonthDayNum">10</span>
        </div>
        <div class="cm_navMonthDay">
          <span class="cm_navMonthDayNum">11</span>
        </div>
        <div class="cm_navMonthDay">
          <span class="cm_navMonthDayNum">12</span>
        </div>
        <div class="cm_navMonthDay">
          <span class="cm_navMonthDayNum">13</span>
        </div>
        <div class="cm_navMonthDay">
          <span class="cm_navMonthDayNum">14</span>
        </div>
        <div class="cm_navMonthDay">
          <span class="cm_navMonthDayNum">15</span>
        </div>
        <div class="cm_navMonthDay">
          <span class="cm_navMonthDayNum">16</span>
        </div>
        <div class="cm_navMonthDay">
          <span class="cm_navMonthDayNum">17</span>
        </div>
        <div class="cm_navMonthDay">
          <span class="cm_navMonthDayNum">18</span>
        </div>
        <div class="cm_navMonthDay">
          <span class="cm_navMonthDayNum">19</span>
        </div>
        <div class="cm_navMonthDay">
          <span class="cm_navMonthDayNum">20</span>
        </div>
        <div class="cm_navMonthDay">
          <span class="cm_navMonthDayNum">21</span>
        </div>
        <div class="cm_navMonthDay">
          <span class="cm_navMonthDayNum">22</span>
        </div>
        <div class="cm_navMonthDay">
          <span class="cm_navMonthDayNum">23</span>
        </div>
        <div class="cm_navMonthDay">
          <span class="cm_navMonthDayNum">24</span>
        </div>
        <div class="cm_navMonthDay">
          <span class="cm_navMonthDayNum">25</span>
        </div>
        <div class="cm_navMonthDay">
          <span class="cm_navMonthDayNum">26</span>
        </div>
        <div class="cm_navMonthDay">
          <span class="cm_navMonthDayNum">27</span>
        </div>
        <div class="cm_navMonthDay">
          <span class="cm_navMonthDayNum">28</span>
        </div>
        <div class="cm_navMonthDay">
          <span class="cm_navMonthDayNum">29</span>
        </div>
        <div class="cm_navMonthDay">
          <span class="cm_navMonthDayNum">30</span>
        </div>
        <div class="cm_navMonthDay">
          <span class="cm_navMonthDayNum">31</span>
        </div>
        <div class="cm_navMonthDay">
          <span class="cm_navMonthDayNum cm_navMonthDayNum-inactive">1</span>
        </div>
      </div>
    </div>        </div>      </div>
      <div class="g g-md-14 g-md-pull-10">
          <div class="u-padd-btm-half 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>              </div>
              <a href="#">
        <h2 class="event_title">Lorem ipsum dolor sit (37 characters)</h2>              </a>
            </div>
          </div>          <div class="u-padd-btm-half 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>              </div>
              <a href="#">
        <h2 class="event_title">Lorem ipsum dolor sit (37 characters)</h2>              </a>
            </div>
          </div>          <div class="u-padd-btm-half 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>              </div>
              <a href="#">
        <h2 class="event_title">Lorem ipsum dolor sit (37 characters)</h2>              </a>
            </div>
          </div>      </div>
    </div>
  </div>
</section>