For development, import
Text from @servicetitan/anvil2-ai-kit. For design, find it in the AI Kit Web Component Library file.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.
Code
- Implementation
- Text Props
Common Examples
To use theText, import it from @servicetitan/anvil2-ai-kit and pass a required text prop. The kit forbids children. text must be HTML phrasing content: inline nodes only, not block elements.text when both a raw HTML element and a kit component exist: Link over <a>, kit icons over raw <svg>.For truncation with Show more / Show less, use TruncatedText.Headline
Setvariant="headline" and a required el ("h1"–"h6") so the semantic level is independent of visual size. Headline size defaults to "major".Body
Body is the default variant and renders a<p>. Size defaults to "regular".Inline body
Setinline on body text to render a <span> instead of a <p> so fragments compose inside other text.Eyebrow
Eyebrow text always renders a<span> and does not accept size, el, or inline.Highlighted
Sethighlighted to apply the suggested-change treatment on any variant.React Accessibility
- Choose
elon headlines to match document structure, not visual size. - Body
textthat includes interactive children such asLinkmust stay phrasing content so the wrapping<p>or<span>remains valid HTML.