Typography
Helpers are one optional consumer of the typography tokens — prefer font-size: var(--tui-typography-size-sm) directly in your own CSS when you control it; the classes exist for markup-only contexts. See the Utility Class Index and Primitive Token Index.
Font size
| Class | Computed Size | Preview |
|---|---|---|
.tui-text-xs |
12px | This is extra-small text. |
.tui-text-sm |
14px | This is small text. |
.tui-text-md |
16px | This is medium text. |
.tui-text-lg |
20px | This is large text. |
.tui-text-xl |
24px | This is extra-large text. |
.tui-text-xxl |
32px | This is extra-extra-large text. |
Font weight
| Class | Computed value | Preview |
|---|---|---|
.tui-text-normal |
normal |
This is text with normal weight. |
.tui-text-bold |
bold |
This is text with bold weight. |
Color
| Class | Preview |
|---|---|
.tui-text-primary |
This is text with primary theme. |
.tui-text-secondary |
This is text with secondary theme. |
.tui-text-info |
This is text with info theme. |
.tui-text-warning |
This is text with warning theme. |
.tui-text-danger |
This is text with danger theme. |
.tui-text-success |
This is text with success theme. |
.tui-text-contrast-low |
This is text with low contrast. |
.tui-text-contrast-high |
This is text with high contrast. |
.tui-text-white |
This is white text. |