Use typography utilities to quickly style the text of an element. Great for heading, titles, or any other element.
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) |
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 |
You can set a font family instantly to an element by using the following utilities classes.
| Class | Family |
|---|---|
| .tx-[family] | sans | lato | interui | roboto |
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 |
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 ) |
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 |