Font Size
Controls the font size of an element.
| Class | Property |
|---|---|
| fs-xs | font-size: 0.75rem; |
| fs-b | font-size: 1rem; |
| fs-sm | font-size: 1.5rem; |
| fs-md | font-size: 2.25rem; |
| fs-lg | font-size: 3rem; |
| fs-xl | font-size: 3.75rem; |
| fs-xxl | font-size: 4.5rem; |
| fs-3xl | font-size: 5.25rem; |
| fs-6xl | font-size: 6rem; |
| fs-9xl | font-size: 6.75rem; |
Using responsive modifiers
Using responsive breakpoints like sm:fs-*,
md:fs-*, lg:fs-*, and xxl:fs-* allows targeting specific utilities in
different viewports.
<div class="fs-md md:fs-lg ..."></div>Using hover modifiers
Using :hover modifiers such as h:fs-* allows
you to override elements and change their values when hovering over them.
<div class="fs-md h:fs-lg ..."></div>