Text – Code – AI Kit

Implementation
Text Props

Common Examples

To use the Text, 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.

import { Text } from "@servicetitan/anvil2-ai-kit";

function ExampleComponent() {
  return <Text text="Default body paragraph." />;
}

Prefer Carto components inside 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

Set variant="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 . Size defaults to "regular".

Inline body

Set inline on body text to render a  instead of a  so fragments compose inside other text.

Eyebrow

Eyebrow text always renders a  and does not accept size, el, or inline.

Highlighted

Set highlighted to apply the suggested-change treatment on any variant.

React Accessibility

Choose el on headlines to match document structure, not visual size.
Body text that includes interactive children such as Link must stay phrasing content so the wrapping  or  remains valid HTML.

<Text variant="headline" el="h2" size="major" text="Page title" />

`Text` Props

The Text accepts the following props. It is a discriminated union. variant selects the role; el is required on headlines; inline is body-only; eyebrow forbids size, el, and inline.

ReactNode

required

Text content. Must be HTML phrasing content. Block elements inside text produce invalid HTML.

string

Caller-supplied class merged onto the recipe class.

"h1" | "h2" | "h3" | "h4" | "h5" | "h6"

Rendered heading tag. Required when variant is "headline". Forbidden on body and eyebrow.

boolean

default:"false"

Applies the suggested-change highlight treatment on every variant.

true

Renders body text as a  instead of a . Body only.

HeadlineSize | BodySize

Visual scale. Headline sizes: "regular", "substantial", "major" (default), "hero". Body sizes: "fine", "compact", "regular" (default), "featured". Forbidden on eyebrow.

"headline" | "body" | "eyebrow"

default:"body"

Type role. Defaults to "body" when omitted.

​Common Examples

​Headline

​Body

​Inline body

​Eyebrow

​Highlighted

​React Accessibility

​Text Props