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.