Text
Output semantic text blocks with consistent sizing and typography styles.
x-t-text
Preview and Examples
Small helper text for supporting context.
This is standard body copy for everyday content.
Large branded text with balanced line wrapping for nicer headings.
Use level to change semantic tags while keeping visual control from your theme.
<x-t-text size="sm">Small helper text</x-t-text><x-t-text>Standard body copy</x-t-text><x-t-text size="lg" variant="brand" balance>Large branded text</x-t-text><x-t-text level="2" pretty>Semantic h2 text</x-t-text>Attributes
| Name | Type | Options | Description |
|---|---|---|---|
| balance | boolean |
true
false
|
Balances text |
| level | string |
1
2
3
4
5
6
|
Selects HTML heading level |
| pretty | boolean |
true
false
|
Reduces text orphans |
| size | string |
xs
sm
md
lg
xl
2xl
|
Controls component scale |
| variant | string |
default
brand
primary
secondary
success
warning
danger
light
dark
|
A variant is like a colour palette |