Typography
Font Size
Class
Property
| font-xs | font-size: 0.5rem; |
| font-sm | font-size: 0.75rem; |
| font-base | font-size: 1rem; |
| font-md | font-size: 1.25rem; |
| font-lg | font-size: 1.5rem; |
| font-xl | font-size: 2rem; |
| font-2xl | font-size: 2.5rem; |
| font-3xl | font-size: 3rem; |
| font-4xl | font-size: 4rem; |
| font-5xl | font-size: 5rem; |
| font-6xl | font-size: 6rem; |
| font-7xl | font-size: 7rem; |
| font-8xl | font-size: 8rem; |
Usage
<h2 class="font-2xl">Subtitle</h2>
<!-- This will set the font size to 2.5rem. -->
Font Weight
Class
Property
| font-reg | font-weight: 400; |
| font-med | font-weight: 500; |
| font-bld | font-weight: 700; |
Usage
<i class="font-bld">
The greatest victory is that which requires no battle. - Sun Tzu
</i>
Text Align
Class
Property
| text-left | text-align: left; |
| text-right | text-align: right; |
| text-center | text-align: center; |
Usage
<h1 class="text-center font-8xl">Title</h1>
Text Transform
Class
Property
| uppercase | text-transform: uppercase |
| lowercase | text-transform: lowercase |
| capitalize | text-transform: capitalize |
Usage
<p class="uppercase">boom!</p>
Text Decoration
Class
Property
| decor-none | text-decoration: none; |
| decor-underline | text-decoration: underline; |
| decor-line-through | text-decoration: line-through; |
Usage
<p>
And visit
<a class="decor-none" href="mycoolwebsite.com" target="_blank">
my cool website
</a>
for more info.
</p>
<!-- This will remove the text decoration from the link. -->