Text Elements
Elevate features three properties responsible for styling text elements: text, font, and format. Text is responsible for defining how text is presented and flows within a container, while font focuses on the characteristics of the typeface itself, and format is used to control the spacing between lines of text as well as other general formatting options.
text Property Modifiers
The following table describes the supported tokens and rules for the text property, along with the expected options and their output CSS.
| Modifier | Expected Values | Example |
|---|---|---|
color | ColorToken (e.g., purple+1) | text:purple+1 |
text-align | left, center, right, justify | text:left |
max-width | note (20ch)blob (35ch)brief (45ch)blog (65ch)book (70ch)essay (75ch)full (80ch) | text:book |
text-decoration | none, underline, overline, line-through, underline-overline, underline-line-through, overline-line-through, underline-overline-line-through | text:underline |
line-height | none (1)hug (1.2)snug (1.3)normal (1.4)relaxed (1.5)loose (1.6)spacious (1.7)extra-spacious (1.8) | text:spacious |
font Property Modifiers
The following table describes the supported tokens and rules for the font property, along with the expected options and their output CSS.
| Modifier | Expected Values | Example |
|---|---|---|
font-size | tiny (0.533rem)small (0.711rem)base (1rem)h6 (1.125rem)h5 (1.5rem)h4 (2.25rem)h3 (3.375rem)h2 (5.062rem)h1 (7.594rem)eyebrow (0.583rem) | font:small |
font-family | sans, serif, mono | font:sans |
font-weight | thin (100)extra-light (200)light (300)regular (400)medium (500)semibold (600)bold (700)extra-bold (800)black (900) | font:bold |
letter-spacing | extra-tight (-0.02rem)tight (-0.01rem)normal (0)wide (0.01rem)wider (0.02rem)widest (0.04rem) | font:widest |
format Property Modifiers
The following table describes the supported tokens and rules for the format property, along with the expected options and their output CSS.
| Modifier | Expected Values | Example |
|---|---|---|
text-transform | uppercase, lowercase, capitalize | format:uppercase |
hyphens | none,manual,auto | format:auto |
white-space | no-wrap,normal,pre-line,pre-wrap,pre,break-spaces | format:pre |
word-break | normal,all,keep,word | format:word |
overflow-wrap | normal,break-word,anywhere | format:anywhere |
Additional Typography Utilities
These are direct properties (not part of text, font, or format):
| Property | Expected Values | Example |
|---|---|---|
font-style | normal, italic, oblique | font-style:italic |
font-variant | normal, small-caps, all-small-caps, petite-caps, all-petite-caps, unicase, titling-caps | font-variant:small-caps |
font-stretch | ultra-condensed, extra-condensed, condensed, semi-condensed, normal, semi-expanded, expanded, extra-expanded, ultra-expanded | font-stretch:condensed |
text-indent | SpacingToken | text-indent:d3 |
text-overflow | clip, ellipsis | text-overflow:ellipsis |
text-rendering | auto, optimizeSpeed, optimizeLegibility, geometricPrecision | text-rendering:optimizeLegibility |
word-spacing | SpacingToken | word-spacing:d1 |
tab-size | NumericToken | tab-size:4 |
writing-mode | horizontal-tb, vertical-rl, vertical-lr, sideways-rl, sideways-lr | writing-mode:vertical-rl |
direction | ltr, rtl | direction:rtl |
unicode-bidi | normal, embed, bidi-override, isolate, isolate-override, plaintext | unicode-bidi:isolate |
line-clamp | NumericToken | line-clamp:3 |
text-decoration-color | ColorToken | text-decoration-color:indigo+2 |
text-decoration-style | solid, dashed, dotted, double, groove, ridge, inset, outset, none, hidden | text-decoration-style:dotted |
text-decoration-thickness | SpacingToken | text-decoration-thickness:d1 |
Note: line-clamp currently only sets the property. You may still need the supporting layout rules (e.g., display:-webkit-box + -webkit-box-orient) depending on browser behavior.