Card

A white block on the tinted page. It groups things by fill alone — no border, no shadow.

Source: Card.tsx. The surface law behind it is in elevation.

When to use it

• To hold one thing that belongs together: a streak, a "for you" suggestion, an index of rows.
• With padded={false} when rows or media draw to the card's edge.
• With onPress when the whole card is one destination.

Not on a white surface — a card only exists against surface.page. Not around inputs: an input's fill is already surface.card, so an input in a card is white on white. Not stacked two-deep above an index, or the screen turns into a dashboard.

Anatomy

States

• Static (no onPress): a plain view. No role, no focus stop, no press state.
• Pressed: opacity.pressed 0.85.
• Focus: a 2px border.focus ring.
• Disabled, loading, error: a card has none of its own. A card whose content is loading shows that content's skeleton; one whose content failed shows the error inside it.

On web the ring is the browser's. A pressable Card does not draw its own focus ring; on RN-web it relies on the browser's default focus outline. Input, SearchField and SelectTrigger draw the 2px border.focus themselves; the specimen shows the ring this component owes.

Content

• One subject per card. If it needs a second heading, it is two cards or one list.
• An eyebrow may label it; the card's own title is rowTitle, not title.
• Nothing inside a pressable card is separately tappable. If it needs a second target, use a Row with trailingInteractive.

Accessibility

• A pressable card defaults to role button. Give it an accessibilityLabel that reads the card the way a person would summarise it, because its children are fused into one stop.
• Fill is the only separation, so the card has to sit on surface.page for the edge to exist at all. On a white ground it disappears for everyone.

Do and don't

Code

import { Card, Text } from '../../components/ui';

<Card onPress={openCoaching} accessibilityLabel="Coaching. 2 clips awaiting review" testID="train-coaching">
  <Text variant="rowTitle">Coaching</Text>
  <Text variant="caption" tone="secondary">2 clips awaiting review</Text>
</Card>