Typography

Headings

All HTML headings, <h1> through <h6> are available. For small headings for best readability we recommend to use this classes: class="bolder" or class="upper"

[columns][column type=”1/3″]

H1 Heading

H2 Heading

H3 Heading

H4 Heading

H5 Heading

H6 Heading

[/column][column type=”1/3″]

H1 Heading

H2 Heading

H3 Heading

H4 Heading

H5 Heading

H6 Heading

[/column][column type=”1/3″]

H1 Heading

H2 Heading

H3 Heading

H4 Heading

H5 Heading

H6 Heading

[/column][/columns]

Headline

Fusce venenatis malesuada lectus, eu tempor nisi varius et. Quisque aliquet lacus in felis pellentesque mattis. Pellentesque eu lacinia urna. Sed dictum tortor id sagittis placerat.

<p class="headline">...</p>

Emphasis

Make use of HTML’s default emphasis tags with lightweight styles.

Small text

For de-emphasizing inline or blocks of text, use the <small> tag to set text at 85% the size of the parent.

This line of text is meant to be treated as fine print.

<p>
  <small>This line of text is meant to be treated as fine print.</small>
</p>

Bold

For emphasizing a snippet of text with a heavier font-weight. The following snippet of text is rendered as bold text.

<strong>rendered as bold text</strong>

Italics

The following snippet of text is rendered as italicized text.

<em>rendered as italicized text</em>

Emphasis classes

Convey meaning through color with a handful of emphasis utility classes.

Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.

Etiam porta sem malesuada magna mollis euismod.

Donec ullamcorper nulla non metus auctor fringilla.

Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis.

Duis mollis, est non commodo luctus, nisi erat porttitor ligula.

<p class="muted">Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.</p>
<p class="text-warning">Etiam porta sem malesuada magna mollis euismod.</p>
<p class="text-error">Donec ullamcorper nulla non metus auctor fringilla.</p>
<p class="text-info">Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis.</p>
<p class="text-success">Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>

Blockquotes

For quoting blocks of content from another source within your document.

Nulla facilisi. Nam blandit tortor ac risus tempus dapibus. Vestibulum laoreet augue eu sem posuere varius. Aliquam erat volutpat. Integer luctus odio vitae fringilla blandit. Praesent quis enim et augue facilisis vehicula. Aliquam ligula sapien, laoreet vel ultrices at, commodo laoreet odioSomeone famous Source Title

<blockquote>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
  <small>Someone famous <cite title="Source Title">Source Title</cite></small>
</blockquote>

Lists

[columns][column type=”1/3″]

Unordered

A list of items in which the order does not explicitly matter.

Integer molestie
Facilisis in pretium nisl aliquet
Nulla volutpat aliquam velit
- Phasellus iaculis neque
- Vestibulum laoreet porttitor sem
Faucibus porta lacus fringilla vel
Aenean sit amet erat nunc

<ul>
  <li>...</li>
</ul>

[/column][column type=”1/3″]

Ordered

A list of items in which the order does explicitly matter.

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Integer molestie lorem at massa
Facilisis in pretium nisl aliquet
Nulla volutpat aliquam velit
Faucibus porta lacus fringilla vel
Aenean sit amet erat nunc

<ol>
  <li>...</li>
</ol>

[/column][column type=”1/3″]

Unstyled

Remove the default list-style and left margin on list items (immediate children only).

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Integer molestie lorem at massa
Facilisis in pretium nisl aliquet
Nulla volutpat aliquam velit
Faucibus porta lacus fringilla vel
Aenean sit amet erat nunc

<ul class="unstyled">
  <li>...</li>
</ul>

[/column][/columns]

Grid system

[columns][column type=”1/2″]

One half

[columns][column type=”1/3″]

One third

[columns][column type=”1/3″]

One third

Two third

Fusce venenatis malesuada lectus, eu tempor nisi varius et. Quisque aliquet lacus in felis pellentesque mattis. Pellentesque eu lacinia urna. Sed dictum tortor id sagittis placerat. Fusce venenatis malesuada lectus, eu tempor nisi varius et. Quisque aliquet lacus in felis pellentesque mattis. Pellentesque eu lacinia urna. Sed dictum tortor id sagittis placerat.
[/column][/columns]

[columns][column type=”1/4″]

One fourth

Fusce venenatis malesuada lectus, eu tempor nisi varius et. Quisque aliquet lacus in felis pellentesque mattis.
[/column][column type=”1/4″]

One fourth

Fusce venenatis malesuada lectus, eu tempor nisi varius et. Quisque aliquet lacus in felis pellentesque mattis.
[/column][column type=”1/4″]

One fourth

Fusce venenatis malesuada lectus, eu tempor nisi varius et. Quisque aliquet lacus in felis pellentesque mattis.
[/column][column type=”1/4″]

One fourth

Fusce venenatis malesuada lectus, eu tempor nisi varius et. Quisque aliquet lacus in felis pellentesque mattis.
[/column][/columns]

[columns][column type=”1/6″]