;
}
};
```tsx lines expandable theme={null}
import { Text, Flex } from "@servicetitan/anvil2";
function App() {
return (
Headline
Eyebrow
Body text. Lorem ipsum dolor sit amet.
);
}
export default App;
```
## Common Examples
```tsx theme={null}
import { Flex, Text } from "@servicetitan/anvil2";
function ExampleComponent() {
return (
Headline text
Eyebrow
Regular body text.
);
}
```
### Text variants
The `Text` component accepts one of three options for the `variant` prop:
* `"body"` (default): renders as HTML `p` or `span` element, if `inline` is set to `true`
* `"eyebrow"`: renders as HTML `span` element
* `"headline"`: renders as HTML heading element (`h1` through `h4`) element, based on `el` prop
#### Body
```tsx lines expandable theme={null}
import { Text, Flex } from "@servicetitan/anvil2";
function App() {
return (
Small body text
Medium body text
Large body text
X-Large body text
);
}
export default App;
```
#### Eyebrow
```tsx lines expandable theme={null}
import { Text, Flex } from "@servicetitan/anvil2";
function App() {
return (
Eyebrow text
Eyebrow text
Eyebrow text
);
}
export default App;
```
#### Headline
```tsx lines expandable theme={null}
import { Text, Flex } from "@servicetitan/anvil2";
function App() {
return (
H4 Headline
H3 Headline
H2 Headline
H1 Headline
);
}
export default App;
```
### Nesting body text
When using body text within body text, make sure to use the `inline` prop on any of the child `Body` components to render a `span` instead of `p`.
```tsx lines expandable theme={null}
import { Text } from "@servicetitan/anvil2";
function App() {
return (
The outer text is in a p element, but the{" "}
inner text
{" "}
is in a span element.
);
}
export default App;
```
### Subdued body text
If `subdued` is set to `true` on a body text, it will use a de-emphasized color:
```tsx lines expandable theme={null}
import { Text, Flex } from "@servicetitan/anvil2";
function App() {
return (
Regular
Subdued
);
}
export default App;
```
### The useAccessibleColor hook
The Anvil2 `useAccessibleColor` hook makes it easy to determine which text color to use given a specific background color without making it inaccessible. This hook accepts two parameters, and returns an object with both `foreground` and `background` colors. In the case that no color can be made accessible with the given color, the `background` color will be adjusted until it can.
```tsx theme={null}
// accepts any valid css color format and hex with no #
const { foreground, background } = useAccessibleColor("0066CC");
```
```tsx lines expandable theme={null}
import { Text, Flex, Card, useAccessibleColor } from "@servicetitan/anvil2";
function App() {
const { foreground: fg1, background: bg1 } = useAccessibleColor("#0066CC");
const { foreground: fg2, background: bg2 } =
useAccessibleColor("hsl(339,100,94)");
return (
This is accessible 🎉
This is accessible 🎉
);
}
export default App;
```
**Note:** Anvil2 components and tokens already account for accessible colors internally, so this hook should only be needed when working with custom colors.
```tsx theme={null}
Text content
```
## `Text` Props
Depending on the variant, the `Text` component can accept any valid HTML `header`, `p`, or `span` props, in addition to the ones listed below. See the [Text variants section](/docs/web/components/text/code#text-variants) for specifics.
Only valid when `variant="headline"`. Required when using headline variant.
Only valid when `variant="headline"`. When set, renders the AI mark inline after the headline text. Use `true` for the sparkle only, or pass tooltip or popover configuration. See [AI Mark](/docs/web/components/ai-mark/code).
Only valid when `variant="body"`.
Note: `"xlarge"` is not available for `variant="eyebrow"`.
Only valid when `variant="body"`.
