Typography

heading

Demo

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

paragraph

Why include a paragraph tag? Mostly to note that our paragraphs have a bottom margin of 1rem.

Demo

utilities

case

Class

Class Result
text--uppercase

Uppercase text.

text--lowercase

Lowercase text.

text--capitalize

Capitalize each first letter.

color

Class

Class Result
text--{ color }

Set text color using our colors.

text-hover--{ color }

Set text hover color using our colors.

sizing

text--size-{ size } augments our defaut font-size of 1rem.

Demo

Hello World!

Hello World!

Hello World!

Hello World!

Hello World!

Hello World!

Hello World!

Hello World!

Class

Class Result
text--size-2xs

2xs smaller text.

text--size-xs

xs text.

text--size-sm

sm text.

text--size-md

medium text.

text--size-lg

large text.

text--size-xl

xl text.

text--size-2xl

2xl larger text.

text--size-3xl

3xl larger text.

general

Demo

Hello World!

Hello World!

Hello World!

Hello World!

The quick brown fox jumped over the lazy dog.

Class

Class Result
text--bold

Bold text.

text--underline

Underlined text.

text--center

Centered text.

text--right

Right-aligned text.

text--nowrap

Set no-wrap on a line of text.