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`	.422rem
`text--size-xs`	.563rem
`text--size-sm`	.75rem
`text--size-base`	1rem
`text--size-md`	1.333rem
`text--size-lg`	1.777rem
`text--size-xl`	2.369rem
`text--size-2xl`	3.157rem
`text--size-3xl`	4.209rem

general

Class

Class	Result
`text--bold`	Bold text.
`text--underline`	Underlined text.
`text--center`	Centered text.
`text--right`	Right-aligned text.
`text--left`	Left-aligned text.
`text--nowrap`	Set no-wrap on a line of text.
`text--italic`	font-style: italic
`text--normal`	font-style: normal

Visualizer

Try this! Change the border-radius of the card

Example Card