Typography

Heading (html tag)

Basic h1

Basic h2

Basic h3

Basic h4

Basic h5

Basic h6

<h1>Basic h1</h1>
<h2>Basic h2</h2>
<h3>Basic h3</h3>
<h4>Basic h4</h4>
<h5>Basic h5</h5>
<h6>Basic h6</h6>

Body text (html tag)

Etiam porta sem malesuada magna mollis euismod. Nulla vitae elit libero, a pharetra augue. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Etiam porta sem malesuada magna mollis euismod. Cras mattis consectetur purus sit amet fermentum. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.

Nulla vitae elit libero, a pharetra augue.

<p>Etiam porta sem malesuada magna mollis euismod. Nulla vitae elit libero, a pharetra augue. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Etiam porta sem malesuada magna mollis euismod. Cras mattis consectetur purus sit amet fermentum. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
<p>Etiam porta sem malesuada magna mollis euismod. Nulla vitae elit libero, a pharetra augue. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Etiam porta sem malesuada magna mollis euismod. Cras mattis consectetur purus sit amet fermentum. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
<small>Nulla vitae elit libero, a pharetra augue.</small>

List

<ul>, <ol> and <li> have a default style. Reset list are detailed in Utility classes.

<ul>
  <li>Foo</li>
  <li>Bar</li>
</ul>
<ol>
  <li>Foo</li>
  <li>Bar</li>
</ol>

Paragraph

Coda codum codae

Published a few centuries ago by Julius Caesar.

Paragraph: lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat: go to link

<p class="t-title">Coda codum codae</p>
<p class="t-caption">Published a few centuries ago by <a href="#">Julius Caesar</a>.</p>
<p>Paragraph: <strong>lorem ipsum dolor</strong> sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat: <a href="#">go to link</a></p>

Div colorizers

Neutral

Primary

Alt

Validate

Info

Error

<div class="u-neutral">Neutral</div>
<div class="u-primary">Primary</div>
<div class="u-alt">Alt</div>
<div class="u-validate">Validate</div>
<div class="u-info">Info</div>
<div class="u-error">Error</div>

Text colorizers

Neutral Primary Alt Validate Info Error

<span class="t-neutral"><i class="Icon Icon--pellet"></i> Neutral</span>
<span class="t-primary"><i class="Icon Icon--pellet"></i> Primary</span>
<span class="t-alt"><i class="Icon Icon--pellet"></i> Alt</span>
<span class="t-validate"><i class="Icon Icon--pellet"></i> Validate</span>
<span class="t-info"><i class="Icon Icon--pellet"></i> Info</span>
<span class="t-error"><i class="Icon Icon--pellet"></i> Error</span>

Lines

<hr class="Line">

<div class="Line Line--labeled">
  <div class="Line-label">or</div>
</div>

<div class="Line Line--inline">
  <div class="Line-label">or</div>
</div>

Links

Link Link Link Link Link Link Link

<a href="#">Link</a>
<a class="t-link" href="#">Link</a>
<a class="t-link t-validate" href="#">Link</a>
<a class="t-link t-link--alt" href="#">Link</a>
<a class="t-link" href="#"><small>Link</small></a>
<a class="t-link t-validate" href="#"><small>Link</small></a>
<a class="t-link t-link--alt" href="#"><small>Link</small></a>

Current version: 1.9.9Components