Default Heading Text

Examples using standard h1 to h6 html tags

h1. Heading

h2. Heading

h3. Heading

h4. Heading

h5. Heading
h6. Heading
Heading with color Text

Examples using standard h1 to h6 html tags

h1. Heading

h2. Heading

h3. Heading

h4. Heading

h5. Heading
h6. Heading
Display Headings

Examples using standard display-1 to display-6 html tags

Display 1

Display 2

Display 3

Display 4

Display 5

Display 6

Display 7

Display 8

Display headings with color Text

Examples using standard display-1 to display-6 html tags

Display 1

Display 2

Display 3

Display 4

Display 5

Display 6

Display 7

Display 8

Line Height

Utilities for controlling the leading (line height) of an element.

Lorem ipsum dolor sit amet.
Dolor sit amet.

Lorem ipsum dolor sit amet.
Dolor sit amet.

Lorem ipsum dolor sit amet.
Dolor sit amet.

Lorem ipsum dolor sit amet.
Dolor sit amet.

Inline text elements

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.

Text alignment

Easily realign text to components with text alignment classes.

Left aligned text on all viewport sizes.

Center aligned text on all viewport sizes.

Right aligned text on all viewport sizes.

Both aligned text on all viewport sizes. Ambitioni dedisse scripsisse iudicaretur. Cras mattis iudicium purus sit amet fermentum. Donec sed odio operae, eu vulputate felis rhoncus.

Paragraph Text

Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean. A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic country, in which roasted parts of sentences fly into your mouth.

Most designers set their type arbitrarily, either by pulling values out of the sky or by adhering to a baseline grid. The former case isn’t worth discussing here, but the latter requires a closer look.

You can use the mark tag to highlight text.

Letter spacing

Utilities for controlling the tracking (letter spacing) of an element.

Lorem ipsum dolor sit amet. Tight letter spacing.

Lorem ipsum dolor sit amet. Normal letter spacing.

Lorem ipsum dolor sit amet. Wide letter spacing.

Description list alignment
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.
Blockquotes

The HTML spec requires that blockquote attribution be placed outside the <blockquote>.

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

Someone famous in Source Title

Use text utilities as needed to change the alignment of your blockquote..

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

Someone famous in Source Title

The HTML spec requires that blockquote attribution be placed in the .blockquote-reverse.

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

Someone famous in Source Title