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.