Colors Base

$white #ffffff
$gray-light #f5f5f5
$gray #dbdbdb
$gray-dark #ababab
$black #000000

HTML

									
										<ul class="sg-colors list-reset">
  <li>
    <span class="sg-swatch" style="background: #ffffff;"></span>
    <span class="sg-label">$white</span>
    <span class="sg-label">#ffffff</span>
  </li>
  <li>
    <span class="sg-swatch" style="background: #f5f5f5;"></span>
    <span class="sg-label">$gray-light</span>
    <span class="sg-label">#f5f5f5</span>
  </li>
  <li>
    <span class="sg-swatch" style="background: #dbdbdb;"></span>
    <span class="sg-label">$gray</span>
    <span class="sg-label">#dbdbdb</span>
  </li>
  <li>
    <span class="sg-swatch" style="background: #ababab;"></span>
    <span class="sg-label">$gray-dark</span>
    <span class="sg-label">#ababab</span>
  </li>
  <li>
    <span class="sg-swatch" style="background: #000000;"></span>
    <span class="sg-label">$black</span>
    <span class="sg-label">#000000</span>
  </li>
</ul>

Colors Brand

$unibz #007be4
$comp #f86b07
$dsgn #ed331a
$edu #6cc3ab
$eco #ac145a
$tech #1a8c64
$library #e1a22e

HTML

									
										<ul class="sg-colors list-reset">
  <li>
    <span class="sg-swatch" style="background: #007be4;"></span>
    <span class="sg-label">$unibz</span>
    <span class="sg-label">#007be4</span>
  </li>
  <li>
    <span class="sg-swatch" style="background: #f86b07;"></span>
    <span class="sg-label">$comp</span>
    <span class="sg-label">#f86b07</span>
  </li>
  <li>
    <span class="sg-swatch" style="background: #ed331a;"></span>
    <span class="sg-label">$dsgn</span>
    <span class="sg-label">#ed331a</span>
  </li>
  <li>
    <span class="sg-swatch" style="background: #6cc3ab;"></span>
    <span class="sg-label">$edu</span>
    <span class="sg-label">#6cc3ab</span>
  </li>
  <li>
    <span class="sg-swatch" style="background: #ac145a;"></span>
    <span class="sg-label">$eco</span>
    <span class="sg-label">#ac145a</span>
  </li>
  <li>
    <span class="sg-swatch" style="background: #1a8c64;"></span>
    <span class="sg-label">$tech</span>
    <span class="sg-label">#1a8c64</span>
  </li>
  <li>
    <span class="sg-swatch" style="background: #e1a22e;"></span>
    <span class="sg-label">$library</span>
    <span class="sg-label">#e1a22e</span>
  </li>
</ul>

Colors Typography

$color-heading #444444
$color-text #202020
$color-text-gray #ababab
$selection-color #b4d5fe

HTML

									
										<ul class="sg-colors list-reset">
  <li>
    <span class="sg-swatch" style="background: #444444;"></span>
    <span class="sg-label">$color-heading</span>
    <span class="sg-label">#444444</span>
  </li>
  <li>
    <span class="sg-swatch" style="background: #202020;"></span>
    <span class="sg-label">$color-text</span>
    <span class="sg-label">#202020</span>
  </li>
  <li>
    <span class="sg-swatch" style="background: #ababab;"></span>
    <span class="sg-label">$color-text-gray</span>
    <span class="sg-label">#ababab</span>
  </li>
  <li>
    <span class="sg-swatch" style="background: #b4d5fe;"></span>
    <span class="sg-label">$selection-color</span>
    <span class="sg-label">#b4d5fe</span>
  </li>
</ul>

Social Colors

$facebook #3b5998
$twitter #55acee
$instagram #3f729b
$linkedin #0077b5

HTML

									
										<ul class="sg-colors list-reset">
  <li>
    <span class="sg-swatch" style="background: #3b5998;"></span>
    <span class="sg-label">$facebook</span>
    <span class="sg-label">#3b5998</span>
  </li>
  <li>
    <span class="sg-swatch" style="background: #55acee;"></span>
    <span class="sg-label">$twitter</span>
    <span class="sg-label">#55acee</span>
  </li>
  <li>
    <span class="sg-swatch" style="background: #3f729b;"></span>
    <span class="sg-label">$instagram</span>
    <span class="sg-label">#3f729b</span>
  </li>
  <li>
    <span class="sg-swatch" style="background: #0077b5;"></span>
    <span class="sg-label">$linkedin</span>
    <span class="sg-label">#0077b5</span>
  </li>
</ul>

Fonts

Primary font: "FF DIN Pro Light", "Helvetica Neue", "Helvetica", "Arial", sans-serif;

Primary font italic: "FF DIN Pro", "Helvetica Neue", "Helvetica", "Arial", sans-serif;

Primary font bold: "FF DIN Pro", "Helvetica Neue", "Helvetica", "Arial", sans-serif;

Secondary font: "freight-display-pro", Georgia, Times, "Times New Roman", serif;

Secondary font italic: "freight-display-pro", Georgia, Times, "Times New Roman", serif;

Secondary font bold: "freight-display-pro", Georgia, Times, "Times New Roman", serif;

HTML

									
										<p>Primary font: "FF DIN Pro Light", "Helvetica Neue",  "Helvetica", "Arial", sans-serif;</p>
<p><em>Primary font italic: "FF DIN Pro", "Helvetica Neue",  "Helvetica", "Arial", sans-serif;</em></p>
<p><strong>Primary font bold: "FF DIN Pro", "Helvetica Neue",  "Helvetica", "Arial", sans-serif;</strong></p>
<p class="font-secondary">Secondary font: "freight-display-pro", Georgia, Times, "Times New Roman", serif;</p>
<p class="font-secondary"><em>Secondary font italic: "freight-display-pro", Georgia, Times, "Times New Roman", serif;</em></p>
<p class="font-secondary"><strong>Secondary font bold: "freight-display-pro", Georgia, Times, "Times New Roman", serif;</strong></p>

Lorem ipsum dolor sit (37 characters)

HTML

									
										<h1 class="h1">Lorem ipsum dolor sit (37 characters)</h1>

Lorem ipsum dolor sit (37 characters)

HTML

									
										<h2 class="h2">Lorem ipsum dolor sit (37 characters)</h2>

Heading 3

Lorem ipsum dolor sit (37 characters)

HTML

									
										<h3 class="h3">Lorem ipsum dolor sit (37 characters)</h3>

Heading 4

Lorem ipsum dolor sit (37 characters)

HTML

									
										<h4 class="h4">Lorem ipsum dolor sit (37 characters)</h4>

Heading 5

Lorem ipsum dolor sit (37 characters)

HTML

									
										<h5 class="h5">Lorem ipsum dolor sit (37 characters)</h5>

Heading 6

Lorem ipsum dolor sit (37 characters)

HTML

									
										<h6 class="h6">Lorem ipsum dolor sit (37 characters)</h6>

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)

HTML

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

Text Paragraph

HTML

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

Text Blockquote

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)

HTML

									
										<blockquote>
	<p>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>
</blockquote>

Text Inline Elements

This is a text link

Strong is used to indicate strong importance

This text has added emphasis

The b element is stylistically different text from normal text, without any special importance

The i element is text that is set off from the normal text

The u element is text with an unarticulated, though explicitly rendered, non-textual annotation

~~This text is deleted~~ and This text is inserted

~~This text has a strikethrough~~

Superscript^®

Subscript for things like H₂O

This small text is small for for fine print, etc.

Abbreviation: HTML

Keybord input: Cmd + V

This text is a short inline quotation

This is a citation

The dfn element indicates a definition.

The mark element indicates a highlight

This is what inline code looks like.

This is sample output from a computer program

The variable element, such as x = y

HTML

									
										<p><a class="link" href="#">This is a text link</a></p>

<p><strong>Strong is used to indicate strong importance</strong></p>

<p><em>This text has added emphasis</em></p>

<p>The <b>b element</b> is stylistically different text from normal text, without any special importance</p>

<p>The <i>i element</i> is text that is set off from the normal text</p>

<p>The <u>u element</u> is text with an unarticulated, though explicitly rendered, non-textual annotation</p>

<p><del>This text is deleted</del> and <ins>This text is inserted</ins></p>

<p><s>This text has a strikethrough</s></p>

<p>Superscript<sup>®</sup></p>

<p>Subscript for things like H<sub>2</sub>O</p>

<p><small>This small text is small for for fine print, etc.</small></p>

<p>Abbreviation: <abbr title="HyperText Markup Language">HTML</abbr></p>

<p>Keybord input: <kbd>Cmd</kbd> + <kbd>V</kbd></p>

<p><q cite="https://developer.mozilla.org/en-US/docs/HTML/Element/q">This text is a short inline quotation</q></p>

<p><cite>This is a citation</cite></p>

<p>The <dfn>dfn element</dfn> indicates a definition.</p>

<p>The <mark>mark element</mark> indicates a highlight</p>

<p><code>This is what inline code looks like.</code></p>

<p><samp>This is sample output from a computer program</samp></p>

<p>The <var>variable element</var>, such as <var>x</var> = <var>y</var></p>

Text Date

24 June 2015

HTML

									
										<span class="">24 June 2015</span>

Text Time

9:21

HTML

									
										<span class="">9:21</span>

Text Span

Lorem

HTML

									
										<span class="">Lorem</span>

Text Link

Lorem

HTML

									
										<a class="link" href="#">Lorem</a>

Text Hr

HTML

									
										<hr />

Text Preformatted

P R E F O R M A T T E D T E X T
! " # $ % & ' ( ) * + , - . /
0 1 2 3 4 5 6 7 8 9 : ; < = > ?
@ A B C D E F G H I J K L M N O
P Q R S T U V W X Y Z [ \ ] ^ _
` a b c d e f g h i j k l m n o
p q r s t u v w x y z { | } ~

HTML

									
										<pre>
P R E F O R M A T T E D T E X T
! " # $ % &amp; ' ( ) * + , - . /
0 1 2 3 4 5 6 7 8 9 : ; &lt; = &gt; ?
@ A B C D E F G H I J K L M N O
P Q R S T U V W X Y Z [ \ ] ^ _
` a b c d e f g h i j k l m n o
p q r s t u v w x y z { | } ~ 
</pre>

Text Wrapper

HTML

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

Unordered

This is a list item in an unordered list
An unordered list is a list in which the sequence of items is not important. Sometimes, an unordered list is a bulleted list. And this is a long list item in an unordered list that can wrap onto a new line.
Lists can be nested inside of each other
- This is a nested list item
- This is another nested list item in an unordered list
This is the last list item

HTML

									
										<ul>
	<li>This is a list item in an unordered list</li>
	<li>An unordered list is a list in which the sequence of items is not important. Sometimes, an unordered list is a bulleted list. And this is a long list item in an unordered list that can wrap onto a new line. </li>
	<li>
		Lists can be nested inside of each other
		<ul>
			<li>This is a nested list item</li>
			<li>This is another nested list item in an unordered list</li>
		</ul>
	</li>
	<li>This is the last list item</li>
</ul>

Ordered

This is a list item in an ordered list
An ordered list is a list in which the sequence of items is important. An ordered list does not necessarily contain sequence characters.
Lists can be nested inside of each other
1. This is a nested list item
2. This is another nested list item in an ordered list
This is the last list item

HTML

									
										<ol>
	<li>This is a list item in an ordered list</li>
	<li>An ordered list is a list in which the sequence of items is important. An ordered list does not necessarily contain sequence characters.</li>
	<li>
		Lists can be nested inside of each other
		<ol>
			<li>This is a nested list item</li>
			<li>This is another nested list item in an ordered list</li>
		</ol>
	</li>
	<li>This is the last list item</li>
</ol>

Logo

HTML

									
										<a class="logo" href="../../patterns/04-pages-00-homepage/04-pages-00-homepage.html">
  <svg class="logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 65 52">
    <title>Title</title>
    <desc>Description</desc>
    <path d="M38.9,0.2h25.7v3.6H38.9V0.2z"/>
    <path d="M12.6,34.5H9v-1.3c-1,1-2.2,1.5-3.6,1.5c-1.4,0-2.6-0.4-3.5-1.3
        c-1-1-1.5-2.4-1.5-4.1V20h3.7v8.8c0,0.9,0.3,1.6,0.8,2.1c0.4,0.4,1,0.6,1.6,0.6c0.7,0,1.2-0.2,1.6-0.6c0.5-0.5,0.8-1.1,0.8-2.1V20
        h3.7V34.5"/>
    <path d="M28.2,34.5h-3.7v-8.8c0-0.9-0.3-1.6-0.8-2.1c-0.4-0.4-1-0.6-1.6-0.6
        c-0.7,0-1.2,0.2-1.6,0.6c-0.5,0.5-0.8,1.2-0.8,2.1v8.8H16V20h3.6v1.3c1-1,2.2-1.5,3.7-1.5c1.4,0,2.6,0.4,3.5,1.3
        c1,1,1.5,2.4,1.5,4.1V34.5"/>
    <path d="M31.7,14.6h3.7v2.9h-3.7V14.6z M31.7,20h3.7v14.5h-3.7V20z"/>
    <path d="M51.2,27.2c0,1.5-0.1,2.6-0.2,3.3c-0.2,1.2-0.6,2.1-1.3,2.8
        c-0.9,0.9-2.1,1.3-3.6,1.3c-1.5,0-2.7-0.5-3.6-1.5v1.4h-3.5V14.7h3.7v6.6c0.9-1,2-1.4,3.5-1.4c1.5,0,2.7,0.4,3.5,1.3
        c0.7,0.6,1.1,1.6,1.3,2.8C51.1,24.7,51.2,25.8,51.2,27.2 M47.5,27.2c0-1.3-0.1-2.2-0.3-2.8c-0.4-0.9-1.1-1.4-2.1-1.4
        c-1.1,0-1.8,0.5-2.1,1.4c-0.2,0.6-0.3,1.5-0.3,2.8c0,1.3,0.1,2.2,0.3,2.8c0.4,0.9,1.1,1.4,2.1,1.4c1.1,0,1.8-0.5,2.1-1.4
        C47.4,29.4,47.5,28.5,47.5,27.2"/>
    <path d="M64.6,34.5H53.5v-2.7l6.5-8.5h-6.1V20h10.8v2.8L58,31.3h6.6V34.5"/>
    <path d="M38.9,47.4h25.7V51H38.9V47.4z"/>
  </svg>
</a>

Image 4x3

HTML

									
										<img class="" src="../../images/fpo_4x3.png" alt="" />

Image 16x9

HTML

									
										<img class="" src="../../images/fpo_16x9.png" alt="" />

Image 1x1

HTML

									
										<img class="" src="../../images/fpo_square.png" alt="" />

Image 2x3

HTML

									
										<img class="" src="../../images/fpo_portrait.png" alt="" />

Avatar

HTML

									
										<img class="" src="../../images/fpo_avatar.png" alt="" />

Favicon

HTML

									
										<img src="../../images/favicon.png" />

Forms Label

Lorem

HTML

									
										<label for="">Lorem</label>

Forms Input Text

HTML

									
										<input class="form_input" type="text" placeholder="Lorem">

Forms Input Text Error

HTML

									
										<input class="form_input form_input-error" type="text" placeholder="Lorem">

Forms Input Password

HTML

									
										<input class="form_input" type="password" placeholder="Lorem">

Forms Input Email

HTML

									
										<input class="form_input " type="email" placeholder="Lorem">

Forms Input Url

HTML

									
										<input class="form_input" type="url" placeholder="Lorem">

Forms Input Search

HTML

									
										<input class="form_input" type="search" placeholder="Lorem">

Forms Input Number

HTML

									
										<input class="form_input" type="number" placeholder="Lorem" pattern="[0-9]*">

Forms Checkbox

Choice A

HTML

									
										<label><input id="checkbox1" name="checkbox" type="checkbox" checked="checked"> Choice A</label>

Forms Radio Buttons

Option 1

HTML

									
										<label for="radio1"><input id="radio1" name="radio" type="radio" class="radio" checked="checked"> Option 1</label>

Forms Select Menu

HTML

									
										<select>
  <optgroup label="Option Group">
    <option>Option One</option>
    <option>Option Two</option>
    <option>Option Three</option>
  </optgroup>
</select>

Forms Input Textarea

HTML

									
										<textarea class="form_input" rows="8" cols="48" placeholder="Lorem"></textarea>

Forms Input Number

HTML

									
										<input class="form_input" type="number" min="1" max="99" value="1">

Forms Input Date

HTML

									
										<input class="form_input" type="date" value="1970-01-01">

Forms Input Range

HTML

									
										<input type="range" value="10">

Forms Input Week

HTML

									
										<input class="form_input" type="week" value="1970-W01">

Forms Input Month

HTML

									
										<input class="form_input" type="month" value="1970-01">

Forms Input Datetime

HTML

									
										<input class="form_input" type="datetime" value="1970-01-01T00:00:00Z">

Forms Input Datetime Local

HTML

									
										<input class="form_input" type="datetime-local" value="1970-01-01T00:00">

Button Small

Lorem ipsum

HTML

									
										<a href="#" class="btn btn-small ">Lorem ipsum</a>

Button Dark

Lorem ipsum

HTML

									
										<a href="#" class="btn btn-dark ">Lorem ipsum</a>

Button

Lorem ipsum

HTML

									
										<a href="#" class="btn ">Lorem ipsum</a>

Button Big

Lorem ipsum

HTML

									
										<a href="#" class="btn btn-big ">Lorem ipsum</a>

Button Alternate Small

Lorem ipsum

HTML

									
										<a href="#" class="btn btn-small btn-alt ">Lorem ipsum</a>

Button Alternate

Lorem ipsum

HTML

									
										<a href="#" class="btn btn-alt ">Lorem ipsum</a>

Button Alternate Big

Lorem ipsum

HTML

									
										<a href="#" class="btn btn-big btn-alt ">Lorem ipsum</a>

Button Disabled Small

Lorem ipsum

HTML

									
										<a href="#" class="btn btn-small btn-disabled ">Lorem ipsum</a>

Button Disabled

Lorem ipsum

HTML

									
										<a href="#" class="btn btn-disabled ">Lorem ipsum</a></p>

Button Disabled Big

Lorem ipsum

HTML

									
										<p><a href="#" class="btn btn-big btn-disabled ">Lorem ipsum</a>

Button Text

Lorem ipsum

HTML

									
										<a href="#" class="btn-text ">Lorem ipsum</a>

Button Text Alternate

Lorem ipsum

HTML

									
										<a href="#" class="btn-text btn-text-alt ">Lorem ipsum</a>

Button Text Primary

Lorem ipsum

HTML

									
										<a href="#" class="btn-text btn-text-primary ">Lorem ipsum</a>

Button Text Small

Lorem ipsum

HTML

									
										<a href="#" class="btn-text btn-text-small ">Lorem ipsum</a>

Button Filter

(Lorem) ✕

HTML

									
										<a href="#" class="btn btn-filter ">
  <span class="btn-filter_label">Lorem ipsum</span>
  <span class="btn-filter_counter">(Lorem)</span>
  <span class="btn-filter_close">✕</span>
</a>

Button Toggle Label

Lorem ipsum

HTML

									
										<a class="btn-toggle-label " href="#">
  <span class="btn-toggle-label_label">Lorem ipsum</span>
  <i class="i i-calendar"></i>
</a>

Button Toggle

HTML

									
										<a class="btn-toggle " href="#"><i class="i i-calendar"></i></a>

Button Medium

Lorem ipsum

HTML

									
										<a href="#" class="btn btn-medium ">Lorem ipsum</a>

Button Round

HTML

									
										<a href="#" class="btn-round "><i class="i i-calendar"></i></a>

Button Text Small Primary

Lorem ipsum

HTML

									
										<a href="#" class="btn-text btn-text-small btn-text-primary ">Lorem ipsum</a>

Maps

HTML

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

Address

Free University of Bozen-Bolzano

Universitätsplatz 1 - piazza Università, 1

39100, Bozen Bolzano (BZ)

Italy

+39 0471 011000

+39 0471 011009

administration@unibz.it

info@unibz.it

PEC: administration@pec.unibz.it

HTML

									
										<div class="vcard">
	<div class="org">Free University of Bozen-Bolzano</div>
	<div class="adr">
		<div class="street-address">Universitätsplatz 1 - piazza Università, 1</div>
    <span class="postal-code">39100</span>,
		<span class="locality">Bozen Bolzano</span>
		<abbr class="province" title="Bolzano">(BZ)</abbr>
		<div class="country-name">Italy</div>
	</div>
	<div class="tel">+39 0471 011000</div>
  <div class="fax">+39 0471 011009</div>
  <div class="vcard_contact">
    <a class="vcard_link" href="mailto:administration@unibz.it">administration@unibz.it</a>
  </div>
  <div class="vcard_contact">
    <a class="vcard_link" href="mailto:info@unibz.it">info@unibz.it</a>
  </div>
  <div class="vcard_contact">
    PEC: <a class="vcard_link" href="mailto:administration@pec.unibz.it">administration@pec.unibz.it</a>
  </div>
</div>

Post Header

Lorem

Lorem ipsum dolor sit (37 characters)

Lorem Lorem 24 June 2015

This pattern contains: atoms-text-span atoms-heading-1 atoms-text-date

HTML

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

Blockquote With Citation

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

HTML

									
										<blockquote>
  <p>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>
	<cite>Lorem</cite>
</blockquote>

Grid System

HTML

									
										<div class="demo">
  <div class="g-row">
    <div class="g g-24"></div>
  </div>
  <div class="g-row">
    <div class="g g-1"></div>
    <div class="g g-23"></div>
  </div>
  <div class="g-row">
    <div class="g g-2"></div>
    <div class="g g-22"></div>
  </div>
  <div class="g-row">
    <div class="g g-3"></div>
    <div class="g g-21"></div>
  </div>
  <div class="g-row">
    <div class="g g-4"></div>
    <div class="g g-20"></div>
  </div>
  <div class="g-row">
    <div class="g g-5"></div>
    <div class="g g-19"></div>
  </div>
  <div class="g-row">
    <div class="g g-6"></div>
    <div class="g g-18"></div>
  </div>
  <div class="g-row">
    <div class="g g-7"></div>
    <div class="g g-17"></div>
  </div>
  <div class="g-row">
    <div class="g g-8"></div>
    <div class="g g-16"></div>
  </div>
  <div class="g-row">
    <div class="g g-9"></div>
    <div class="g g-15"></div>
  </div>
  <div class="g-row">
    <div class="g g-10"></div>
    <div class="g g-14"></div>
  </div>
  <div class="g-row">
    <div class="g g-11"></div>
    <div class="g g-13"></div>
  </div>
  <div class="g-row">
    <div class="g g-12"></div>
    <div class="g g-12"></div>
  </div>
  <div class="g-row">
    <div class="g g-23"></div>
    <div class="g g-1"></div>
  </div>
  <div class="g-row">
    <div class="g g-22"></div>
    <div class="g g-2"></div>
  </div>
  <div class="g-row">
    <div class="g g-21"></div>
    <div class="g g-3"></div>
  </div>
  <div class="g-row">
    <div class="g g-20"></div>
    <div class="g g-4"></div>
  </div>
  <div class="g-row">
    <div class="g g-19"></div>
    <div class="g g-5"></div>
  </div>
  <div class="g-row">
    <div class="g g-18"></div>
    <div class="g g-6"></div>
  </div>
  <div class="g-row">
    <div class="g g-17"></div>
    <div class="g g-7"></div>
  </div>
  <div class="g-row">
    <div class="g g-16"></div>
    <div class="g g-8"></div>
  </div>
  <div class="g-row">
    <div class="g g-15"></div>
    <div class="g g-9"></div>
  </div>
  <div class="g-row">
    <div class="g g-14"></div>
    <div class="g g-10"></div>
  </div>
  <div class="g-row">
    <div class="g g-13"></div>
    <div class="g g-11"></div>
  </div>
</demo>

Media Block

Lorem ipsum dolor sit (37 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>    <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>

Block Highlight

Lorem ipsum dolor sit (37 characters)

Lorem ipsum

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

Block Glance

Lorem ipsum dolor sit (37 characters)

This pattern contains: atoms-text-wrapper

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

Block Post

24 June 2015 Lorem

Lorem ipsum dolor sit (37 characters)

This pattern contains: atoms-text-date atoms-image-4x3 atoms-heading-4 atoms-text-paragraph

HTML

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

Block Event

24 June 2015 9:21 Lorem

Lorem ipsum dolor sit (37 characters)

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

HTML

									
										<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>        <span class="event_location">Lorem</span>    </div>
    <a href="#">
        <h2 class="event_title">Lorem ipsum dolor sit (37 characters)</h2>        <h4 class="event_subtitle">Lorem ipsum dolor sit (37 characters)</h4>    </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

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">
      <span class="tt_itemTime">9:21</span>        <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 class="u-blk" href="#">
      <h5 class="job_title">Lorem ipsum dolor sit (37 characters)</h5>    </a>
  </div>
</div>

Block Tender

Lorem ipsum dolor sit (37 characters)

Lorem ipsum

This pattern contains: atoms-text-span atoms-heading-5 atoms-text-paragraph atoms-button-text-small

HTML

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

Block Person

Lorem ipsum dolor sit (37 characters)

Lorem Lorem

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

HTML

									
										<div class=" person">
    <div class="person_imageWrapper">
      <img class="person_image" src="../../images/fpo_avatar.png" alt="" />    </div> 
  <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>

Block Title

Lorem

Lorem ipsum dolor sit (37 characters)

Lorem ipsum

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

HTML

									
										<div class="blockTitle">
    <span class="blockTitle_meta">Lorem</span>  <a class="u-blk" href="#">
    <h3 class="blockTitle_title">Lorem ipsum dolor sit (37 characters)</h3>  </a>
    <a href="#" class="btn-text btn-text-small blockTitle_btn">Lorem ipsum</a></div>

Block Research

Lorem ipsum dolor sit (37 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>

Block Text

Lorem ipsum dolor sit (37 characters)

Lorem ipsum

This pattern contains: atoms-image-4x3 atoms-text-paragraph atoms-button-text-primary

HTML

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

Block Typography

This pattern contains: atoms-text-wrapper

HTML

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

Figure

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

HTML

									
										<figure>
	<img class="" src="../../images/fpo_4x3.png" alt="" />    <figcaption>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)</figcaption>
</figure>

Embed

HTML

									
										<figure>
  <div class="embed embed-16-9">
	  <iframe width="560" height="315" src="https://www.youtube.com/embed/bDUDuQy3R7Y" frameborder="0" allowfullscreen></iframe>
  </div>
    <figcaption>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)</figcaption>
</figure>

Video

HTML

									
										<figure>
  <video controls>
	  <source src="http://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
    Your browser does not support the video tag.
  </video>
    <figcaption>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)</figcaption>
</figure>

Nav

HTML

									
										  <nav class="js-nav" data-nav-level="1">
  	<ul class="nav_wrap">
    		<li>
          <a class="js-nav_item nav_item" href="#" data-toggle-elem="#nav-university">University</a>
        </li>
    		<li>
          <a class="js-nav_item nav_item" href="#" data-toggle-elem="#nav-faculties">Faculties</a>
        </li>
    		<li>
          <a class="js-nav_item nav_item" href="#" data-toggle-elem="#nav-study-courses">Study Programmes</a>
        </li>
  	</ul>
  </nav>

Nav Study Course

HTML

									
										  <nav id="nav-study-courses" class="js-nav navSecondary" data-nav-level="2">
  	<ul class="nav_wrap">
    		<li>
          <a class="js-nav_item nav_item" href="#" data-toggle-elem="#nav-bachelor">Bachelor</a>
        </li>
    		<li>
          <a class="js-nav_item nav_item" href="#" data-toggle-elem="#nav-master">Master</a>
        </li>
    		<li>
          <a class="js-nav_item nav_item" href="#" data-toggle-elem="#nav-phd">PhD</a>
        </li>
    		<li>
          <a class="js-nav_item nav_item" href="#" data-toggle-elem="#nav-lifelong">Lifelong Learning</a>
        </li>
  	</ul>
  </nav>

Nav Links Languages

HTML

									
										  <nav id="nav-languages" class="js-nav navLinks" data-nav-level="2">
    <ul class="nav_wrap navLinks_wrap">
        <li class="navLinks_item">
          <a class="js-nav-item" href="#">Italiano</a>
        </li>
        <li class="navLinks_item">
          <a class="js-nav-item" href="#">Deutsch</a>
        </li>
        <li class="navLinks_item">
          <a class="js-nav-item" href="#">English</a>
        </li>
    </ul>
  </nav>

Nav Links Services

HTML

									
										  <nav id="nav-services" class="js-nav navLinks" data-nav-level="2">
    <ul class="nav_wrap navLinks_wrap">
        <li class="navLinks_item">
          <a class="js-nav-item" href="#">Advisory Service</a>
        </li>
        <li class="navLinks_item">
          <a class="js-nav-item" href="#">Library</a>
        </li>
        <li class="navLinks_item">
          <a class="js-nav-item" href="#">ICT-Services</a>
        </li>
        <li class="navLinks_item">
          <a class="js-nav-item" href="#">Services for Students</a>
        </li>
        <li class="navLinks_item">
          <a class="js-nav-item" href="#">Press</a>
        </li>
        <li class="navLinks_item">
          <a class="js-nav-item" href="#">Event Management and Lecture Halls</a>
        </li>
        <li class="navLinks_item">
          <a class="js-nav-item" href="#">Language Centre</a>
        </li>
        <li class="navLinks_item">
          <a class="js-nav-item" href="#">Recognition of foreign qualifications</a>
        </li>
    </ul>
  </nav>

Nav Links University

HTML

									
										  <nav id="nav-university" class="js-nav navLinks" data-nav-level="2">
    <ul class="nav_wrap navLinks_wrap">
        <li class="navLinks_item">
          <a class="js-nav-item" href="#">Profile</a>
        </li>
        <li class="navLinks_item">
          <a class="js-nav-item" href="#">Organisation</a>
        </li>
        <li class="navLinks_item">
          <a class="js-nav-item" href="#">Cooperation</a>
        </li>
        <li class="navLinks_item">
          <a class="js-nav-item" href="#">Jobs</a>
        </li>
        <li class="navLinks_item">
          <a class="js-nav-item" href="#">Calls</a>
        </li>
        <li class="navLinks_item">
          <a class="js-nav-item" href="#">Press</a>
        </li>
    </ul>
  </nav>

Nav Links Faculty

HTML

									
										  <nav id="nav-faculties" class="js-nav navLinks" data-nav-level="2">
    <ul class="nav_wrap navLinks_wrap">
        <li class="navLinks_item">
          <a class="js-nav-item" href="#">Computer Science</a>
        </li>
        <li class="navLinks_item">
          <a class="js-nav-item" href="#">Economics and Management</a>
        </li>
        <li class="navLinks_item">
          <a class="js-nav-item" href="#">Education</a>
        </li>
        <li class="navLinks_item">
          <a class="js-nav-item" href="#">Design and Art</a>
        </li>
        <li class="navLinks_item">
          <a class="js-nav-item" href="#">Science and Technology</a>
        </li>
    </ul>
  </nav>

Nav Grid Bachelor

HTML

									
										  <nav id="nav-bachelor" class="js-nav navGrid" data-nav-level="3">
    <ul class="nav_wrap navGrid_wrap">
        <li class="navGrid_item">
          <span class="gridItem_label">econ</span>
          <div class="gridItem_name">
            <a href="#">Economics and Management</a>
          </div>
        </li>
        <li class="navGrid_item">
          <span class="gridItem_label">econ</span>
          <div class="gridItem_name">
            <a href="#">Economics and Social Sciences</a>
          </div>
        </li>
        <li class="navGrid_item">
          <span class="gridItem_label">econ</span>
          <div class="gridItem_name">
            <a href="#">Tourism, Sport and Event Management</a>
          </div>
        </li>
        <li class="navGrid_item">
          <span class="gridItem_label">comp</span>
          <div class="gridItem_name">
            <a href="#">Computer Science and Engineering</a>
          </div>
        </li>
        <li class="navGrid_item">
          <span class="gridItem_label">tech</span>
          <div class="gridItem_name">
            <a href="#">Agricultural and Agro-Environmental Sciences</a>
          </div>
        </li>
        <li class="navGrid_item">
          <span class="gridItem_label">tech</span>
          <div class="gridItem_name">
            <a href="#">Industrial and Mechanical Engineering</a>
          </div>
        </li>
        <li class="navGrid_item">
          <span class="gridItem_label">edu</span>
          <div class="gridItem_name">
            <a href="#">Communication Sciences and Culture</a>
          </div>
        </li>
        <li class="navGrid_item">
          <span class="gridItem_label">edu</span>
          <div class="gridItem_name">
            <a href="#">Social Education</a>
          </div>
        </li>
        <li class="navGrid_item">
          <span class="gridItem_label">edu</span>
          <div class="gridItem_name">
            <a href="#">Social Work</a>
          </div>
        </li>
        <li class="navGrid_item">
          <span class="gridItem_label">dsgn</span>
          <div class="gridItem_name">
            <a href="#">Design and Art</a>
          </div>
        </li>
      <li class="navGrid_item"></li>
    </ul>
  </nav>

Nav Grid Master

HTML

									
										  <nav id="nav-master" class="js-nav navGrid" data-nav-level="3">
    <ul class="nav_wrap navGrid_wrap">
        <li class="navGrid_item">
          <span class="gridItem_label">econ</span>
          <div class="gridItem_name">
            <a href="#">Economics and Management of the Public Sector</a>
          </div>
        </li>
        <li class="navGrid_item">
          <span class="gridItem_label">econ</span>
          <div class="gridItem_name">
            <a href="#">Economics and Social Sciences</a>
          </div>
        </li>
        <li class="navGrid_item">
          <span class="gridItem_label">econ</span>
          <div class="gridItem_name">
            <a href="#">Tourism, Sport and Event Management</a>
          </div>
        </li>
        <li class="navGrid_item">
          <span class="gridItem_label">comp</span>
          <div class="gridItem_name">
            <a href="#">Computer Science and Engineering</a>
          </div>
        </li>
        <li class="navGrid_item">
          <span class="gridItem_label">tech</span>
          <div class="gridItem_name">
            <a href="#">Agricultural and Agro-Environmental Sciences</a>
          </div>
        </li>
        <li class="navGrid_item">
          <span class="gridItem_label">tech</span>
          <div class="gridItem_name">
            <a href="#">Environmental Management of Mountain Areas</a>
          </div>
        </li>
        <li class="navGrid_item">
          <span class="gridItem_label">tech</span>
          <div class="gridItem_name">
            <a href="#">Energy Engineering</a>
          </div>
        </li>
        <li class="navGrid_item">
          <span class="gridItem_label">tech</span>
          <div class="gridItem_name">
            <a href="#">International Horticultural Science</a>
          </div>
        </li>
        <li class="navGrid_item">
          <span class="gridItem_label">edu</span>
          <div class="gridItem_name">
            <a href="#">Primary Education (One Cycle – 5 years)</a>
          </div>
        </li>
        <li class="navGrid_item">
          <span class="gridItem_label">dsgn</span>
          <div class="gridItem_name">
            <a href="#">Eco-Social Design (Glocal Design)</a>
          </div>
        </li>
      <li class="navGrid_item"></li>
    </ul>
  </nav>

Nav Grid Phd

HTML

									
										  <nav id="nav-phd" class="js-nav navGrid" data-nav-level="3">
    <ul class="nav_wrap navGrid_wrap">
        <li class="navGrid_item">
          <span class="gridItem_label">comp</span>
          <div class="gridItem_name">
            <a href="#">Computer Science</a>
          </div>
        </li>
        <li class="navGrid_item">
          <span class="gridItem_label">tech</span>
          <div class="gridItem_name">
            <a href="#">Mountain Environment and Agriculture</a>
          </div>
        </li>
        <li class="navGrid_item">
          <span class="gridItem_label">tech</span>
          <div class="gridItem_name">
            <a href="#">Sustainable Energy and Technologies</a>
          </div>
        </li>
        <li class="navGrid_item">
          <span class="gridItem_label">eco</span>
          <div class="gridItem_name">
            <a href="#">Management and Economics on Organizational and Institutional Outliers</a>
          </div>
        </li>
        <li class="navGrid_item">
          <span class="gridItem_label">edu</span>
          <div class="gridItem_name">
            <a href="#">General Pedagogy, Social Pedagogy and General Education</a>
          </div>
        </li>
      <li class="navGrid_item"></li>
    </ul>
  </nav>

Nav Grid Lifelong

HTML

									
										  <nav id="nav-lifelong" class="js-nav navGrid" data-nav-level="3">
    <ul class="nav_wrap navGrid_wrap">
        <li class="navGrid_item">
          <span class="gridItem_label">Lorem</span>
          <div class="gridItem_name">
            <a href="#">Lorem ipsum</a>
          </div>
        </li>
      <li class="navGrid_item"></li>
    </ul>
  </nav>

Nav Mobile

HTML

									
										<nav class="navMobile">
	<ul class="navMobile_list">
  		<li>
        <a class="navMobile_item" href="#">University</a>
            <ul class="navMobile_second">
                <li><a class="navMobile_link" href="#">Profile</a></li>
                <li><a class="navMobile_link" href="#">Organisation</a></li>
                <li><a class="navMobile_link" href="#">Cooperation</a></li>
                <li><a class="navMobile_link" href="#">Jobs</a></li>
                <li><a class="navMobile_link" href="#">Calls</a></li>
                <li><a class="navMobile_link" href="#">Press</a></li>
            </ul>


      </li>
  		<li>
        <a class="navMobile_item" href="#">Faculties</a>


            <ul class="navMobile_second">
                <li><a class="navMobile_link" href="#">Computer Science</a></li>
                <li><a class="navMobile_link" href="#">Economics and Management</a></li>
                <li><a class="navMobile_link" href="#">Education</a></li>
                <li><a class="navMobile_link" href="#">Design and Art</a></li>
                <li><a class="navMobile_link" href="#">Science and Technology</a></li>
            </ul>
      </li>
  		<li>
        <a class="navMobile_item" href="#">Study Programmes</a>

            <ul class="navMobile_second">
                <li>
                  <a class="navMobile_item" href="#">Bachelor</a>
                      <ul class="navMobile_third">
                          <li class="navMobile_link">
                            <span class="navMobile_label">econ</span>
                            <a href="#">Economics and Management</a>
                          </li>
                          <li class="navMobile_link">
                            <span class="navMobile_label">econ</span>
                            <a href="#">Economics and Social Sciences</a>
                          </li>
                          <li class="navMobile_link">
                            <span class="navMobile_label">econ</span>
                            <a href="#">Tourism, Sport and Event Management</a>
                          </li>
                          <li class="navMobile_link">
                            <span class="navMobile_label">comp</span>
                            <a href="#">Computer Science and Engineering</a>
                          </li>
                          <li class="navMobile_link">
                            <span class="navMobile_label">tech</span>
                            <a href="#">Agricultural and Agro-Environmental Sciences</a>
                          </li>
                          <li class="navMobile_link">
                            <span class="navMobile_label">tech</span>
                            <a href="#">Industrial and Mechanical Engineering</a>
                          </li>
                          <li class="navMobile_link">
                            <span class="navMobile_label">edu</span>
                            <a href="#">Communication Sciences and Culture</a>
                          </li>
                          <li class="navMobile_link">
                            <span class="navMobile_label">edu</span>
                            <a href="#">Social Education</a>
                          </li>
                          <li class="navMobile_link">
                            <span class="navMobile_label">edu</span>
                            <a href="#">Social Work</a>
                          </li>
                          <li class="navMobile_link">
                            <span class="navMobile_label">dsgn</span>
                            <a href="#">Design and Art</a>
                          </li>
                      </ul>



                </li>
                <li>
                  <a class="navMobile_item" href="#">Master</a>

                      <ul class="navMobile_third">
                          <li class="navMobile_link">
                            <span class="navMobile_label">econ</span>
                            <a href="#">Economics and Management of the Public Sector</a>
                          </li>
                          <li class="navMobile_link">
                            <span class="navMobile_label">econ</span>
                            <a href="#">Economics and Social Sciences</a>
                          </li>
                          <li class="navMobile_link">
                            <span class="navMobile_label">econ</span>
                            <a href="#">Tourism, Sport and Event Management</a>
                          </li>
                          <li class="navMobile_link">
                            <span class="navMobile_label">comp</span>
                            <a href="#">Computer Science and Engineering</a>
                          </li>
                          <li class="navMobile_link">
                            <span class="navMobile_label">tech</span>
                            <a href="#">Agricultural and Agro-Environmental Sciences</a>
                          </li>
                          <li class="navMobile_link">
                            <span class="navMobile_label">tech</span>
                            <a href="#">Environmental Management of Mountain Areas</a>
                          </li>
                          <li class="navMobile_link">
                            <span class="navMobile_label">tech</span>
                            <a href="#">Energy Engineering</a>
                          </li>
                          <li class="navMobile_link">
                            <span class="navMobile_label">tech</span>
                            <a href="#">International Horticultural Science</a>
                          </li>
                          <li class="navMobile_link">
                            <span class="navMobile_label">edu</span>
                            <a href="#">Primary Education (One Cycle – 5 years)</a>
                          </li>
                          <li class="navMobile_link">
                            <span class="navMobile_label">dsgn</span>
                            <a href="#">Eco-Social Design (Glocal Design)</a>
                          </li>
                      </ul>


                </li>
                <li>
                  <a class="navMobile_item" href="#">PhD</a>


                      <ul class="navMobile_third">
                          <li class="navMobile_link">
                            <span class="navMobile_label">comp</span>
                            <a href="#">Computer Science</a>
                          </li>
                          <li class="navMobile_link">
                            <span class="navMobile_label">tech</span>
                            <a href="#">Mountain Environment and Agriculture</a>
                          </li>
                          <li class="navMobile_link">
                            <span class="navMobile_label">tech</span>
                            <a href="#">Sustainable Energy and Technologies</a>
                          </li>
                          <li class="navMobile_link">
                            <span class="navMobile_label">eco</span>
                            <a href="#">Management and Economics on Organizational and Institutional Outliers</a>
                          </li>
                          <li class="navMobile_link">
                            <span class="navMobile_label">edu</span>
                            <a href="#">General Pedagogy, Social Pedagogy and General Education</a>
                          </li>
                      </ul>

                </li>
                <li>
                  <a class="navMobile_item" href="#">Lifelong Learning</a>



                      <ul class="navMobile_third">
                          <li class="navMobile_link">
                            <span class="navMobile_label">Lorem</span>
                            <a href="#">Lorem ipsum</a>
                          </li>
                      </ul>
                </li>
            </ul>

      </li>
    <li>
      <a class="navMobile_item" href="#">Services</a>
    </li>
	</ul>
</nav>

Nav Pagination

1 2 3 4 5 6 7 8 9 10

This pattern contains: atoms-button-round

HTML

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

Social Share

HTML

									
										<div class="share">
	<a class="socialItem socialItem-facebook" href="#"><i class="i i-facebook"></i></a>
	<a class="socialItem socialItem-twitter" href="#"><i class="i i-twitter"></i></a>
  <a class="socialItem socialItem-linkedin" href="#"><i class="i i-linkedin"></i></a>
  <a class="socialItem socialItem-mail" href="#"><i class="i i-mail"></i></a>
  <a class="socialItem socialItem-print" href="#"><i class="i i-print"></i></a>
</div>

Social Links

HTML

									
										<div class="social">
	<a class="socialItem socialItem-facebook" href="#"><i class="i i-facebook"></i></a>
	<a class="socialItem socialItem-twitter" href="#"><i class="i i-twitter"></i></a>
  <a class="socialItem socialItem-instagram" href="#"><i class="i i-instagram"></i></a>
  <a class="socialItem socialItem-linkedin" href="#"><i class="i i-linkedin"></i></a>
</div>

Social Links White

HTML

									
										<div class="social">
	<a class="socialItem" href="#"><i class="i i-facebook-brand"></i></a>
	<a class="socialItem" href="#"><i class="i i-twitter-brand"></i></a>
  <a class="socialItem" href="#"><i class="i i-instagram-brand"></i></a>
  <a class="socialItem" href="#"><i class="i i-linkedin-brand"></i></a>
</div>

Form Search

This pattern contains: atoms-forms-input-search

HTML

									
										<form class="form " role="search">
  <input class="form_input" type="search" placeholder="Lorem">  <a class="form_inputSearchButton" href="#"><i class="i i-search-gray"></i></a>
</form>

Search

HTML

									
										<form class="search" role="search">
  <input class="search_input" type="search" placeholder="Lorem">
  <a class="search_button" href="#"><i class="i i-search-gray"></i></a>
</form>

Filters

(Lorem) ✕ (Lorem) ✕ (Lorem) ✕ (Lorem) ✕ (Lorem) ✕

This pattern contains: atoms-button-filter

HTML

									
										  <a href="#" class="btn btn-filter filter_button">
    <span class="btn-filter_label">ECO</span>
    <span class="btn-filter_counter">(Lorem)</span>
    <span class="btn-filter_close">✕</span>
  </a>  <a href="#" class="btn btn-filter filter_button btn-outline-active">
    <span class="btn-filter_label">COMP</span>
    <span class="btn-filter_counter">(Lorem)</span>
    <span class="btn-filter_close">✕</span>
  </a>  <a href="#" class="btn btn-filter filter_button">
    <span class="btn-filter_label">TECH</span>
    <span class="btn-filter_counter">(Lorem)</span>
    <span class="btn-filter_close">✕</span>
  </a>  <a href="#" class="btn btn-filter filter_button">
    <span class="btn-filter_label">EDU</span>
    <span class="btn-filter_counter">(Lorem)</span>
    <span class="btn-filter_close">✕</span>
  </a>  <a href="#" class="btn btn-filter filter_button">
    <span class="btn-filter_label">DSGN</span>
    <span class="btn-filter_counter">(Lorem)</span>
    <span class="btn-filter_close">✕</span>
  </a>

Find Tools

This pattern contains: atoms-button-toggle atoms-forms-input-search

HTML

									
										<div class="find_tools">
    <a class="btn-toggle find_toolToggle find_toolToggle-search" href="#"><i class="i i-search"></i></a>    <input class="form_input" type="search" placeholder="Lorem">    <a class="btn-toggle find_toolToggle" href="#"><i class="i i-filter"></i></a>    <a class="btn-toggle find_toolToggle" href="#"><i class="i i-calendar"></i></a></div>

Calendar Days

Mon 2 OCT

Tue 3 OCT

Wed 4 OCT

Thu 5 OCT

Fri 6 OCT

Sat 7 OCT

Sun 8 OCT

Mon 9 OCT

Tue 10 OCT

Wed 11 OCT

Thu 12 OCT

Fri 13 OCT

Sat 14 OCT

Sun 15 OCT

Mon 16 OCT

Tue 17 OCT

Wed 18 OCT

Thu 19 OCT

Fri 20 OCT

Sat 21 OCT

Sun 22 OCT

Mon 23 OCT

Tue 24 OCT

Wed 25 OCT

Thu 26 OCT

Fri 27 OCT

Sat 28 OCT

Sun 29 OCT

Mon 30 OCT

Tue 31 OCT

Wed 1 NOV

Thu 2 NOV

This pattern contains: atoms-button-round

HTML

									
										<div class="calendarDays">
  <div class="cd_navBtnWrapper cd_navBtnWrapper-lft">
    <a href="#" class="btn-round cd_navBtn"><i class="i i-arrow-left"></i></a>  </div>
  <div class="cd_navDays">
    <div class="cd_navDay">
      <span class="cd_navDayName">Mon</span>
      <span class="cd_navDayNum">2</span>
      <span class="cd_navDayMonth">OCT</span>
    </div>
    <div class="cd_navDay">
      <span class="cd_navDayName">Tue</span>
      <span class="cd_navDayNum">3</span>
      <span class="cd_navDayMonth">OCT</span>
    </div>
    <div class="cd_navDay">
      <span class="cd_navDayName">Wed</span>
      <span class="cd_navDayNum">4</span>
      <span class="cd_navDayMonth">OCT</span>
    </div>
    <div class="cd_navDay cd_navDay-current">
      <span class="cd_navDayName">Thu</span>
      <span class="cd_navDayNum">5</span>
      <span class="cd_navDayMonth">OCT</span>
    </div>
    <div class="cd_navDay">
      <span class="cd_navDayName">Fri</span>
      <span class="cd_navDayNum">6</span>
      <span class="cd_navDayMonth">OCT</span>
    </div>
    <div class="cd_navDay">
      <span class="cd_navDayName">Sat</span>
      <span class="cd_navDayNum">7</span>
      <span class="cd_navDayMonth">OCT</span>
    </div>
    <div class="cd_navDay">
      <span class="cd_navDayName">Sun</span>
      <span class="cd_navDayNum">8</span>
      <span class="cd_navDayMonth">OCT</span>
    </div>
    <div class="cd_navDay">
      <span class="cd_navDayName">Mon</span>
      <span class="cd_navDayNum">9</span>
      <span class="cd_navDayMonth">OCT</span>
    </div>
    <div class="cd_navDay">
      <span class="cd_navDayName">Tue</span>
      <span class="cd_navDayNum">10</span>
      <span class="cd_navDayMonth">OCT</span>
    </div>
    <div class="cd_navDay">
      <span class="cd_navDayName">Wed</span>
      <span class="cd_navDayNum">11</span>
      <span class="cd_navDayMonth">OCT</span>
    </div>
    <div class="cd_navDay">
      <span class="cd_navDayName">Thu</span>
      <span class="cd_navDayNum">12</span>
      <span class="cd_navDayMonth">OCT</span>
    </div>
    <div class="cd_navDay">
      <span class="cd_navDayName">Fri</span>
      <span class="cd_navDayNum">13</span>
      <span class="cd_navDayMonth">OCT</span>
    </div>
    <div class="cd_navDay">
      <span class="cd_navDayName">Fri</span>
      <span class="cd_navDayNum">13</span>
      <span class="cd_navDayMonth">OCT</span>
    </div>
    <div class="cd_navDay">
      <span class="cd_navDayName">Sat</span>
      <span class="cd_navDayNum">14</span>
      <span class="cd_navDayMonth">OCT</span>
    </div>
    <div class="cd_navDay">
      <span class="cd_navDayName">Sun</span>
      <span class="cd_navDayNum">15</span>
      <span class="cd_navDayMonth">OCT</span>
    </div>
    <div class="cd_navDay">
      <span class="cd_navDayName">Mon</span>
      <span class="cd_navDayNum">16</span>
      <span class="cd_navDayMonth">OCT</span>
    </div>
    <div class="cd_navDay">
      <span class="cd_navDayName">Tue</span>
      <span class="cd_navDayNum">17</span>
      <span class="cd_navDayMonth">OCT</span>
    </div>
    <div class="cd_navDay">
      <span class="cd_navDayName">Wed</span>
      <span class="cd_navDayNum">18</span>
      <span class="cd_navDayMonth">OCT</span>
    </div>
    <div class="cd_navDay">
      <span class="cd_navDayName">Thu</span>
      <span class="cd_navDayNum">19</span>
      <span class="cd_navDayMonth">OCT</span>
    </div>
    <div class="cd_navDay">
      <span class="cd_navDayName">Fri</span>
      <span class="cd_navDayNum">20</span>
      <span class="cd_navDayMonth">OCT</span>
    </div>
    <div class="cd_navDay">
      <span class="cd_navDayName">Sat</span>
      <span class="cd_navDayNum">21</span>
      <span class="cd_navDayMonth">OCT</span>
    </div>
    <div class="cd_navDay">
      <span class="cd_navDayName">Sun</span>
      <span class="cd_navDayNum">22</span>
      <span class="cd_navDayMonth">OCT</span>
    </div>
    <div class="cd_navDay">
      <span class="cd_navDayName">Mon</span>
      <span class="cd_navDayNum">23</span>
      <span class="cd_navDayMonth">OCT</span>
    </div>
    <div class="cd_navDay">
      <span class="cd_navDayName">Tue</span>
      <span class="cd_navDayNum">24</span>
      <span class="cd_navDayMonth">OCT</span>
    </div>
    <div class="cd_navDay">
      <span class="cd_navDayName">Wed</span>
      <span class="cd_navDayNum">25</span>
      <span class="cd_navDayMonth">OCT</span>
    </div>
    <div class="cd_navDay">
      <span class="cd_navDayName">Thu</span>
      <span class="cd_navDayNum">26</span>
      <span class="cd_navDayMonth">OCT</span>
    </div>
    <div class="cd_navDay">
      <span class="cd_navDayName">Fri</span>
      <span class="cd_navDayNum">27</span>
      <span class="cd_navDayMonth">OCT</span>
    </div>
    <div class="cd_navDay">
      <span class="cd_navDayName">Sat</span>
      <span class="cd_navDayNum">28</span>
      <span class="cd_navDayMonth">OCT</span>
    </div>
    <div class="cd_navDay">
      <span class="cd_navDayName">Sun</span>
      <span class="cd_navDayNum">29</span>
      <span class="cd_navDayMonth">OCT</span>
    </div>
    <div class="cd_navDay">
      <span class="cd_navDayName">Mon</span>
      <span class="cd_navDayNum">30</span>
      <span class="cd_navDayMonth">OCT</span>
    </div>
    <div class="cd_navDay">
      <span class="cd_navDayName">Tue</span>
      <span class="cd_navDayNum">31</span>
      <span class="cd_navDayMonth">OCT</span>
    </div>
    <div class="cd_navDay">
      <span class="cd_navDayName">Wed</span>
      <span class="cd_navDayNum">1</span>
      <span class="cd_navDayMonth">NOV</span>
    </div>
    <div class="cd_navDay">
      <span class="cd_navDayName">Thu</span>
      <span class="cd_navDayNum">2</span>
      <span class="cd_navDayMonth">NOV</span>
    </div>
  </div>
  <div class="cd_navBtnWrapper cd_navBtnWrapper-rgt">
    <a href="#" class="btn-round cd_navBtn"><i class="i i-arrow-right"></i></a>  </div>
</div>

Calendar Month

October 2015

Mon Tue Wed Thu Fri Sat Sun

This pattern contains: atoms-button-round

HTML

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

Accordion

Lorem

This pattern contains: atoms-text-span atoms-text-wrapper

HTML

									
										<div class="accordion ">
  <div class="accordion_toggle">
    <span class="accordion_icon"></span>
    <span class="accordion_title">Lorem</span>  </div>
  <div class="accordion_body">
    <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>

Accordion Open

Lorem

This pattern contains: atoms-text-span atoms-text-wrapper

HTML

									
										<div class="accordion accordion-open">
  <div class="accordion_toggle">
    <span class="accordion_icon"></span>
    <span class="accordion_title">Lorem</span>  </div>
  <div class="accordion_body">
    <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>

Accordion Study Course

Lorem

This pattern contains: atoms-text-span molecules-block-study-program

HTML

									
										<div class="accordion ">
  <div class="accordion_toggle">
    <span class="accordion_icon"></span>
    <span class="accordion_title">Lorem</span>  </div>
  <div class="accordion_body">
  <div class="program_wrap">
  </div>
  </div>
</div>

Accordion Study Course Open

Lorem

This pattern contains: atoms-text-span molecules-block-study-program

HTML

									
										<div class="accordion accordion-open">
  <div class="accordion_toggle">
    <span class="accordion_icon"></span>
    <span class="accordion_title">Lorem</span>  </div>
  <div class="accordion_body">
  <div class="program_wrap">
  </div>
  </div>
</div>

Cookie Bar

HTML

									
										<div class="cookie">
  <p class="u-sm-push-btm-none u-sm-padd-rgt">This website makes use of cookies to enhance browsing experience and provide additional functionality. <a class="cookie_link" href="#">More info</a></p>
  <a class="btn btn-medium btn-alt" href="#">Accept</a>
</div>

Translate

This page is only avaible in English at the moment. We apology for any inconvinience.

HTML

									
										<div class="translate">
  <div class="l-container">
    <div class="translate_inner">
      <p class="u-push-btm-none">This page is only avaible in English at the moment. We apology for any inconvinience.</p>
      <a class="translate_close" href="#">✕</a>
    </div>
  </div>
</div>

Header

EN Services

This pattern contains: atoms-logo molecules-nav molecules-nav-study-course molecules-nav-links-university molecules-nav-links-faculty molecules-nav-links-services molecules-nav-links-languages molecules-nav-grid-bachelor molecules-nav-grid-master molecules-nav-grid-phd molecules-nav-grid-lifelong molecules-nav-mobile

HTML

									
										<header class="js-header header">
  <div class="l-container">
    <div class="header_inner">
      <a class="logo" href="../../patterns/04-pages-00-homepage/04-pages-00-homepage.html">
        <svg class="logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 65 52">
          <title>Title</title>
          <desc>Description</desc>
          <path d="M38.9,0.2h25.7v3.6H38.9V0.2z"/>
          <path d="M12.6,34.5H9v-1.3c-1,1-2.2,1.5-3.6,1.5c-1.4,0-2.6-0.4-3.5-1.3
              c-1-1-1.5-2.4-1.5-4.1V20h3.7v8.8c0,0.9,0.3,1.6,0.8,2.1c0.4,0.4,1,0.6,1.6,0.6c0.7,0,1.2-0.2,1.6-0.6c0.5-0.5,0.8-1.1,0.8-2.1V20
              h3.7V34.5"/>
          <path d="M28.2,34.5h-3.7v-8.8c0-0.9-0.3-1.6-0.8-2.1c-0.4-0.4-1-0.6-1.6-0.6
              c-0.7,0-1.2,0.2-1.6,0.6c-0.5,0.5-0.8,1.2-0.8,2.1v8.8H16V20h3.6v1.3c1-1,2.2-1.5,3.7-1.5c1.4,0,2.6,0.4,3.5,1.3
              c1,1,1.5,2.4,1.5,4.1V34.5"/>
          <path d="M31.7,14.6h3.7v2.9h-3.7V14.6z M31.7,20h3.7v14.5h-3.7V20z"/>
          <path d="M51.2,27.2c0,1.5-0.1,2.6-0.2,3.3c-0.2,1.2-0.6,2.1-1.3,2.8
              c-0.9,0.9-2.1,1.3-3.6,1.3c-1.5,0-2.7-0.5-3.6-1.5v1.4h-3.5V14.7h3.7v6.6c0.9-1,2-1.4,3.5-1.4c1.5,0,2.7,0.4,3.5,1.3
              c0.7,0.6,1.1,1.6,1.3,2.8C51.1,24.7,51.2,25.8,51.2,27.2 M47.5,27.2c0-1.3-0.1-2.2-0.3-2.8c-0.4-0.9-1.1-1.4-2.1-1.4
              c-1.1,0-1.8,0.5-2.1,1.4c-0.2,0.6-0.3,1.5-0.3,2.8c0,1.3,0.1,2.2,0.3,2.8c0.4,0.9,1.1,1.4,2.1,1.4c1.1,0,1.8-0.5,2.1-1.4
              C47.4,29.4,47.5,28.5,47.5,27.2"/>
          <path d="M64.6,34.5H53.5v-2.7l6.5-8.5h-6.1V20h10.8v2.8L58,31.3h6.6V34.5"/>
          <path d="M38.9,47.4h25.7V51H38.9V47.4z"/>
        </svg>
      </a>      <div class="mainNav">
          <nav class="js-nav" data-nav-level="1">
          	<ul class="nav_wrap">
            		<li>
                  <a class="js-nav_item nav_item" href="#" data-toggle-elem="#nav-university">University</a>
                </li>
            		<li>
                  <a class="js-nav_item nav_item" href="#" data-toggle-elem="#nav-faculties">Faculties</a>
                </li>
            		<li>
                  <a class="js-nav_item nav_item" href="#" data-toggle-elem="#nav-study-courses">Study Programmes</a>
                </li>
          	</ul>
          </nav>
      </div>
      <div class="utility">
          <a class="nav_item nav_item-utility js-nav_item" href="#" data-toggle-elem="#nav-languages">EN</a>
          <a class="nav_item nav_item-utility js-nav_item" href="#" data-toggle-elem="#nav-services">Services</a>
        <div class="utility_search"></div>
        <div class="utility_hamburger">
          <div class="burger"></div>
        </div>
      </div>
    </div>
  </div>
</header>

<div class="navSecondary_wrapper">
  <div class="l-container">
      <nav id="nav-study-courses" class="js-nav navSecondary" data-nav-level="2">
      	<ul class="nav_wrap">
        		<li>
              <a class="js-nav_item nav_item" href="#" data-toggle-elem="#nav-bachelor">Bachelor</a>
            </li>
        		<li>
              <a class="js-nav_item nav_item" href="#" data-toggle-elem="#nav-master">Master</a>
            </li>
        		<li>
              <a class="js-nav_item nav_item" href="#" data-toggle-elem="#nav-phd">PhD</a>
            </li>
        		<li>
              <a class="js-nav_item nav_item" href="#" data-toggle-elem="#nav-lifelong">Lifelong Learning</a>
            </li>
      	</ul>
      </nav>
  </div>
</div>

<div class="navLinks_wrapper">
  <div class="l-container">
      <nav id="nav-university" class="js-nav navLinks" data-nav-level="2">
        <ul class="nav_wrap navLinks_wrap">
            <li class="navLinks_item">
              <a class="js-nav-item" href="#">Profile</a>
            </li>
            <li class="navLinks_item">
              <a class="js-nav-item" href="#">Organisation</a>
            </li>
            <li class="navLinks_item">
              <a class="js-nav-item" href="#">Cooperation</a>
            </li>
            <li class="navLinks_item">
              <a class="js-nav-item" href="#">Jobs</a>
            </li>
            <li class="navLinks_item">
              <a class="js-nav-item" href="#">Calls</a>
            </li>
            <li class="navLinks_item">
              <a class="js-nav-item" href="#">Press</a>
            </li>
        </ul>
      </nav>
  </div>
</div>

<div class="navLinks_wrapper">
  <div class="l-container">
      <nav id="nav-faculties" class="js-nav navLinks" data-nav-level="2">
        <ul class="nav_wrap navLinks_wrap">
            <li class="navLinks_item">
              <a class="js-nav-item" href="#">Computer Science</a>
            </li>
            <li class="navLinks_item">
              <a class="js-nav-item" href="#">Economics and Management</a>
            </li>
            <li class="navLinks_item">
              <a class="js-nav-item" href="#">Education</a>
            </li>
            <li class="navLinks_item">
              <a class="js-nav-item" href="#">Design and Art</a>
            </li>
            <li class="navLinks_item">
              <a class="js-nav-item" href="#">Science and Technology</a>
            </li>
        </ul>
      </nav>
  </div>
</div>

<div class="navLinks_wrapper">
  <div class="l-container">
      <nav id="nav-services" class="js-nav navLinks" data-nav-level="2">
        <ul class="nav_wrap navLinks_wrap">
            <li class="navLinks_item">
              <a class="js-nav-item" href="#">Advisory Service</a>
            </li>
            <li class="navLinks_item">
              <a class="js-nav-item" href="#">Library</a>
            </li>
            <li class="navLinks_item">
              <a class="js-nav-item" href="#">ICT-Services</a>
            </li>
            <li class="navLinks_item">
              <a class="js-nav-item" href="#">Services for Students</a>
            </li>
            <li class="navLinks_item">
              <a class="js-nav-item" href="#">Press</a>
            </li>
            <li class="navLinks_item">
              <a class="js-nav-item" href="#">Event Management and Lecture Halls</a>
            </li>
            <li class="navLinks_item">
              <a class="js-nav-item" href="#">Language Centre</a>
            </li>
            <li class="navLinks_item">
              <a class="js-nav-item" href="#">Recognition of foreign qualifications</a>
            </li>
        </ul>
      </nav>
  </div>
</div>

<div class="navLinks_wrapper">
  <div class="l-container">
      <nav id="nav-languages" class="js-nav navLinks" data-nav-level="2">
        <ul class="nav_wrap navLinks_wrap">
            <li class="navLinks_item">
              <a class="js-nav-item" href="#">Italiano</a>
            </li>
            <li class="navLinks_item">
              <a class="js-nav-item" href="#">Deutsch</a>
            </li>
            <li class="navLinks_item">
              <a class="js-nav-item" href="#">English</a>
            </li>
        </ul>
      </nav>
  </div>
</div>

<div class="navGrid_wrapper">
  <div class="l-container">
      <nav id="nav-bachelor" class="js-nav navGrid" data-nav-level="3">
        <ul class="nav_wrap navGrid_wrap">
            <li class="navGrid_item">
              <span class="gridItem_label">econ</span>
              <div class="gridItem_name">
                <a href="#">Economics and Management</a>
              </div>
            </li>
            <li class="navGrid_item">
              <span class="gridItem_label">econ</span>
              <div class="gridItem_name">
                <a href="#">Economics and Social Sciences</a>
              </div>
            </li>
            <li class="navGrid_item">
              <span class="gridItem_label">econ</span>
              <div class="gridItem_name">
                <a href="#">Tourism, Sport and Event Management</a>
              </div>
            </li>
            <li class="navGrid_item">
              <span class="gridItem_label">comp</span>
              <div class="gridItem_name">
                <a href="#">Computer Science and Engineering</a>
              </div>
            </li>
            <li class="navGrid_item">
              <span class="gridItem_label">tech</span>
              <div class="gridItem_name">
                <a href="#">Agricultural and Agro-Environmental Sciences</a>
              </div>
            </li>
            <li class="navGrid_item">
              <span class="gridItem_label">tech</span>
              <div class="gridItem_name">
                <a href="#">Industrial and Mechanical Engineering</a>
              </div>
            </li>
            <li class="navGrid_item">
              <span class="gridItem_label">edu</span>
              <div class="gridItem_name">
                <a href="#">Communication Sciences and Culture</a>
              </div>
            </li>
            <li class="navGrid_item">
              <span class="gridItem_label">edu</span>
              <div class="gridItem_name">
                <a href="#">Social Education</a>
              </div>
            </li>
            <li class="navGrid_item">
              <span class="gridItem_label">edu</span>
              <div class="gridItem_name">
                <a href="#">Social Work</a>
              </div>
            </li>
            <li class="navGrid_item">
              <span class="gridItem_label">dsgn</span>
              <div class="gridItem_name">
                <a href="#">Design and Art</a>
              </div>
            </li>
          <li class="navGrid_item"></li>
        </ul>
      </nav>
  </div>
</div>

<div class="navGrid_wrapper">
  <div class="l-container">
      <nav id="nav-master" class="js-nav navGrid" data-nav-level="3">
        <ul class="nav_wrap navGrid_wrap">
            <li class="navGrid_item">
              <span class="gridItem_label">econ</span>
              <div class="gridItem_name">
                <a href="#">Economics and Management of the Public Sector</a>
              </div>
            </li>
            <li class="navGrid_item">
              <span class="gridItem_label">econ</span>
              <div class="gridItem_name">
                <a href="#">Economics and Social Sciences</a>
              </div>
            </li>
            <li class="navGrid_item">
              <span class="gridItem_label">econ</span>
              <div class="gridItem_name">
                <a href="#">Tourism, Sport and Event Management</a>
              </div>
            </li>
            <li class="navGrid_item">
              <span class="gridItem_label">comp</span>
              <div class="gridItem_name">
                <a href="#">Computer Science and Engineering</a>
              </div>
            </li>
            <li class="navGrid_item">
              <span class="gridItem_label">tech</span>
              <div class="gridItem_name">
                <a href="#">Agricultural and Agro-Environmental Sciences</a>
              </div>
            </li>
            <li class="navGrid_item">
              <span class="gridItem_label">tech</span>
              <div class="gridItem_name">
                <a href="#">Environmental Management of Mountain Areas</a>
              </div>
            </li>
            <li class="navGrid_item">
              <span class="gridItem_label">tech</span>
              <div class="gridItem_name">
                <a href="#">Energy Engineering</a>
              </div>
            </li>
            <li class="navGrid_item">
              <span class="gridItem_label">tech</span>
              <div class="gridItem_name">
                <a href="#">International Horticultural Science</a>
              </div>
            </li>
            <li class="navGrid_item">
              <span class="gridItem_label">edu</span>
              <div class="gridItem_name">
                <a href="#">Primary Education (One Cycle – 5 years)</a>
              </div>
            </li>
            <li class="navGrid_item">
              <span class="gridItem_label">dsgn</span>
              <div class="gridItem_name">
                <a href="#">Eco-Social Design (Glocal Design)</a>
              </div>
            </li>
          <li class="navGrid_item"></li>
        </ul>
      </nav>
  </div>
</div>

<div class="navGrid_wrapper">
  <div class="l-container">
      <nav id="nav-phd" class="js-nav navGrid" data-nav-level="3">
        <ul class="nav_wrap navGrid_wrap">
            <li class="navGrid_item">
              <span class="gridItem_label">comp</span>
              <div class="gridItem_name">
                <a href="#">Computer Science</a>
              </div>
            </li>
            <li class="navGrid_item">
              <span class="gridItem_label">tech</span>
              <div class="gridItem_name">
                <a href="#">Mountain Environment and Agriculture</a>
              </div>
            </li>
            <li class="navGrid_item">
              <span class="gridItem_label">tech</span>
              <div class="gridItem_name">
                <a href="#">Sustainable Energy and Technologies</a>
              </div>
            </li>
            <li class="navGrid_item">
              <span class="gridItem_label">eco</span>
              <div class="gridItem_name">
                <a href="#">Management and Economics on Organizational and Institutional Outliers</a>
              </div>
            </li>
            <li class="navGrid_item">
              <span class="gridItem_label">edu</span>
              <div class="gridItem_name">
                <a href="#">General Pedagogy, Social Pedagogy and General Education</a>
              </div>
            </li>
          <li class="navGrid_item"></li>
        </ul>
      </nav>
  </div>
</div>

<div class="navGrid_wrapper">
  <div class="l-container">
      <nav id="nav-lifelong" class="js-nav navGrid" data-nav-level="3">
        <ul class="nav_wrap navGrid_wrap">
            <li class="navGrid_item">
              <span class="gridItem_label">Lorem</span>
              <div class="gridItem_name">
                <a href="#">Lorem ipsum</a>
              </div>
            </li>
          <li class="navGrid_item"></li>
        </ul>
      </nav>
  </div>
</div>

<div id="nav-mobile" class="navMobile_wrapper">
  <div class="l-container">
    <nav class="navMobile">
    	<ul class="navMobile_list">
      		<li>
            <a class="navMobile_item" href="#">University</a>
                <ul class="navMobile_second">
                    <li><a class="navMobile_link" href="#">Profile</a></li>
                    <li><a class="navMobile_link" href="#">Organisation</a></li>
                    <li><a class="navMobile_link" href="#">Cooperation</a></li>
                    <li><a class="navMobile_link" href="#">Jobs</a></li>
                    <li><a class="navMobile_link" href="#">Calls</a></li>
                    <li><a class="navMobile_link" href="#">Press</a></li>
                </ul>


          </li>
      		<li>
            <a class="navMobile_item" href="#">Faculties</a>


                <ul class="navMobile_second">
                    <li><a class="navMobile_link" href="#">Computer Science</a></li>
                    <li><a class="navMobile_link" href="#">Economics and Management</a></li>
                    <li><a class="navMobile_link" href="#">Education</a></li>
                    <li><a class="navMobile_link" href="#">Design and Art</a></li>
                    <li><a class="navMobile_link" href="#">Science and Technology</a></li>
                </ul>
          </li>
      		<li>
            <a class="navMobile_item" href="#">Study Programmes</a>

                <ul class="navMobile_second">
                    <li>
                      <a class="navMobile_item" href="#">Bachelor</a>
                          <ul class="navMobile_third">
                              <li class="navMobile_link">
                                <span class="navMobile_label">econ</span>
                                <a href="#">Economics and Management</a>
                              </li>
                              <li class="navMobile_link">
                                <span class="navMobile_label">econ</span>
                                <a href="#">Economics and Social Sciences</a>
                              </li>
                              <li class="navMobile_link">
                                <span class="navMobile_label">econ</span>
                                <a href="#">Tourism, Sport and Event Management</a>
                              </li>
                              <li class="navMobile_link">
                                <span class="navMobile_label">comp</span>
                                <a href="#">Computer Science and Engineering</a>
                              </li>
                              <li class="navMobile_link">
                                <span class="navMobile_label">tech</span>
                                <a href="#">Agricultural and Agro-Environmental Sciences</a>
                              </li>
                              <li class="navMobile_link">
                                <span class="navMobile_label">tech</span>
                                <a href="#">Industrial and Mechanical Engineering</a>
                              </li>
                              <li class="navMobile_link">
                                <span class="navMobile_label">edu</span>
                                <a href="#">Communication Sciences and Culture</a>
                              </li>
                              <li class="navMobile_link">
                                <span class="navMobile_label">edu</span>
                                <a href="#">Social Education</a>
                              </li>
                              <li class="navMobile_link">
                                <span class="navMobile_label">edu</span>
                                <a href="#">Social Work</a>
                              </li>
                              <li class="navMobile_link">
                                <span class="navMobile_label">dsgn</span>
                                <a href="#">Design and Art</a>
                              </li>
                          </ul>



                    </li>
                    <li>
                      <a class="navMobile_item" href="#">Master</a>

                          <ul class="navMobile_third">
                              <li class="navMobile_link">
                                <span class="navMobile_label">econ</span>
                                <a href="#">Economics and Management of the Public Sector</a>
                              </li>
                              <li class="navMobile_link">
                                <span class="navMobile_label">econ</span>
                                <a href="#">Economics and Social Sciences</a>
                              </li>
                              <li class="navMobile_link">
                                <span class="navMobile_label">econ</span>
                                <a href="#">Tourism, Sport and Event Management</a>
                              </li>
                              <li class="navMobile_link">
                                <span class="navMobile_label">comp</span>
                                <a href="#">Computer Science and Engineering</a>
                              </li>
                              <li class="navMobile_link">
                                <span class="navMobile_label">tech</span>
                                <a href="#">Agricultural and Agro-Environmental Sciences</a>
                              </li>
                              <li class="navMobile_link">
                                <span class="navMobile_label">tech</span>
                                <a href="#">Environmental Management of Mountain Areas</a>
                              </li>
                              <li class="navMobile_link">
                                <span class="navMobile_label">tech</span>
                                <a href="#">Energy Engineering</a>
                              </li>
                              <li class="navMobile_link">
                                <span class="navMobile_label">tech</span>
                                <a href="#">International Horticultural Science</a>
                              </li>
                              <li class="navMobile_link">
                                <span class="navMobile_label">edu</span>
                                <a href="#">Primary Education (One Cycle – 5 years)</a>
                              </li>
                              <li class="navMobile_link">
                                <span class="navMobile_label">dsgn</span>
                                <a href="#">Eco-Social Design (Glocal Design)</a>
                              </li>
                          </ul>


                    </li>
                    <li>
                      <a class="navMobile_item" href="#">PhD</a>


                          <ul class="navMobile_third">
                              <li class="navMobile_link">
                                <span class="navMobile_label">comp</span>
                                <a href="#">Computer Science</a>
                              </li>
                              <li class="navMobile_link">
                                <span class="navMobile_label">tech</span>
                                <a href="#">Mountain Environment and Agriculture</a>
                              </li>
                              <li class="navMobile_link">
                                <span class="navMobile_label">tech</span>
                                <a href="#">Sustainable Energy and Technologies</a>
                              </li>
                              <li class="navMobile_link">
                                <span class="navMobile_label">eco</span>
                                <a href="#">Management and Economics on Organizational and Institutional Outliers</a>
                              </li>
                              <li class="navMobile_link">
                                <span class="navMobile_label">edu</span>
                                <a href="#">General Pedagogy, Social Pedagogy and General Education</a>
                              </li>
                          </ul>

                    </li>
                    <li>
                      <a class="navMobile_item" href="#">Lifelong Learning</a>



                          <ul class="navMobile_third">
                              <li class="navMobile_link">
                                <span class="navMobile_label">Lorem</span>
                                <a href="#">Lorem ipsum</a>
                              </li>
                          </ul>
                    </li>
                </ul>

          </li>
        <li>
          <a class="navMobile_item" href="#">Services</a>
        </li>
    	</ul>
    </nav>
  </div>
</div>

Footer

This pattern contains: atoms-heading-5 atoms-image-4x3 atoms-text-paragraph atoms-maps molecules-social-links-white

HTML

									
										<footer class="footer">
    <div class="footer_banner">
      <div class="l-container">
        <p class="footer_bannerText">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 class="l-container">
    <h3 class="footer_title">Lorem ipsum dolor sit (37 characters)</h3>    <div class="g-row">

      <div class="g g-md-12">
          <div class="u-push-btm">
              <div class="g-row">
                <h5 class="g g-24">Lorem ipsum dolor sit (37 characters)</h5>                <div class="g g-sm-12">
                  <div class="footer_image">
                    <img class="" src="../../images/fpo_4x3.png" alt="" />                  </div>
                </div>
                <div class="g g-sm-12">
                    <p class="footer_address">Lorem</p>
                    <p class="u-push-none">
                      <a class="footer_link" href="#">Lorem</a>
                    </p>
                </div>
              </div>
          </div>

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

      <div class="g g-md-11 g-md-off-1">
          <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 class="g-row u-push-btm">
      <div class="g g-md-12 u-push-btm u-md-push-btm-none">
          <h5 class="">Lorem ipsum dolor sit (37 characters)</h5>          <div class="social">
          	<a class="socialItem" href="#"><i class="i i-facebook-brand"></i></a>
          	<a class="socialItem" href="#"><i class="i i-twitter-brand"></i></a>
            <a class="socialItem" href="#"><i class="i i-instagram-brand"></i></a>
            <a class="socialItem" href="#"><i class="i i-linkedin-brand"></i></a>
          </div>      </div>
      <div class="g g-md-11 g-md-off-1">
          <h5 class="">Lorem ipsum dolor sit (37 characters)</h5>          <form class="footer_form" action="#">
            <input class="form_input footer_input" type="email" placeholder="Lorem">            <a href="#" class="btn btn-alt btn-medium footer_button">Lorem ipsum</a>          </form>
      </div>
    </div>

    <div class="g-row">
      <div class="g g-md-24">
            <a class="footer_link u-push-rgt" href="#">Lorem</a>
          <span>© Unibz</span>
      </div>
    </div>
  </div>
</footer>

Hero

This pattern contains: molecules-form-search atoms-heading-5 atoms-heading-1 atoms-text-paragraph

HTML

									
										<section class="hero" role="banner">
  <div class="hero_image" style="background-image:url(../../images/fpo_16x9.png)">
      <span class="hero_caption">Lorem ipsum dolor sit (37 characters)</span>
  </div>
    <div class="hero_text">
        <h5 class="hero_label">Lorem ipsum dolor sit (37 characters)</h5>        <h1 class="hero_title">Lorem ipsum dolor sit (37 characters)</h1>    </div>
  <div class="l-containerSmall">
    <div class="typography">
      <p class="hero_intro">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>

Hero Small

This pattern contains: atoms-heading-5 atoms-heading-1

HTML

									
										<section class="hero-small" role="banner">
  <div class="l-container">
      <h5 class="hero_label">Lorem ipsum dolor sit (37 characters)</h5>      <h1 class="hero_title">Lorem ipsum dolor sit (37 characters)</h1>  </div>
</section>

Hero Search

HTML

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 class="bannet_text">
            <div class="typograhy">
              <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 class="l-container">
            <a href="#" class="btn btn-medium banner_btn">Lorem ipsum</a>      </div>
    </div>
  </div>
</section>

Block Links

Lorem ipsum dolor sit (37 characters)

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

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

HTML

									
										<section class="l-sectionLarge">
  <div class="l-containerSmall">
    <h2 class="">Lorem ipsum dolor sit (37 characters)</h2>    <div class="blockLink_wrapper">
            <a class="blockLink" href="#">Lorem ipsum dolor sit (37 characters)</a>
                      <a class="blockLink" href="#">Lorem ipsum dolor sit (37 characters)</a>
                      <a class="blockLink" href="#">Lorem ipsum dolor sit (37 characters)</a>
              </div>
  </div>
</section>

Latest Post

Lorem ipsum dolor sit (37 characters)

24 June 2015 Lorem

Lorem ipsum dolor sit (37 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

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-sectionSmall">
    <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 ipsum

This pattern contains: molecules-block-title

HTML

									
										<section class="l-section">
  <div class="l-container">
      <div class="l-container_left">
        <h3 class="h-theme u-push-btm-half">Lorem ipsum dolor sit (37 characters)</h3>      </div>
      <div class="gridTitle">
          <div class="blockTitle">
            <a class="u-blk" href="#">
    <h3 class="blockTitle_title">Lorem ipsum dolor sit (37 characters)</h3>            </a>
    <a href="#" class="btn-text btn-text-small blockTitle_btn">Lorem ipsum</a>          </div>      </div>
  </div>
</section>

Latest Highlights

Lorem ipsum dolor sit (37 characters)

Lorem ipsum

Lorem ipsum dolor sit (37 characters)

Lorem ipsum

Lorem ipsum dolor sit (37 characters)

Lorem ipsum

This pattern contains: atoms-heading-2 molecules-block-highlight

HTML

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

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

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

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)

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

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">
            <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>    <input class="form_input" type="search" placeholder="Search in...">
            <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">ECO</span>
    <span class="btn-filter_counter">(12)</span>
    <span class="btn-filter_close">✕</span>
  </a>  <a href="#" class="btn btn-filter ">
    <span class="btn-filter_label">COMP</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">TECH</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">EDU</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">DSGN</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="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 class="u-blk" href="#">
      <h5 class="job_title">Lorem ipsum dolor sit (37 characters)</h5>              </a>
            </div>
          </div>      </div>
    </div>
  </div>
</section>

Latest Tenders

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

Lorem ipsum dolor sit (37 characters)

Lorem ipsum

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">
          <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>    <input class="form_input" type="search" placeholder="Search in...">
          <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">ECO</span>
    <span class="btn-filter_counter">(12)</span>
    <span class="btn-filter_close">✕</span>
  </a>  <a href="#" class="btn btn-filter ">
    <span class="btn-filter_label">COMP</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">TECH</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">EDU</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">DSGN</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=" tender">
          <div class="tender_body">
            <a href="#">
      <h5 class="tender_title">Lorem ipsum dolor sit (37 characters)</h5>            </a>
    <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="#" class="btn-text btn-text-small tender_link">Lorem ipsum</a>          </div>
        </div>    </div>
  </div>
</section>

Post

Lorem

Lorem ipsum dolor sit (37 characters)

Lorem Lorem 24 June 2015

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-md-18 g-lg-14">
        <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-md-18 g-lg-14">
  <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

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)

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">
          <img class="office_image" src="../../images/fpo_4x3.png" alt="" />      </div>
      <div class="g g-md-16 g-lg-14 g-xl-14 g-md-pull-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>          <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 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>
</section>

Person

Lorem Lorem Lorem Lorem ipsum

Lorem Lorem

Lorem ipsum dolor sit (37 characters)

24 June 2015 Lorem

Lorem ipsum dolor sit (37 characters)

Lorem ipsum

This pattern contains: atoms-text-link atoms-text-span atoms-button-text-small atoms-text-paragraph molecules-block-title molecules-block-post atoms-button-text-primary

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="blockTitle">
                <a class="u-blk" href="#">
    <h3 class="blockTitle_title">Lorem ipsum dolor sit (37 characters)</h3>                </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-text btn-text-primary ">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

24 June 2015 Lorem

Lorem ipsum dolor sit (37 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>    <input class="form_input" type="search" placeholder="Search for news...">
            <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

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

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>    <input class="form_input" type="search" placeholder="Search for news...">
            <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>

Timetable Day

Lorem ipsum dolor sit (37 characters)

9:21 Lorem

Lorem ipsum dolor sit (37 characters)

Lorem ipsum

This pattern contains: molecules-block-timetable-item

HTML

									
										<section class="l-section">
  <div class="l-container">
    <div class="timetable_week">
        <h3 class="h3 h-theme">Lorem ipsum dolor sit (37 characters)</h3>        <div class="timetable_day">
          <h3 class="timetable_date">Lorem ipsum dolor sit (37 characters)</h3>          <div class="timetable_items">
              <div class="">
                <div class="timetable_item">
                  <div class="tt_itemMeta">
      <span class="tt_itemTime">9:21</span>        <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>          </div>
        </div>
    </div>
  </div>
</section>

Power Tools

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

This pattern contains: atoms-button-toggle atoms-forms-input-search molecules-filters molecules-calendar-month

HTML

									
										<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>    <input class="form_input" type="search" placeholder="Search in...">
    <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">ECO</span>
    <span class="btn-filter_counter">(12)</span>
    <span class="btn-filter_close">✕</span>
  </a>  <a href="#" class="btn btn-filter ">
    <span class="btn-filter_label">COMP</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">TECH</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">EDU</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">DSGN</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>

Search Find

(Lorem) ✕ (Lorem) ✕ (Lorem) ✕ (Lorem) ✕ (Lorem) ✕

Mon 2 OCT

Tue 3 OCT

Wed 4 OCT

Thu 5 OCT

Fri 6 OCT

Sat 7 OCT

Sun 8 OCT

Mon 9 OCT

Tue 10 OCT

Wed 11 OCT

Thu 12 OCT

Fri 13 OCT

Sat 14 OCT

Sun 15 OCT

Mon 16 OCT

Tue 17 OCT

Wed 18 OCT

Thu 19 OCT

Fri 20 OCT

Sat 21 OCT

Sun 22 OCT

Mon 23 OCT

Tue 24 OCT

Wed 25 OCT

Thu 26 OCT

Fri 27 OCT

Sat 28 OCT

Sun 29 OCT

Mon 30 OCT

Tue 31 OCT

Wed 1 NOV

Thu 2 NOV

October 2015

Mon Tue Wed Thu Fri Sat Sun

This pattern contains: molecules-find-tools molecules-filters molecules-calendar-days molecules-calendar-month

HTML

									
										<div class="l-container">
  <div class="searchFind">
      <div class="find_tools">
    <a class="btn-toggle find_toolToggle find_toolToggle-search" href="#"><i class="i i-search"></i></a>    <input class="form_input" type="search" placeholder="Lorem">    <a class="btn-toggle find_toolToggle" href="#"><i class="i i-filter"></i></a>    <a class="btn-toggle find_toolToggle" href="#"><i class="i i-calendar"></i></a>      </div>
  <a href="#" class="btn btn-filter filter_button">
    <span class="btn-filter_label">ECO</span>
    <span class="btn-filter_counter">(Lorem)</span>
    <span class="btn-filter_close">✕</span>
  </a>  <a href="#" class="btn btn-filter filter_button btn-outline-active">
    <span class="btn-filter_label">COMP</span>
    <span class="btn-filter_counter">(Lorem)</span>
    <span class="btn-filter_close">✕</span>
  </a>  <a href="#" class="btn btn-filter filter_button">
    <span class="btn-filter_label">TECH</span>
    <span class="btn-filter_counter">(Lorem)</span>
    <span class="btn-filter_close">✕</span>
  </a>  <a href="#" class="btn btn-filter filter_button">
    <span class="btn-filter_label">EDU</span>
    <span class="btn-filter_counter">(Lorem)</span>
    <span class="btn-filter_close">✕</span>
  </a>  <a href="#" class="btn btn-filter filter_button">
    <span class="btn-filter_label">DSGN</span>
    <span class="btn-filter_counter">(Lorem)</span>
    <span class="btn-filter_close">✕</span>
  </a>

      <div class="calendarDays">
        <div class="cd_navBtnWrapper cd_navBtnWrapper-lft">
    <a href="#" class="btn-round cd_navBtn"><i class="i i-arrow-left"></i></a>        </div>
        <div class="cd_navDays">
          <div class="cd_navDay">
            <span class="cd_navDayName">Mon</span>
            <span class="cd_navDayNum">2</span>
            <span class="cd_navDayMonth">OCT</span>
          </div>
          <div class="cd_navDay">
            <span class="cd_navDayName">Tue</span>
            <span class="cd_navDayNum">3</span>
            <span class="cd_navDayMonth">OCT</span>
          </div>
          <div class="cd_navDay">
            <span class="cd_navDayName">Wed</span>
            <span class="cd_navDayNum">4</span>
            <span class="cd_navDayMonth">OCT</span>
          </div>
          <div class="cd_navDay cd_navDay-current">
            <span class="cd_navDayName">Thu</span>
            <span class="cd_navDayNum">5</span>
            <span class="cd_navDayMonth">OCT</span>
          </div>
          <div class="cd_navDay">
            <span class="cd_navDayName">Fri</span>
            <span class="cd_navDayNum">6</span>
            <span class="cd_navDayMonth">OCT</span>
          </div>
          <div class="cd_navDay">
            <span class="cd_navDayName">Sat</span>
            <span class="cd_navDayNum">7</span>
            <span class="cd_navDayMonth">OCT</span>
          </div>
          <div class="cd_navDay">
            <span class="cd_navDayName">Sun</span>
            <span class="cd_navDayNum">8</span>
            <span class="cd_navDayMonth">OCT</span>
          </div>
          <div class="cd_navDay">
            <span class="cd_navDayName">Mon</span>
            <span class="cd_navDayNum">9</span>
            <span class="cd_navDayMonth">OCT</span>
          </div>
          <div class="cd_navDay">
            <span class="cd_navDayName">Tue</span>
            <span class="cd_navDayNum">10</span>
            <span class="cd_navDayMonth">OCT</span>
          </div>
          <div class="cd_navDay">
            <span class="cd_navDayName">Wed</span>
            <span class="cd_navDayNum">11</span>
            <span class="cd_navDayMonth">OCT</span>
          </div>
          <div class="cd_navDay">
            <span class="cd_navDayName">Thu</span>
            <span class="cd_navDayNum">12</span>
            <span class="cd_navDayMonth">OCT</span>
          </div>
          <div class="cd_navDay">
            <span class="cd_navDayName">Fri</span>
            <span class="cd_navDayNum">13</span>
            <span class="cd_navDayMonth">OCT</span>
          </div>
          <div class="cd_navDay">
            <span class="cd_navDayName">Fri</span>
            <span class="cd_navDayNum">13</span>
            <span class="cd_navDayMonth">OCT</span>
          </div>
          <div class="cd_navDay">
            <span class="cd_navDayName">Sat</span>
            <span class="cd_navDayNum">14</span>
            <span class="cd_navDayMonth">OCT</span>
          </div>
          <div class="cd_navDay">
            <span class="cd_navDayName">Sun</span>
            <span class="cd_navDayNum">15</span>
            <span class="cd_navDayMonth">OCT</span>
          </div>
          <div class="cd_navDay">
            <span class="cd_navDayName">Mon</span>
            <span class="cd_navDayNum">16</span>
            <span class="cd_navDayMonth">OCT</span>
          </div>
          <div class="cd_navDay">
            <span class="cd_navDayName">Tue</span>
            <span class="cd_navDayNum">17</span>
            <span class="cd_navDayMonth">OCT</span>
          </div>
          <div class="cd_navDay">
            <span class="cd_navDayName">Wed</span>
            <span class="cd_navDayNum">18</span>
            <span class="cd_navDayMonth">OCT</span>
          </div>
          <div class="cd_navDay">
            <span class="cd_navDayName">Thu</span>
            <span class="cd_navDayNum">19</span>
            <span class="cd_navDayMonth">OCT</span>
          </div>
          <div class="cd_navDay">
            <span class="cd_navDayName">Fri</span>
            <span class="cd_navDayNum">20</span>
            <span class="cd_navDayMonth">OCT</span>
          </div>
          <div class="cd_navDay">
            <span class="cd_navDayName">Sat</span>
            <span class="cd_navDayNum">21</span>
            <span class="cd_navDayMonth">OCT</span>
          </div>
          <div class="cd_navDay">
            <span class="cd_navDayName">Sun</span>
            <span class="cd_navDayNum">22</span>
            <span class="cd_navDayMonth">OCT</span>
          </div>
          <div class="cd_navDay">
            <span class="cd_navDayName">Mon</span>
            <span class="cd_navDayNum">23</span>
            <span class="cd_navDayMonth">OCT</span>
          </div>
          <div class="cd_navDay">
            <span class="cd_navDayName">Tue</span>
            <span class="cd_navDayNum">24</span>
            <span class="cd_navDayMonth">OCT</span>
          </div>
          <div class="cd_navDay">
            <span class="cd_navDayName">Wed</span>
            <span class="cd_navDayNum">25</span>
            <span class="cd_navDayMonth">OCT</span>
          </div>
          <div class="cd_navDay">
            <span class="cd_navDayName">Thu</span>
            <span class="cd_navDayNum">26</span>
            <span class="cd_navDayMonth">OCT</span>
          </div>
          <div class="cd_navDay">
            <span class="cd_navDayName">Fri</span>
            <span class="cd_navDayNum">27</span>
            <span class="cd_navDayMonth">OCT</span>
          </div>
          <div class="cd_navDay">
            <span class="cd_navDayName">Sat</span>
            <span class="cd_navDayNum">28</span>
            <span class="cd_navDayMonth">OCT</span>
          </div>
          <div class="cd_navDay">
            <span class="cd_navDayName">Sun</span>
            <span class="cd_navDayNum">29</span>
            <span class="cd_navDayMonth">OCT</span>
          </div>
          <div class="cd_navDay">
            <span class="cd_navDayName">Mon</span>
            <span class="cd_navDayNum">30</span>
            <span class="cd_navDayMonth">OCT</span>
          </div>
          <div class="cd_navDay">
            <span class="cd_navDayName">Tue</span>
            <span class="cd_navDayNum">31</span>
            <span class="cd_navDayMonth">OCT</span>
          </div>
          <div class="cd_navDay">
            <span class="cd_navDayName">Wed</span>
            <span class="cd_navDayNum">1</span>
            <span class="cd_navDayMonth">NOV</span>
          </div>
          <div class="cd_navDay">
            <span class="cd_navDayName">Thu</span>
            <span class="cd_navDayNum">2</span>
            <span class="cd_navDayMonth">NOV</span>
          </div>
        </div>
        <div class="cd_navBtnWrapper cd_navBtnWrapper-rgt">
    <a href="#" class="btn-round cd_navBtn"><i class="i i-arrow-right"></i></a>        </div>
      </div>
      <div class="calendarMonths ">
        <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>

Search Section

Lorem ipsum dolor sit (37 characters)

This pattern contains: atoms-heading-2 molecules-form-search

HTML

									
										<section class="l-sectionLarge searchSection">
  <div class="l-containerSmall">
    <h2 class="searchSection_headline">Lorem ipsum dolor sit (37 characters)</h2>    <form class="form " role="search">
  <input class="form_input" type="search" placeholder="Lorem">      <a class="form_inputSearchButton" href="#"><i class="i i-search-gray"></i></a>
    </form>  </div>
</section>

Contact Card

Lorem ipsum dolor sit (37 characters)

This pattern contains: atoms-heading-2 molecules-block-contact

HTML

									
										<section class="l-section">
  <div class="l-containerSmall">
    <h2 class="">Lorem ipsum dolor sit (37 characters)</h2>    <div class="contactBlock">
      <div class="contactBlock_elem contactBlock_contacts">
      </div>
      <div class="contactBlock_elem contactBlock_details">
      </div>
    </div>  </div>
</section>

Accordion

Lorem ipsum dolor sit (37 characters)

This pattern contains: atoms-heading-2 atoms-text-paragraph molecules-accordion

HTML

									
										<section class="l-sectionLarge">
  <div class="l-containerSmall">
    <h2 class="">Lorem ipsum dolor sit (37 characters)</h2>  </div>
</section>

Accordion Study Courses

Lorem ipsum dolor sit (37 characters)

This pattern contains: atoms-heading-2 atoms-text-paragraph molecules-accordion-study-course

HTML

									
										<section class="l-sectionLarge">
  <div class="l-containerSmall">
    <h2 class="">Lorem ipsum dolor sit (37 characters)</h2>  </div>
</section>