Font Families

Font families can be added via _type.scss and imported to this list via styleguide/_scss2json.scss.

Family: $font-family-base

Fonts: Noto Sans JP, -apple-system, BlinkMacSystemFont, Array, Roboto, Array, Arial, sans-serif, Array, Array, Array

            
  .class {
    font-family: $font-family-base;
  }

Regular

Qui quibusdam sapiente dolorem veritatis fuga.

Bold

Qui quibusdam sapiente dolorem veritatis fuga.

Italic

Qui quibusdam sapiente dolorem veritatis fuga.

Family: $font-family-monospace

Fonts: SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace

            
  .class {
    font-family: $font-family-monospace;
  }

Regular

Qui quibusdam sapiente dolorem veritatis fuga.

Bold

Qui quibusdam sapiente dolorem veritatis fuga.

Italic

Qui quibusdam sapiente dolorem veritatis fuga.

Font Sizes

Font sizes can be added via _type.scss and imported to this list via styleguide/_scss2json.scss.

    Sm: 0.875rem

    officia a maiores eius veritatis fuga non

    Lg: 1.25rem

    officia a maiores eius veritatis fuga non

    Base: 1rem

    officia a maiores eius veritatis fuga non

Headings

These are heading styles, including both element and classed version. Use the element version in markup following Accessibility guidelines. Use the class version to match font styling of heading. See WebAim for details.

Header Code

fugiat nihil voluptatem

 <h1 contenteditable>h1. fugiat nihil voluptatem</h1>

fugiat nihil voluptatem

 <h2 contenteditable>h1. fugiat nihil voluptatem</h2>

fugiat nihil voluptatem

 <h3 contenteditable>h1. fugiat nihil voluptatem</h3>

fugiat nihil voluptatem

 <h4 contenteditable>h1. fugiat nihil voluptatem</h4>
fugiat nihil voluptatem
 <h5 contenteditable>h1. fugiat nihil voluptatem</h5>
fugiat nihil voluptatem
 <h6 contenteditable>h1. fugiat nihil voluptatem</h6>

You can use these as either the element or as a class. For example:

Paragraph Code

fugiat nihil voluptatem

 <p class="h1">p1. fugiat nihil voluptatem</p>

fugiat nihil voluptatem

 <p class="h2">p2. fugiat nihil voluptatem</p>

fugiat nihil voluptatem

 <p class="h3">p3. fugiat nihil voluptatem</p>

fugiat nihil voluptatem

 <p class="h4">p4. fugiat nihil voluptatem</p>

fugiat nihil voluptatem

 <p class="h5">p5. fugiat nihil voluptatem</p>

fugiat nihil voluptatem

 <p class="h6">p6. fugiat nihil voluptatem</p>

Display headings

Bootstrap style for larger headlines. For example:

Display Heading Code

maiores atque

 <h1 class="display-1">maiores atque</h1>

maiores atque

 <h1 class="display-2">maiores atque</h1>

maiores atque

 <h1 class="display-3">maiores atque</h1>

maiores atque

 <h1 class="display-4">maiores atque</h1>

Text Styles

Lead

A paragraph p class to help text standout. Ut eum autem aperiam debitis iste adipisci nemo dolorem. Adipisci placeat ut voluptatem at laborum.

          
  <p class="lead">
    Qui quibusdam sapiente dolorem veritatis fuga.
  </p>

Paragraphs

Paragraph One Tenetur consequatur quisquam cum illo eligendi dolores eaque fugit. Unde et sunt velit eos asperiores ipsa. Eligendi qui dolores modi tempora. Qui eos et sit sit voluptatem quasi. Est nam vitae impedit nisi quisquam accusamus. Harum vel nihil non dicta in.

Paragraph Two after an hr Tenetur consequatur quisquam cum illo eligendi dolores eaque fugit. Unde et sunt velit eos asperiores ipsa. Eligendi qui dolores modi tempora. Qui eos et sit sit voluptatem quasi. Est nam vitae impedit nisi quisquam accusamus. Harum vel nihil non dicta in.

Header + Paragraphs

Header 1

Paragraph following an h1Tenetur consequatur quisquam cum illo eligendi dolores eaque fugit. Unde et sunt velit eos asperiores ipsa. Eligendi qui dolores modi tempora. Qui eos et sit sit voluptatem quasi. Est nam vitae impedit nisi quisquam accusamus. Harum vel nihil non dicta in.

Header 2

Paragraph following an h2Tenetur consequatur quisquam cum illo eligendi dolores eaque fugit. Unde et sunt velit eos asperiores ipsa. Eligendi qui dolores modi tempora. Qui eos et sit sit voluptatem quasi. Est nam vitae impedit nisi quisquam accusamus. Harum vel nihil non dicta in.

Header 3

Paragraph following an h3Tenetur consequatur quisquam cum illo eligendi dolores eaque fugit. Unde et sunt velit eos asperiores ipsa. Eligendi qui dolores modi tempora. Qui eos et sit sit voluptatem quasi. Est nam vitae impedit nisi quisquam accusamus. Harum vel nihil non dicta in.

Header 4

Paragraph following an h4Tenetur consequatur quisquam cum illo eligendi dolores eaque fugit. Unde et sunt velit eos asperiores ipsa. Eligendi qui dolores modi tempora. Qui eos et sit sit voluptatem quasi. Est nam vitae impedit nisi quisquam accusamus. Harum vel nihil non dicta in.

Header 5

Paragraph following an h5Tenetur consequatur quisquam cum illo eligendi dolores eaque fugit. Unde et sunt velit eos asperiores ipsa. Eligendi qui dolores modi tempora. Qui eos et sit sit voluptatem quasi. Est nam vitae impedit nisi quisquam accusamus. Harum vel nihil non dicta in.

Header 6

Paragraph following an h6Tenetur consequatur quisquam cum illo eligendi dolores eaque fugit. Unde et sunt velit eos asperiores ipsa. Eligendi qui dolores modi tempora. Qui eos et sit sit voluptatem quasi. Est nam vitae impedit nisi quisquam accusamus. Harum vel nihil non dicta in.

Misc

This is a text link.

Italic text is used for stylistic purposes in i

This text has added emphasis in em

Bolded text is used for stylistic purposes in b

Strong is used to indicate strong importance in strong

This text is superscript

This text is subscript

A block quotation (also known as a long quotation or extract) is a quotation in a written document, that is set off from the main text as a paragraph, or block of text, and typically distinguished visually using indentation and a different typeface or smaller size quotation.

Lists

  • This is a list item in an Unordered List
  • An unordered list is a list in which the sequence of items is not important. Sometimes, an unordered list is a bulleted list. And this is a long list item in an unordered list that can wrap onto a new line.
  • Lists can be nested inside of each other
    • This is a nested list item
    • This is another nested list item in an unordered list
  • This is the last list item
  1. This is a list item in an Ordered List
  2. An ordered list is a list in which the sequence of items is important. An ordered list does not necessarily contain sequence characters.
  3. Lists can be nested inside of each other
    1. This is a nested list item
    2. This is another nested list item in an ordered list
  4. This is the last list item
Definition List
A number of connected items or names written or printed consecutively, typically one below the other.
This is a term.
This is the definition of that term, which both live in a dl.
Here is another term.
And it gets a definition too, which is this line.
Here is term that shares a definition with the term below.
And it gets a definition too, which is this line.