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

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

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;

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

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

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>
									
								

• 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

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

1. This is a list item in an ordered list
2. An ordered list is a list in which the sequence of items is important. An ordered list does not necessarily contain sequence characters.
3. 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
4. This is the last list item

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

Lorem ipsum

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

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

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