# Audience Card

> A card for who the product is for: a drawing of their work over a grid, then who they are, one sentence, short points and a link at the card's end.

Source: https://ritla.app/ui/audience-card

## Installation

Installing from the registry is coming soon. Until then, these are the commands you will run.

```bash
npx ritla add audience-card
```

With the shadcn CLI instead:

```bash
npx shadcn@latest add @ritla/audience-card
```

Dependencies: `@phosphor-icons/react`

## Usage

```tsx
import { AudienceCard } from "@/components/ui/audience-card";

<AudienceCard
  visual={<YourDrawing />}
  title="Product teams"
  description="Bring Arabic behaviour into the product from the first component."
  points={["Arabic and English from one codebase", "Components built against the documented rules"]}
  action={<TextLink href="/ui" iconTrailing={ArrowRightIcon}>Browse components</TextLink>}
/>
```

## API reference

### `AudienceCard`

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `title` | `ReactNode` | None | Who it is for (“Product teams”). |
| `level` | `2 \| 3 \| 4` | `3` | The title's heading level in the page outline. |
| `visual` | `ReactNode` | None | A decorative drawing of their work over the construction grid, hidden from screen readers. |
| `description` | `ReactNode` | None | One sentence on what they get. |
| `points` | `ReactNode[]` | None | Two or three short points, each after a check. |
| `action` | `ReactNode` | None | One link at the card's end, so cards side by side line their links up. |

## Accessibility

Keyboard (keys as in left-to-right; arrows swap in right-to-left):

- `Tab`: To the card's link only.

ARIA:

- The card is an `article` and its title a real heading at `level`.
- The drawing is decorative (`aria-hidden`), so the text says all it says.

## Arabic and RTL notes

Mirrors:

- Text starts on the right, with each point's check at its start on the right.
- The link's arrow points left.
- The hard shadow falls bottom-left; on hover the card rises toward the right and up, and its shadow grows.

Does not mirror:

- The drawing itself: a left-to-right picture that draws both directions when it needs to.

Numerals: The card writes no numbers itself.

Arabic typography: Title `heading-28` Medium (Semibold in Arabic), sentence `body-16`, points `body-14`.