Options
Text supports three variants — headline, body, and eyebrow — each with its own size scale, plus a highlight treatment that works across all three.Headline
el sets the rendered heading tag (h1–h6) and is required whenever variant="headline" — a headline always commits to a semantic level. size picks the visual scale independently of el, so a page can use h2 for document structure while sizing it hero for emphasis.
Body
Body is the default variant — omitvariant for a <p>. size picks the scale.
Inline
inline renders body text as a <span> instead of a <p>, so a fragment composes on the same line as surrounding content — useful for nesting Text inside running copy or inside another Text.
Eyebrow
Eyebrow is a small, uppercased overline for section labels. It has a single fixed size (10px) —size isn’t configurable on this variant.
Highlighted
highlighted applies the suggested-change treatment — a flat blue-50 background — on any variant, size, or inline fragment. It’s the same treatment DiffValue and TruncatedText use for a revised value.
Behavior
Text is presentational — it renders no interactive states of its own. Content wraps within its container by default; for line-clamped body copy with a Show more / Show less control, useTruncatedText instead.
Keyboard Interaction
Text renders no focusable elements of its own. Whentext composes an interactive child — a Carto Link, for example — that child’s own keyboard interaction applies.