Use typography utilities to quickly set a position of an element.
You can set a font size instantly to an element by using the following utilities classes.
Class Reference
Class | Size |
---|---|
.tx-[size] |
8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 |
.tx-[size] |
18 | 20 | 22 | 24 | ... | 140 (step of 2) |
Media Query Class Reference
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.
Example
Class Reference
Class | Weight |
---|---|
.tx-[weight] |
bold | semibold | medium | normal | light | thin | xthin |
Media Query Class Reference
Class | Viewport | Weight |
---|---|---|
.tx-[viewport]-[weight] |
xs | sm | md | lg | xl | bold | semibold | medium | normal | light | thin | xthin |
You can set a font family instantly to an element by using the following utilities classes.
Class Reference
Class | Family |
---|---|
.tx-[family] |
poppins | hind | firasans (default) | roboto | source |
You can set a font color instantly to an element by using the following utilities classes.
Example
Class Reference
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 Reference
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 Reference
Class | Value |
---|---|
.lh-[value] |
1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 |
Media Query Class Reference
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 |