Typography

Basic headings

H1 Heading

H2 Heading

H3 Heading

H4 Heading

H5 Heading
H6 Heading

Custom styles

These styles were primarily intended for headings, but may be used on any text:

class="thin"

Thin header

class="underline"

Underline

To make text bigger on a particular element:

class="big-text"

A paragraph with bigger text

Paragraphs

Default paragraph

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.

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.

class="left-border"

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.

class="boxed left-border"

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.

class="wrapped"

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.

Unordred & ordered lists

Default list
  • Unstyled list
  • Unstyled list
  • Unstyled list
class="bullet-list"
  • Bullet list
  • Bullet list
  • Bullet list
Ordered list
  1. Ordered list
  2. Ordered list
  3. Ordered list

Other lists

class="definition"
Term
Term definition
Term
Term definition
Term
Term definition
class="definition inline"
Term
Term definition
Term
Term definition
Term
Term definition

Definitions lists are based on a <dl> markup:

<dl class="definition inline">
	<dt>Term</dt>
	<dd>Term definition</dd>
</dl>

Other elements

Version history
  • New New element
  • Fixed Fixed element
  • Upg. Upgraded element
<ul class="version-history">
	<li><span class="version-new">New</span> New element</li>
	<li><span class="version-fixed">Fixed</span> Fixed element</li>
	<li><span class="version-upgraded">Upg.</span> Upgraded element</li>
</ul>
Tags

Tag Tag Tag

<span class="tag">Tag</span> <span class="tag orange-bg">Tag</span> <span class="tag red-bg">Tag</span>
Small tags

Tag Tag Tag

<small class="tag">Tag</small> <small class="tag orange-bg">Tag</small> <small class="tag red-bg">Tag</small>