: single;
};
```tsx lines theme={null}
import { Text } from "@servicetitan/carto-react-kit";
function App() {
return ;
}
export default App;
```
## 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
```tsx lines theme={null}
import { Text } from "@servicetitan/carto-react-kit";
function App() {
return (
);
}
export default App;
```
`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.
| Size | Value |
| --------------- | ----- |
| Regular | 16px |
| Substantial | 20px |
| Major (default) | 24px |
| Hero | 32px |
### Body
```tsx lines theme={null}
import { Text } from "@servicetitan/carto-react-kit";
function App() {
return (
);
}
export default App;
```
Body is the default variant — omit `variant` for a `
`. `size` picks the scale.
| Size | Value |
| ----------------- | ----- |
| Fine | 12px |
| Compact | 14px |
| Regular (default) | 16px |
| Featured | 18px |
#### Inline
```tsx lines theme={null}
import { Text } from "@servicetitan/carto-react-kit";
function App() {
return (
);
}
export default App;
```
`inline` renders body text as a `` instead of a `
`, so a fragment composes on the same line as surrounding content — useful for nesting `Text` inside running copy or inside another `Text`.
### Eyebrow
```tsx lines theme={null}
import { Text } from "@servicetitan/carto-react-kit";
function App() {
return ;
}
export default App;
```
Eyebrow is a small, uppercased overline for section labels. It has a single fixed size (10px) — `size` isn't configurable on this variant.
### Highlighted
```tsx lines theme={null}
import { Text } from "@servicetitan/carto-react-kit";
function App() {
return (
);
}
export default App;
```
`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, use `TruncatedText` instead.
## Keyboard Interaction
Text renders no focusable elements of its own. When `text` composes an interactive child — a Carto `Link`, for example — that child's own keyboard interaction applies.
