Free University of Bozen-Bolzano

Colors

#007be4 Unibz
#f86b07 Comp Science
#ed331a Des Art
#6cc3ab Edu
#ac145a Eco
#1a8c64 Science Tech
#e1a22e Library
#ffffff
#dddddd
#000000

HTML

									
										<ul class="sg-colors list-reset">
  <li>
    <span class="sg-swatch" style="background: #007be4;"></span>
    <span class="sg-label">#007be4</span>
    <span class="sg-label">Unibz</span>
  </li>
  <li>
    <span class="sg-swatch" style="background: #f86b07;"></span>
    <span class="sg-label">#f86b07</span>
    <span class="sg-label">Comp Science</span>
  </li>
  <li>
    <span class="sg-swatch" style="background: #ed331a;"></span>
    <span class="sg-label">#ed331a</span>
    <span class="sg-label">Des Art</span>
  </li>
  <li>
    <span class="sg-swatch" style="background: #6cc3ab;"></span>
    <span class="sg-label">#6cc3ab</span>
    <span class="sg-label">Edu</span>
  </li>
  <li>
    <span class="sg-swatch" style="background: #ac145a;"></span>
    <span class="sg-label">#ac145a</span>
    <span class="sg-label">Eco</span>
  </li>
  <li>
    <span class="sg-swatch" style="background: #1a8c64;"></span>
    <span class="sg-label">#1a8c64</span>
    <span class="sg-label">Science Tech</span>
  </li>
  <li>
    <span class="sg-swatch" style="background: #e1a22e;"></span>
    <span class="sg-label">#e1a22e</span>
    <span class="sg-label">Library</span>
  </li>
  <li>
    <span class="sg-swatch" style="background: #ffffff;"></span>
    <span class="sg-label">#ffffff</span>
  </li>
  <li>
    <span class="sg-swatch" style="background: #dddddd;"></span>
    <span class="sg-label">#dddddd</span>
  </li>
  <li>
    <span class="sg-swatch" style="background: #000000;"></span>
    <span class="sg-label">#000000</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>

Animations

Fade: Duration: 0.8s Easing: ease-out (Hover to see effect)

Movement: Duration: 0.8s Easing: cubic-bezier(.55,0,.1,1); (Hover to see effect)

HTML

									
										<div class="demo-animate animate-fade"><strong>Fade:</strong> Duration: 0.8s Easing: ease-out (Hover to see effect)</div>

<div class="demo-animate animate-move"><div class="demo-shape"></div><strong>Movement:</strong> Duration: 0.8s  Easing: cubic-bezier(.55,0,.1,1); (Hover to see effect)</div>

Visibility

This text is hidden on smaller screens

This text is only visible on smaller screens

This text is hidden on medium screens only

This text is only visible on medium screens

This text is hidden on large screens

This text is only visible on large screens

HTML

									
										<p class="u-hide u-sm-blk">This text is hidden on smaller screens</p>
<p class="u-sm-hide"><em>This text is only visible on smaller screens</em></p>
<p class="u-md-hide">This text is hidden on medium screens only</p>
<p class="u-hide u-md-blk u-lg-hide"><em>This text is only visible on medium screens</em></p>
<p class="u-lg-hide">This text is hidden on large screens</p>
<p class="u-hide u-lg-blk"><em>This text is only visible on large screens</em></p>