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

# <Typography />

> A component to style text.

<img className="dark:hidden" width="720" height="440" noZoom src="https://mintcdn.com/attio/2EyaTyByKNPeSVcd/images/typography.png?fit=max&auto=format&n=2EyaTyByKNPeSVcd&q=85&s=3997d2660e417303e20d3f1cb203f159" data-path="images/typography.png" />

<img className="hidden dark:block" width="720" height="440" noZoom src="https://mintcdn.com/attio/2EyaTyByKNPeSVcd/images/typography-dark.png?fit=max&auto=format&n=2EyaTyByKNPeSVcd&q=85&s=ea1b716056cb5ec0a9a33596c6220c46" data-path="images/typography-dark.png" />

```js theme={"system"}
import {Typography} from "attio/client"
```

# `<Typography.Title />`

## Props

<ParamField path="children" type="React.ReactNode" required>
  The content of the title.
</ParamField>

<ParamField path="variant" type="'extraLarge' | 'large' | 'standard' | 'medium' | 'small' | 'extraSmall'">
  The variant of the title.

  Defaults to `"standard"`.
</ParamField>

# `<Typography.Body />`

## Props

<ParamField path="children" type="React.ReactNode" required>
  The content of the body.
</ParamField>

<ParamField path="variant" type="'standard' | 'large' | 'strong' | 'interactive'">
  The variant of the body.

  Defaults to `"standard"`.
</ParamField>

# `<Typography.Caption />`

## Props

<ParamField path="children" type="React.ReactNode" required>
  The content of the caption.
</ParamField>