# RichText

> Typographic rhythm for long-form content: legal pages, help articles, MDX.

Category: Typography · Status: stable · Package: @bindshq/stance-react@0.1.1 · Docs: https://stanceui.com/components/rich-text

Wrap rendered long-form content in RichText to style headings, paragraphs, lists, quotes, tables and code with consistent rhythm. It only styles its descendants. It never parses or injects HTML, so sanitise and convert any untrusted HTML before rendering it.

## Import

```tsx
import { RichText } from '@bindshq/stance-react';
```

Styles are imported once per app: `@bindshq/stance-tokens/css` and `@bindshq/stance-react/styles.css`.

## Examples

### Article

```tsx
import { RichText } from '@bindshq/stance-react';

export function Basic() {
  return (
    <RichText as="article">
      <h2>How signature deployment works</h2>
      <p>
        When you publish a template, Binds generates a personalised signature for every user in your
        organisation and deploys it through your <a href="#exchange">Exchange connection</a>.
      </p>
      <ul>
        <li>Personal details come from your directory.</li>
        <li>Changes reach every mailbox within five minutes.</li>
      </ul>
      <blockquote>Consistent signatures reinforce the brand in every email you send.</blockquote>
      <h3>Requirements</h3>
      <p>
        An administrator must grant consent once. Use <code>Connect Microsoft 365</code> in
        Integrations.
      </p>
    </RichText>
  );
}
```

### Compact

```tsx
import { RichText } from '@bindshq/stance-react';

export function Small() {
  return (
    <RichText size="sm">
      <h3>Data retention</h3>
      <p>We keep signature history for 12 months, then delete it automatically.</p>
      <table>
        <thead>
          <tr>
            <th>Data</th>
            <th>Retention</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>Templates</td>
            <td>Until deleted</td>
          </tr>
          <tr>
            <td>Audit log</td>
            <td>12 months</td>
          </tr>
        </tbody>
      </table>
    </RichText>
  );
}
```

## API reference

| Component | Prop | Type | Default | Description |
| --- | --- | --- | --- | --- |
| RichText | `as` | `keyof JSX.IntrinsicElements` | `'div'` | Element; use article for standalone documents. |
| RichText | `size` | `'sm' \| 'md' \| 'lg'` | `'md'` | Base body size. |
| RichText | `measure` | `boolean` | `true` | Limit line length to about 70 characters. |

## Accessibility

- Preserves your semantic structure; keep a logical heading order.
- Links inside are underlined and have visible focus.

## Guidelines

**Do**

- Use for legal, help and marketing articles.

**Don’t**

- Pass unsanitised HTML from users into the page.

## Related

- https://stanceui.com/components/heading
- https://stanceui.com/components/text