Utilities
Typography
Typography
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]
|
sserif | roboto
|
Font Color
You can set a font color instantly to an element by using the following utilities classes.
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
|