Change the style of text.
Size
Class | Font-size | Example |
text-h1 | 2rem /32px | Heading 1 |
text-h2 | 1.5rem /24px | Heading 2 |
text-h3 | 1.25rem /20px | Heading 3 |
text-h4 | 1.125rem /18px | Heading 4 |
text-h5 | 1rem /16px | Heading 5 |
text-h6 | 1rem /16px | Heading 6 |
text-title | 1rem /16px | Title |
text-subtitle | 0.8rem /12.8px | Subtitle |
text-p | 0.875rem /14px | Paragraph |
text-lg | 1.125rem /18px | Large |
text-normal | 1rem /16px | Normal/Default |
text-md | 0.875rem /14px | Medium |
text-sm | 0.8rem /12.8px | Small |
Weight
Class | Font-weight | Example |
font-bold | 600 | Bold |
font-semibold | 500 | Semibold |
font-normal | 400 | Normal |
Transformation
Class | Example |
text-capitalize | Example of a capitalize text. |
text-uppercase | Example of a uppercase text. |
text-lowercase | Example of a lowercase text. |
text-italic | Example of a italic text. |
text-underline | Example of a underline text. |
text-strikethrough | Example of a strikethrough text. |
Alignment
Class | Example |
text-left | left |
text-center | center |
text-right | right |
text-justify | justify |
Font family
Class | Example |
font-primary | Use primary font $family-primary |
font-mono | Use monospace font $family-monospace |