v1.8.8

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

ClassResult
text--uppercase

Uppercase Text.

text--lowercase

Lowercase text.

text--capitalize

Capitalize each first letter.

color

Class

ClassResult
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

ClassResult
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

ClassResult
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