Typography

Font

The font used is Source Sans Pro, a sans-serif typeface intended to work well in user interfaces. It’s available for free from the Google Fonts library.

Kitchen sink

h1

h1 heading

h2

h2 heading

h3

h3 heading

h4

h4 heading

h5

h5 heading

h6

h6 heading

Unordered list

  • list item
  • list item
  • list item
    • nested list item
  • list item

Ordered list

  1. list item
  2. list item
  3. list item
    1. nested list item
  4. list item

Nested lists

  • list item
  • list item
  • list item
    1. nested list item
  • list item
  1. list item
  2. list item
  3. list item
    • nested list item
  4. list item

Large body text

Paragraph text with lorem ipsum dolor sit amet, m2 consectetur adipisicing elit8. Aliquid accusamus quod cum dicta numquam, similique iure quibusdam repudiandae deleniti asperiores.

Default body text

Paragraph text with lorem ipsum dolor sit amet, m2 consectetur adipisicing elit8. Aliquid accusamus quod cum dicta numquam, similique iure quibusdam repudiandae deleniti asperiores.

Blockquote

Type is a beautiful group of letters, not a group of beautiful letters.

Some
	text in pre


.kitchen-sink {
	display: block;
}
<code>

Horizontal rule

Contextual helper classes

If you want to style certain parts that are not a specific part of a module, we have helper classes available to make your development life easier.

Text in success color. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore, excepturi.

Text in warning color. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore, excepturi.

Text in error color. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore, excepturi.

Text in muted color. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore, excepturi.

Larger body text Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda officia excepturi itaque temporibus vitae consectetur consequatur, ipsum inventore facere? Fugit!

Centered text Lorem ipsum dolor sit amet, consectetur adipisicing elit. Esse, maiores?

Right aligned text. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est, odit!

<p class="text--success">...</p>
<p class="text--warning">...</p>
<p class="text--error">...</p>
<p class="text--muted">...</p>
<p class="text--large">...</p>
<p class="text--centered">...</p>
<p class="text--right">...</p>