Header 1 (56px)

Header 2 (48px)

Header 3 (40px)

Header 4 (32px)

Header 5 (24px)

Header 6 (20px)

Content

Content header

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam architecto, atque dignissimos distinctio ea earum eos explicabo officiis praesentium, quo rem, tempora totam? Alias assumenda, blanditiis dicta earum maxime qui!

This
is
an
ordered
list

This
is
an
unordered
list

This is text with a smaller size, for fine print.

Utilities

This is text with a highlight in the middle.

This is text with a ~~strike-through~~ in the middle.

This text is wrapped in a link, but it uses text-muted so it doesn't get the default hover state.This text uses .text-inherit-hover to get the default hover state.

Text colors

Body text with default color (previously black1).

Body text with muted color (previously black2/gray1).

Body text with muted-x2 color (previously gray2).

Body text with primary color.

Body text with success color.

Body text with warning color.

Body text with danger color.

Body text with info color.

Font weights

This is some body text with light weight.

This is some body text with normal weight.

This is some body text with medium weight.

This is some body text with semibold weight.

This is some body text with bold weight.

Labels

This is some body text with a blue label

This is some body text with a red label

This is some body text with a yellow label

This is some body text with a purple label

This is some body text with a green label

This is some body text with a gray label

This is some body text with a gold label

This is some body text with an outlined primary label

This is some body text with an outlined secondary label

This is some body text with an outlined success label

This is some body text with an outlined warning label

This is some body text with an outlined danger label

This is some body text with an outlined info label