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.
Usage Guidelines
When to Use
Use the Text when:- Carto typography – Headlines, body copy, and eyebrow labels need Carto type styles.
- Section headings – A heading needs a semantic level that is independent of its visual size.
- Inline fragments – A styled fragment sits on the same line as running copy or inside another Text.
- Section labels – A small, uppercased overline labels a section. Use the eyebrow variant.
When not to use
Avoid using the Text for:- Line-clamped body copy – Long body copy needs a Show more / Show less control. Use the Truncated Text instead.
- Block-level formatted content – Content includes lists, tables, code, quotes, or multiple headings, which produce invalid markup inside Text. Use the Markdown for formatted agent responses.
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.