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