> ## Documentation Index
> Fetch the complete documentation index at: https://anvil.servicetitan.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Text – Code

> The Text component renders Carto typography through variant, size, and a named text prop.

<Tabs>
  <Tab title="Implementation">
    ```tsx theme={null}
    import { Text } from "@servicetitan/anvil2-rn";

    function App() {
      return <Text text="The quick brown fox jumps over the lazy dog." />;
    }
    ```

    ## Common Examples

    To use the `Text`, import it from `@servicetitan/anvil2-rn` and pass a required `text` prop. The kit forbids `children`. All variants render a native `Text`; nested `Text` stays inline.

    ```tsx theme={null}
    import { Text } from "@servicetitan/anvil2-rn";

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

    React Native has no CSS color inheritance, so `color` selects a semantic foreground role. `align` sets horizontal alignment for multi-line copy.

    ### Headline

    Set `variant="headline"` and a required `el` (`"h1"`–`"h6"`) so the semantic level is independent of visual size. Headline `size` defaults to `"major"`.

    ```tsx theme={null}
    <Text variant="headline" el="h2" size="hero" text="Headline — hero" />
    <Text variant="headline" el="h2" size="major" text="Headline — major" />
    <Text
      variant="headline"
      el="h2"
      size="substantial"
      text="Headline — substantial"
    />
    <Text variant="headline" el="h2" size="regular" text="Headline — regular" />
    ```

    ### Body

    Body is the default variant. Size defaults to `"regular"`.

    ```tsx theme={null}
    <Text size="fine" text="Body — fine" />
    <Text size="compact" text="Body — compact" />
    <Text size="regular" text="Body — regular" />
    <Text size="featured" text="Body — featured" />
    ```

    ### Eyebrow

    ```tsx theme={null}
    <Text variant="eyebrow" text="Section label" />
    ```

    ### Highlight and color

    `highlighted` applies the suggested-change treatment and owns the foreground. `color` is ignored while highlighted.

    ```tsx theme={null}
    <Text highlighted text="8.0h" />
    <Text text="Muted note" color="subtle" align="center" />
    ```

    ## Accessibility

    * Headline `el` sets `accessibilityRole="header"` and the heading level.
    * Body and eyebrow are ordinary text.
  </Tab>

  <Tab title="Text Props">
    ```tsx theme={null}
    <Text variant="headline" el="h1" size="major" text="Page title" />
    ```

    ## `Text` Props

    The `Text` accepts the following props. It does not expose a raw `style` override. Headline requires `el`. Body is the default variant.

    <ParamField path="text" type="ReactNode" required>
      Text content.
    </ParamField>

    <ParamField path="align" type={`"start" | "center" | "end"`}>
      Horizontal alignment.
    </ParamField>

    <ParamField path="color" type={`"standard" | "subtle" | "informative" | "critical" | "inverse"`} default="standard">
      Semantic foreground role. Ignored when `highlighted` is true.
    </ParamField>

    <ParamField path="el" type={`"h1" | "h2" | "h3" | "h4" | "h5" | "h6"`}>
      Semantic heading level. Required when `variant` is `"headline"`.
    </ParamField>

    <ParamField path="highlighted" type="boolean" default="false">
      Suggested-change highlight treatment.
    </ParamField>

    <ParamField path="size" type="HeadlineSize | BodySize">
      Visual scale. Headline defaults to `"major"`. Body defaults to
      `"regular"`. Unavailable on eyebrow.
    </ParamField>

    <ParamField path="testID" type="string">
      Test hook forwarded to the underlying `Text`.
    </ParamField>

    <ParamField path="variant" type={`"headline" | "body" | "eyebrow"`} default="body">
      Type role.
    </ParamField>
  </Tab>
</Tabs>