Typography
DISPLAY HEADINGS

Traditional heading elements are designed to work best in the meat of your page content. When you need a heading to stand out, consider using a display heading—a larger, slightly more opinionated heading style.

Display 1

Nullam Facilisis Elit Velit, In Rutrum Felis Iaculis A. In Hac Habitasse Platea Dictumst. Cras Mi Libero, Iaculis Ac Diam Eget, Tristique Vestibulum Sem. Pellentesque Lobortis Vel Enim Non Tincidunt. Nam Pharetra Pellentesque Viverra.

Display 2

Nullam Facilisis Elit Velit, In Rutrum Felis Iaculis A. In Hac Habitasse Platea Dictumst. Cras Mi Libero, Iaculis Ac Diam Eget, Tristique Vestibulum Sem. Pellentesque Lobortis Vel Enim Non Tincidunt. Nam Pharetra Pellentesque Viverra.

Display 3

Nullam Facilisis Elit Velit, In Rutrum Felis Iaculis A. In Hac Habitasse Platea Dictumst. Cras Mi Libero, Iaculis Ac Diam Eget, Tristique Vestibulum Sem. Pellentesque Lobortis Vel Enim Non Tincidunt. Nam Pharetra Pellentesque Viverra.

Display 4

Nullam Facilisis Elit Velit, In Rutrum Felis Iaculis A. In Hac Habitasse Platea Dictumst. Cras Mi Libero, Iaculis Ac Diam Eget, Tristique Vestibulum Sem. Pellentesque Lobortis Vel Enim Non Tincidunt. Nam Pharetra Pellentesque Viverra.

Display 5

Nullam Facilisis Elit Velit, In Rutrum Felis Iaculis A. In Hac Habitasse Platea Dictumst. Cras Mi Libero, Iaculis Ac Diam Eget, Tristique Vestibulum Sem. Pellentesque Lobortis Vel Enim Non Tincidunt. Nam Pharetra Pellentesque Viverra.

Display 6

Nullam Facilisis Elit Velit, In Rutrum Felis Iaculis A. In Hac Habitasse Platea Dictumst. Cras Mi Libero, Iaculis Ac Diam Eget, Tristique Vestibulum Sem. Pellentesque Lobortis Vel Enim Non Tincidunt. Nam Pharetra Pellentesque Viverra.

				

Display 1

Nullam Facilisis Elit Velit, In Rutrum Felis Iaculis A. In Hac Habitasse Platea Dictumst. Cras Mi Libero, Iaculis Ac Diam Eget, Tristique Vestibulum Sem. Pellentesque Lobortis Vel Enim Non Tincidunt. Nam Pharetra Pellentesque Viverra.

Display 2

Nullam Facilisis Elit Velit, In Rutrum Felis Iaculis A. In Hac Habitasse Platea Dictumst. Cras Mi Libero, Iaculis Ac Diam Eget, Tristique Vestibulum Sem. Pellentesque Lobortis Vel Enim Non Tincidunt. Nam Pharetra Pellentesque Viverra.

Display 3

Nullam Facilisis Elit Velit, In Rutrum Felis Iaculis A. In Hac Habitasse Platea Dictumst. Cras Mi Libero, Iaculis Ac Diam Eget, Tristique Vestibulum Sem. Pellentesque Lobortis Vel Enim Non Tincidunt. Nam Pharetra Pellentesque Viverra.

Display 4

Nullam Facilisis Elit Velit, In Rutrum Felis Iaculis A. In Hac Habitasse Platea Dictumst. Cras Mi Libero, Iaculis Ac Diam Eget, Tristique Vestibulum Sem. Pellentesque Lobortis Vel Enim Non Tincidunt. Nam Pharetra Pellentesque Viverra.

Display 5

Nullam Facilisis Elit Velit, In Rutrum Felis Iaculis A. In Hac Habitasse Platea Dictumst. Cras Mi Libero, Iaculis Ac Diam Eget, Tristique Vestibulum Sem. Pellentesque Lobortis Vel Enim Non Tincidunt. Nam Pharetra Pellentesque Viverra.

Display 6

Nullam Facilisis Elit Velit, In Rutrum Felis Iaculis A. In Hac Habitasse Platea Dictumst. Cras Mi Libero, Iaculis Ac Diam Eget, Tristique Vestibulum Sem. Pellentesque Lobortis Vel Enim Non Tincidunt. Nam Pharetra Pellentesque Viverra.

INLINE TEXT ELEMENTS

Styling for common inline HTML5 elements.

Your title goes here

You can use the mark tag to highlight text.

This line of text is meant to be treated as deleted text.

This line of text is meant to be treated as no longer accurate.

This line of text is meant to be treated as an addition to the document.

This line of text will render as underlined

This line of text is meant to be treated as fine print.

This line rendered as bold text.

This line rendered as italicized text.

Nulla attr vitae elit libero, a pharetra augue.
				

Your title goes here

You can use the mark tag to highlight text.

This line of text is meant to be treated as deleted text.

This line of text is meant to be treated as no longer accurate.

This line of text is meant to be treated as an addition to the document.

This line of text will render as underlined

This line of text is meant to be treated as fine print.

This line rendered as bold text.

This line rendered as italicized text.

Nulla attr vitae elit libero, a pharetra augue.
CONTEXTUAL TEXT COLORS

Available color variations.

Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.

Nullam id dolor id nibh ultricies vehicula ut id elit.

Duis mollis, est non commodo luctus, nisi erat porttitor ligula.

Maecenas sed diam eget risus varius blandit sit amet non magna.

Etiam porta sem malesuada magna mollis euismod.

Donec ullamcorper nulla non metus auctor fringilla.

Nullam id dolor id nibh ultricies vehicula ut id elit.

Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.

Nullam id dolor id nibh ultricies vehicula ut id elit.

Duis mollis, est non commodo luctus, nisi erat porttitor ligula.

				

Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.

Nullam id dolor id nibh ultricies vehicula ut id elit.

Duis mollis, est non commodo luctus, nisi erat porttitor ligula.

Maecenas sed diam eget risus varius blandit sit amet non magna.

Etiam porta sem malesuada magna mollis euismod.

Donec ullamcorper nulla non metus auctor fringilla.

Nullam id dolor id nibh ultricies vehicula ut id elit.

Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.

Nullam id dolor id nibh ultricies vehicula ut id elit.

Duis mollis, est non commodo luctus, nisi erat porttitor ligula.

UNORDERED

A list of items in which the order does not explicitly matter.

  • Lorem ipsum dolor sit amet
  • Facilisis in pretium nisl aliquet
  • Nulla volutpat aliquam velit
    • Phasellus iaculis neque
    • Purus sodales ultricies
  • Faucibus porta lacus fringilla vel
  • Eget porttitor lorem
				
  • Lorem ipsum dolor sit amet
  • Facilisis in pretium nisl aliquet
  • Nulla volutpat aliquam velit
    • Phasellus iaculis neque
    • Purus sodales ultricies
  • Faucibus porta lacus fringilla vel
  • Eget porttitor lorem
ORDERED

A list of items in which the order does explicitly matter.

  1. Lorem ipsum dolor sit amet
  2. Facilisis in pretium nisl aliquet
  3. Nulla volutpat aliquam velit
    1. Phasellus iaculis neque
    2. Purus sodales ultricies
  4. Faucibus porta lacus fringilla vel
  5. Eget porttitor lorem
				
  1. Lorem ipsum dolor sit amet
  2. Facilisis in pretium nisl aliquet
  3. Nulla volutpat aliquam velit
    1. Phasellus iaculis neque
    2. Purus sodales ultricies
  4. Faucibus porta lacus fringilla vel
  5. Eget porttitor lorem
UNSTYLED

This only applies to immediate children list items, meaning you will need to add the class for any nested lists as well.

  • Lorem ipsum dolor sit amet
  • Integer molestie lorem at massa
    • Phasellus iaculis neque
  • Faucibus porta lacus fringilla vel
  • Eget porttitor lorem
  • Lorem ipsum
  • Phasellus iaculis
  • Nulla volutpat
				
  • Lorem ipsum dolor sit amet
  • Integer molestie lorem at massa
    • Phasellus iaculis neque
  • Faucibus porta lacus fringilla vel
  • Eget porttitor lorem
  • Lorem ipsum
  • Phasellus iaculis
  • Nulla volutpat
BLOCKQUOTES

For quoting blocks of content from another source within your document. Wrap blockquote class blockquote around any HTML as the quote.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

				
				

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

DESCRIPTION LIST ALIGNMENT

Align terms and descriptions horizontally by using our grid system’s predefined classes (or semantic mixins). For longer terms, you can optionally add a .text-truncate class to truncate the text with an ellipsis.

Description lists
A description list is perfect for defining terms.
Term

Definition for the term.

And some more placeholder definition text.

Another term
This definition is short, so no extra paragraphs or anything.
Truncated term is truncated
This can be useful when space is tight. Adds an ellipsis at the end.
Nesting
Nested definition list
I heard you like definition lists. Let me put a definition list inside your definition list.
				
Description lists
A description list is perfect for defining terms.
Term

Definition for the term.

And some more placeholder definition text.

Another term
This definition is short, so no extra paragraphs or anything.
Truncated term is truncated
This can be useful when space is tight. Adds an ellipsis at the end.
Nesting
Nested definition list
I heard you like definition lists. Let me put a definition list inside your definition list.