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

									
										<ul class="sg-colors">
  <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>
									
								

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: "utopia-std", Georgia, Times, "Times New Roman", serif;

Secondary font italic: "utopia-std", Georgia, Times, "Times New Roman", serif;

Secondary font bold: "utopia-std", Georgia, Times, "Times New Roman", serif;

									
										<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: "utopia-std", Georgia, Times, "Times New Roman", serif;</p>
<p class="font-secondary"><em>Secondary font italic: "utopia-std", Georgia, Times, "Times New Roman", serif;</em></p>
<p class="font-secondary"><strong>Secondary font bold: "utopia-std", Georgia, Times, "Times New Roman", serif;</strong></p>
									
								

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

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

Lorem ipsum dolor sit (37 characters)

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

Lorem ipsum dolor sit (37 characters)

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

Lorem ipsum dolor sit (37 characters)

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

Lorem ipsum dolor sit (37 characters)

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

Lorem ipsum dolor sit (37 characters)

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

Lorem ipsum dolor sit (37 characters)

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

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

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)

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

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

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

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 { | } ~ 

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

Definition List

A number of connected items or names written or printed consecutively, typically one below the other.

This is a term.

This is the definition of that term, which both live in a dl.

Here is another term.

And it gets a definition too, which is this line.

Here is term that shares a definition with the term below.

And it gets a definition too, which is this line.

									
										<dl>
	<dt>Definition List</dt>
	<dd>A number of connected items or names written or printed consecutively, typically one below the other.</dd>
    <dt>This is a term.</dt>
    <dd>This is the definition of that term, which both live in a <code>dl</code>.</dd>
    <dt>Here is another term.</dt>
    <dd>And it gets a definition too, which is this line.</dd>
    <dt>Here is term that shares a definition with the term below.</dt>
    <dd>And it gets a definition too, which is this line.</dd>
</dl>
									
								

Lorem ipsum

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

Lorem ipsum dolor sit (37 characters)

Lorem ipsum dolor sit (37 characters)

									
										<span class='tag'>Lorem</span><h1 class="h2">Lorem ipsum dolor sit (37 characters)</h1>
<h2 class="h5">Lorem ipsum dolor sit (37 characters)</h2>
									
								

A block quotation (also known as a long quotation or extract) is a quotation in a written document, that is set off from the main text as a paragraph, or block of text, and typically distinguished visually using indentation and a different typeface or smaller size quotation.

Quote Source

									
										<blockquote>
  <p>
    A block quotation (also known as a long quotation or extract) is a quotation in a written document, that is set off from the main text as a paragraph, or block of text, and typically distinguished visually using indentation and a different typeface or smaller size quotation.
  </p>
	<cite class="citation">Quote Source</cite>
</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)

									
										<p class="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>