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), 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, hug, snug, normal, relaxed, loose, spacious, extra-spacious	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, small, base, h6, h5, h4, h3, h2, h1, eyebrow	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, tight, normal, wide, wider, widest	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	left,center,right,justify	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