Pattern Lab

Media Block

Lorem ipsum dolor sit (37 characters)

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris ni (210 characters)

Lorem ipsum

This pattern contains: atoms-text-paragraph

HTML

									
										<div class="mediaBlock">
  <a class="mediaBlock_figure" href="#">
    <img class='mediaBlock_thumb' src="../../images/fpo_4x3.png" alt="4x3 Image" />  </a>
	<div class="mediaBlock_body">
		<h2 class='mediaBlock_title'>Lorem ipsum dolor sit (37 characters)</h2>		<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>    <a href="#" class="btn-text btn-text-alt mediaBlock_btn">Lorem ipsum</a>	</div>
</div>

Block Highlight

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua (140 characters)

This pattern contains: atoms-landscape-4x3 atoms-text-paragraph

HTML

									
										<div class="highlight">
  <a href="#">
    <img class='highlight_thumb' src="../../images/fpo_4x3.png" alt="4x3 Image" />  </a>
  <div class="highlight_body">
    <p class='highlight_text'>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua (140 characters)</p>  </div>
</div>

Block Glance

Lorem ipsum dolor sit (37 characters)

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris ni (210 characters)

HTML

									
										<div class="glance">
  <div class="l-container">
    <h2 class='glance_title'>Lorem ipsum dolor sit (37 characters)</h2>    <p class='glance_text'>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris ni (210 characters)</p>  </div>
</div>

Block Post

Lorem ipsum dolor sit (37 characters)

24 June 2015

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris ni (210 characters)

HTML

									
										<div class="post ">
  <div class="post_body">
    <h4 class='post_title'>Lorem ipsum dolor sit (37 characters)</h4>      <img class='post_thumb' src="../../images/fpo_4x3.png" alt="4x3 Image" />    <time class='byline' datetime="12:32+00:00">24 June 2015 </time>    <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 Post Empty

Lorem ipsum dolor sit (37 characters)

24 June 2015

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris ni (210 characters)

HTML

									
										<div class="post post-noImage">
  <div class="post_body">
    <h4 class='post_title'>Lorem ipsum dolor sit (37 characters)</h4>    <time class='byline' datetime="12:32+00:00">24 June 2015 </time>    <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

Lorem ipsum dolor sit (37 characters)

Campus Unibz C 3.03 10:00 5 July 2015

Lorem ipsum

HTML

									
										<div class="event">
  <a class="event_figure" href="#">
    <img class='event_thumb' src="../../images/fpo_4x3.png" alt="4x3 Image" />  </a>
  <div class="event_body">
    <h2 class='event_title'>Lorem ipsum dolor sit (37 characters)</h2>    <div class="event_details">
        <span class='event_meta'>Campus Unibz</span>        <span class='event_meta'>C 3.03</span>        <time class='event_time' datetime="12:32+00:00">   10:00</time>        <time class='event_time' datetime="12:32+00:00">5 July 2015 </time>    </div>
    <a href="#" class="btn-text btn-text-alt event_btn">Lorem ipsum</a>  </div>
</div>

Block Event Empty

event

Lorem ipsum dolor sit (37 characters)

Campus Unibz C 3.03 10:00 5 July 2015

Lorem ipsum

HTML

									
										<div class="event">
  <a class="event_figure" href="#">
    <div class="event_thumb-empty"><h3 class='event_thumbTitle'>event</h3></div>
  </a>
  <div class="event_body">
    <h2 class='event_title'>Lorem ipsum dolor sit (37 characters)</h2>    <div class="event_details">
        <span class='event_meta'>Campus Unibz</span>        <span class='event_meta'>C 3.03</span>        <time class='event_time' datetime="12:32+00:00">   10:00</time>        <time class='event_time' datetime="12:32+00:00">5 July 2015 </time>    </div>
    <a href="#" class="btn-text btn-text-alt event_btn">Lorem ipsum</a>  </div>
</div>

Block Publication

2015 266 p. 17x24 cm. ISBN: 978-88-6046-067-7 ISSN: 2420-9554

Lorem ipsum dolor sit (37 characters)

Ed. by Giorgio Camuffo; Maddalena Dalla Mura; Alvise Mattozzi;

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)

Buy it28,00 euro

This pattern contains: atoms-text-span atoms-portrait atoms-text-time atoms-heading-2

HTML

									
										<div class="publication">
  <div class="publication_figure">
      <img class='publication_thumb' src="../../images/fpo_portrait.png" alt="Portrait Thumbnail" />
<time class='publication_meta' datetime="12:32+00:00">  2015 </time>      <span class='publication_meta'>266 p.</span>      <span class='publication_meta'>17x24 cm.</span>
      <span class='publication_serial'>ISBN: 978-88-6046-067-7</span>      <span class='publication_serial'>ISSN: 2420-9554</span>  </div>
  
  <div class="publication_body">
    <h2 class='publication_title'>Lorem ipsum dolor sit (37 characters)</h2>    <p class="publication_authors">
      <span class='publication_label'>Ed. by</span>        <span >Giorgio Camuffo</span>;
        <span >Maddalena Dalla Mura</span>;
        <span >Alvise Mattozzi</span>;
    </p>
    <p class='publication_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>    <input class='form_input publication_input' type="number" min="1" max="99" value="1">    <a href="#" class="btn">Buy it</a><span class='publication_price'>28,00 euro</span>  </div>
</div>

Block Publication Empty

Book

2015 266 p. 17x24 cm. ISBN: 978-88-6046-067-7 ISSN: 2420-9554

Lorem ipsum dolor sit (37 characters)

Ed. by Giorgio Camuffo; Maddalena Dalla Mura; Alvise Mattozzi;

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)

Buy it28,00 euro

This pattern contains: atoms-text-span atoms-portrait atoms-text-time atoms-heading-2

HTML

									
										<div class="publication">
  <div class="publication_figure">
      <div class="publication_thumb publication_thumb-empty"><span class='publication_thumbTitle'>Book</span></div>

<time class='publication_meta' datetime="12:32+00:00">  2015 </time>      <span class='publication_meta'>266 p.</span>      <span class='publication_meta'>17x24 cm.</span>
      <span class='publication_serial'>ISBN: 978-88-6046-067-7</span>      <span class='publication_serial'>ISSN: 2420-9554</span>  </div>
  
  <div class="publication_body">
    <h2 class='publication_title'>Lorem ipsum dolor sit (37 characters)</h2>    <p class="publication_authors">
      <span class='publication_label'>Ed. by</span>        <span >Giorgio Camuffo</span>;
        <span >Maddalena Dalla Mura</span>;
        <span >Alvise Mattozzi</span>;
    </p>
    <p class='publication_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>    <input class='form_input publication_input' type="number" min="1" max="99" value="1">    <a href="#" class="btn">Buy it</a><span class='publication_price'>28,00 euro</span>  </div>
</div>

Block Person

Lorem Ipsum

Lorem ipsum

This pattern contains: atoms-text-span atoms-button-small

HTML

									
										<div class="person">
  <a class="person_figure" href="#">
    <img class='person_portrait' src="../../images/fpo_4x3.png" alt="4x3 Image" />  </a>
  <p class="person_name">
      <span >Lorem Ipsum</span>  </p>
    <p class='byline'>Lorem Ipsum</p>  <a href="#" class="btn btn-small">Lorem ipsum</a></div>

Block Person Empty

Lorem Ipsum

Lorem ipsum

This pattern contains: atoms-text-span atoms-button-small

HTML

									
										<div class="person">

  <p class="person_name">
      <span >Lorem Ipsum</span>  </p>
    <p class='byline'>Lorem Ipsum</p>  <a href="#" class="btn btn-small">Lorem ipsum</a></div>

Block Image Headline Excerpt

Lorem ipsum dolor sit (37 characters)

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris ni (210 characters)

HTML

									
										<div class="thumbBlock">
  <h2 class='thumbBlock_title'>Lorem ipsum dolor sit (37 characters)</h2>  <a class="thumbBlock_figure" href="#">
    <img class='thumbBlock_thumb' src="../../images/fpo_4x3.png" alt="4x3 Image" />  </a>
  <div class="thumbBlock_body">
    <p class='thumbBlock_text'>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris ni (210 characters)</p>  </div>
</div>

Block Headline Button

Lorem ipsum dolor sit (37 characters)

Lorem ipsum

This pattern contains: atoms-button-text

HTML

									
										<div class="headlineBlock">
  <h2 class='headlineBlock_title'>Lorem ipsum dolor sit (37 characters)</h2>  <a href="#" class="btn-text">Lorem ipsum</a></div>

Block Link

Lorem ipsum dolor sit (37 characters)

HTML

									
										<a class="blockLink" href="#">Lorem ipsum dolor sit (37 characters)</a>

Block Contact

Servizio Relazioni Internazionali

Universitätsplatz 1 - piazza Università, 1

I - 39100 Bozen-Bolzano

Tel +39 0471 012500

Fax +39 0471 012509

international.relations@unibz.it

Orari di apertura

InfoPoint A1.01

Lunedí 14:00 – 16:00

Martedí e giovedí 10:00 – 12:30

HTML

									
										<div class="contactBlock">
  <div class="contactBlock_elem contactBlock_info">
    <p class="elem_item">Servizio Relazioni Internazionali</p>
    <p class="elem_item">Universitätsplatz 1 - piazza Università, 1</p>
    <p class="elem_item">I - 39100 Bozen-Bolzano</p>
    <p class="elem_item">Tel +39 0471 012500</p>
    <p class="elem_item">Fax +39 0471 012509</p>
    <a href="#">international.relations@unibz.it</a>
  </div>
  <div class="contactBlock_elem contactBlock_time">
    <p>Orari di apertura</p>
    <p class="elem_item">InfoPoint A1.01</p>
    <p class="elem_item">Lunedí 14:00 – 16:00</p>
    <p class="elem_item">Martedí e giovedí 10:00 – 12:30</p>
  </div>
</div>

Block Lecture

8 CFU

Lorem Ipsum

HTML

									
										<div class="blockLecture">
  <span class="byline">8 CFU</span>
  <h4 class="blockLecture_title">Lorem Ipsum</h4>
  <!-- <a class="btn-text" href="#">Name Surname</a> -->
</div>