# Card A white block on the tinted page. It groups things by fill alone — no border, no shadow. ```kata-specimen card-default ``` > Source: [`Card.tsx`](../../../src/components/ui/Card.tsx). The surface law behind it is in > [elevation](../foundations/elevation.md). ## 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 | Part | Token | |---|---| | Fill | `surface.card` | | Ground it must sit on | `surface.page` | | Corner | `radius.card` 16, and it clips its children to it | | Inset | `spacing.card` 16 (`padded`, the default) or 0 | | Pressable floor | `touchTarget` 44 | ## States ```kata-specimen card-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 component's own.** A pressable `Card` draws the 2px `border.focus` ring itself (2pt outside its edge, on the page), as an outline so focusing it moves nothing. It shows for keyboard focus only — a mouse or touch press does not light it — and native, which has no keyboard focus, is unchanged. ## 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](row.md) 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 ```kata-specimen card-ground ``` ## Code ```tsx import { Card, Text } from '../../components/ui'; Coaching 2 clips awaiting review ```