Skip to main content

Typography

Typographic styling is acheived through opt-in classes. Elements can inherit styles from .copy--body or otherwise applied directly. Typographic elements do not come with any margins attached to them in order to make them more flexible in where they can be used.

Headings

Header sizes are defined from h1 to h6. Utility classes are provied that range from .heading-level-1 to .heading-level-1 for sizing blocks of text. Headers and text sizing classes have no margins or padding by default.

h1, .heading-level-1

Heading Level 1

h2, .heading-level-2

Heading Level 2

h3, .heading-level-3

Heading Level 3

h4, .heading-level-4

Heading Level 4

h5, .heading-level-5

Heading Level 5

h6, .heading-level-6

Heading Level 6

Paragraphs

.copy--feature

Feature text is typically used for intro paragraphs where we want the text to stand out from the body copy.

p .copy--body

Here is a bunch of body copy. It can be inherited from the base <p> element, or applied directly using .copy--body class.

.copy--caption

Caption text is used primarily below images

.copy--disclaimer

Disclaimer text is used for legal and copyright text.

.copy--pullquote

“A pull quote features an important or impactful sentence from the content piece.”

Lists

ol
  1. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  2. Quisque fringilla tortor ex, vel tincidunt justo iaculis at. Nulla eu hendrerit quam. Maecenas vel tempus odio, non hendrerit augue.
  3. Etiam sit amet tempor velit, at hendrerit dui. Donec vestibulum elit id nulla vestibulum fringilla.
ul
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  • Quisque fringilla tortor ex, vel tincidunt justo iaculis at. Nulla eu hendrerit quam. Maecenas vel tempus odio, non hendrerit augue.
  • Etiam sit amet tempor velit, at hendrerit dui. Donec vestibulum elit id nulla vestibulum fringilla.