Typography

Typographical styles that help you to structure your content.

Headings

Heading Level 1

Heading Level 2

Heading Level 3

Heading Level 4

Heading Level 5
Heading Level 6

Text Styles

This is a lead-in sentence. Use it at the beginning of a page to provide context.

This is what regular paragraph text looks like. Any large portions of text should be set at the regular text size (19px) in order to increase readability.

Detail text can be used for secondary ui elements.

Larger text is helpful for primary menu items.

Inline Styles

As a best practice, you should use emphasis and strong text over italic and bold text.

This is italicized text

This is emphasized text

This is bold text

This is strong text

This is linked text

Blockquotes

The blockquote element represents a section that is quoted from another source. Blockquotes are also sometimes referred to in publishing as 'pullquotes'.

Lists

Outside of <article> elements, lists are unstyled by default. To use styled lists outside of <article> elements, use the following classes:

  • .list-decimal
  • .list-bulleted
  1. Ordered list item
  2. Ordered list item
  3. Ordered list item
  • Unordered list item
  • Unordered list item
  • Unordered list item

Asides

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores ipsa voluptatem consequuntur, mollitia soluta, quasi ducimus voluptate vitae eum nulla ad aliquid, saepe reprehenderit. Dolorem, voluptates, corrupti? Labore, rem, incidunt? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque maiores quas, adipisci cum voluptate vero necessitatibus animi iure similique? Illo, impedit reiciendis cumque saepe ut quaerat odio dolorum sapiente. Delectus.

Tables

Row 1 Row 2 Row 3
item 1 item 2 item 3
item 1 item 2 item 3
item 1 item 2 item 3