Typography
Use typography utilities to quickly style the text of an element. Great for heading, titles, or any other element.
Font Size
You can set a font size instantly to an element by using the following utilities classes.
| Class | Size |
|---|---|
| .tx-[size] | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 |
| .tx-[size] | 18 | 20 | 22 | 24 | ... | 140 (step of 2) |
| Class | Viewport | Size |
|---|---|---|
| .tx-[viewport]-[size] | xs | sm | md | lg | xl | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 |
| .tx-[viewport]-[size] | xs | sm | md | lg | xl | 18 | 20 | 22 | 24 | ... | 140 (step of 2) |
Font Weight
You can set a font weight instantly to an element by using the following utilities classes.
| Class | Weight |
|---|---|
| .tx-[weight] | bold | semibold | medium | normal | light | thin | xthin |
Font Family
You can set a font family instantly to an element by using the following utilities classes.
| Class | Family |
|---|---|
| .tx-[family] | sans | open-sans | roboto-mono |
Font Color
You can set a font color instantly to an element by using the following utilities classes.
Amet duis do nisi duis veniam non est eiusmod tempor incididunt tempor dolor ipsum in qui sit. Exercitation mollit sit culpa nisi culpa non adipisicing reprehenderit do dolore. Duis reprehenderit occaecat anim ullamco ad duis occaecat ex.
Amet duis do nisi duis veniam non est eiusmod tempor incididunt tempor dolor ipsum in qui sit. Exercitation mollit sit culpa nisi culpa non adipisicing reprehenderit do dolore. Duis reprehenderit occaecat anim ullamco ad duis occaecat ex.
<p class="tx-gray-500">...</p>
<p class="tx-white-7">...</p>
| Class | Color |
|---|---|
| .tx-[color] | primary | success | warning | danger | info | indigo | purple | orange | teal | pink | black | white | inverse |
| .tx-gray-[num] | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 |
| .tx-white-[transparency] | 2 | 3 | 4 | 5 | 6 | 7 | 8 |
Font Spacing
You can set a font spacing instantly to an element by using the following utilities classes.
| Class | Value |
|---|---|
| .tx-spacing-[value] | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 |
| .tx-spacing--[value] | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 ( negative spacing result ) |
Line Height
You can set a line height instantly to an element by using the following utilities classes.
| Class | Value |
|---|---|
| .lh-[value] | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 |
| Class | Viewport | Value |
|---|---|---|
| .lh-[viewport]-[value] | xs | sm | md | lg | xl | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 |