Typography Components

Heading Levels

Heading Levels: start copy

Heading Level 1

Header 2 / Helvetica Bold / 30 pt / 36 pt Line-Height

Header 3 / Helvetica Bold / 26 pt / 34 pt Line-Height

Header 4 / Helvetica Bold / 21 pt / 30 pt Line-Height

Header 5 / Helvetica Bold / 19 pt / 28 pt Line-Height

Heading Levels: end copy

Paragraph text

Paragraph text: start copy

Single column body text appears in a narrower column to improve readability. Lorem ipsum dolor amet, consectetur adipiscing elit. Mauris ornare luctus dui, eu luctus enim pellentesque et. Pellentesque lacinia et neque ut dignissim. Suspendisse euismod risus nec magna efficitur ultrices.

Paragraph text: end copy

Lead text (.lead)

Lead text: start copy

Lead text 21pt. Lead text can be used to begin a content page to draw the learner’s attention to a critical point. It can also be attention catching fact.

Lead text: end copy

Emphasis text (.emphasis)

Emphasis text: start copy

Open Sans Bold / 21 pt / 30pt line-height.

Emphasis text is used as a critical point to focus the learner’s attention on the page.

Emphasis text: end copy

Instruction text (.instruction)

Instruction text: start copy

Open Sans Bold / 19 pt / 28pt Leading

Required action by the user. Select each item below to learn more.

Instruction text: end copy

Blockquote Long Form

Blockquote Long Form: start copy

“Blockquote long form, best used for longer lines of text. The blockquote element represents a section that is quoted from another source. Lorem ipsum dolor sit amet, consectetur adipiscing elit.”

Blockquote footer text Citation: Source title

Blockquote Long Form: end copy

Blockquote Short Form

Blockquote Short Form: start copy

“Blockquote short form, best used for short lines of text.”

Blockquote footer text Citation: Source title

Blockquote Short Form: end copy

Links

Internal Link

Internal Link: start copy

This is an Internal Link.

Internal Link: end copy

External Link

External Link: start copy

This is an External Link.

External Link: end copy

Download Link

Download Link: start copy

This is a Download Link.

Download Link: end copy

Unordered List

Unordered List: start copy

  • List item
    1. item
    2. item
  • List item
    • item
    • item
  • List item
  • List item

Unordered List: end copy

Ordered List

Ordered List: start copy

  1. List item
    1. item
    2. item
  2. List item
    • item
    • item
  3. List item
  4. List item

Ordered List: end copy

Ordered List: Large Number

Ordered List: Large Number: start copy

  1. List item Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dolore, quam sit molestiae voluptatum laboriosam sint nostrum aliquid facilis natus iste laborum dolorem tenetur laudantium eius reprehenderit quos ea, fugit aliquam?
    1. item Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nemo repellendus deleniti eius quaerat commodi explicabo debitis quam magnam voluptates, reiciendis nobis, fugit ea rerum! Consectetur itaque corporis nisi aut autem.
    2. item
  2. List item
    • item Lorem ipsum dolor sit amet consectetur, adipisicing elit. Laboriosam nisi voluptatem optio rem cumque iste itaque pariatur earum sapiente, ea explicabo natus libero sed porro? Necessitatibus eaque cumque ipsum consectetur.
    • item
  3. List item
  4. List item

Ordered List: Large Number: end copy

Unordered List: Check List

Unordered List: Check List: start copy

  • List item Lorem ipsum dolor sit amet consectetur adipisicing elit. Odit dolorum qui consequatur iure dolores aliquam obcaecati at rerum non, veniam et magni asperiores optio cupiditate exercitationem possimus recusandae nulla unde!
    1. item Lorem ipsum dolor sit amet consectetur adipisicing elit. Perferendis natus magnam in provident? Molestias, autem suscipit dicta facere animi fugit ea amet minus nam numquam. Odio architecto reprehenderit libero voluptates.
    2. item
  • List item
    • item Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus at tenetur quam quibusdam id quis libero amet ratione nihil doloribus laborum similique mollitia cumque velit nisi, dolorem quaerat iusto ipsam.
    • item
  • List item
  • List item

Unordered List: Check List: end copy

Unordered List: X List

Unordered List: X List: start copy

  • List item
    1. item
    2. item
  • List item
    • item
    • item
  • List item
  • List item

Unordered List: X List: end copy