Typography Utilities

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.

Slim Admin Template

Slim Admin Template

Slim Admin Template

Class Weight
.tx-[weight] bold | semibold | medium | normal | light | thin | xthin
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 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.

Slim Admin Template

Slim Admin Template

Slim Admin Template

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