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
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