Theme Default

Components

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.

Preview

Mirrored is the same English content laid out right to left: it separates a mirroring bug from a translation one.

Installation

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

npx ritla add audience-card

Also works with shadcn: npx shadcn@latest add @ritla/audience-card

Dependencies it brings: @phosphor-icons/react

Installing by hand copies the component's source into your project. The source comes with a Ritla UI license, so the CLI is the short way to the same files.

Usage

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 are written for left-to-right. In right-to-left the arrow keys swap: the one pointing toward the reading direction moves forward.

Key	Action
`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.