Row card
A tap-anywhere row that opens a detail sheet. The mobile counterpart to a data-table row — one card per record, name and sub on the left, primary number on the right.
Default
Name, sub, and a primary number. Tap opens a bottom sheet with the full record.
With meta row
When the record carries a couple of secondary numbers, add a meta row of label / value pairs beneath the headline. Cap at 3 pairs — past that the row no longer reads at a glance.
Parts
| Property | Value | Notes |
|---|---|---|
| padding | 12 × 14 px | — |
| radius | 11 px | Sits between primitive (8) and hero card (14) |
| min height | ~64 px (incl. value) | Comfortable thumb-tap on any phone |
| gap between rows | 8 px margin-bottom | Tight enough to scan, loose enough to tap |
| name | 600 14 / 1.3 | --text-strong |
| sub | 12 / 1.3 | --text-muted |
| value | 700 18 / 1, tabular-nums | Mono in dense surfaces, sans elsewhere |
| hover / active | --surface-muted bg, --border-strong border | Feedback for the whole card; never just the title |
Do & don't
Make the whole card the tap target. The user shouldn't have to aim for the chevron.
Show a chevron on the right. The card affords tap by virtue of being a card; a chevron is visual noise.
Surface the most-asked secondary number (delta, status) right under the headline value. Reading down the column should answer the operator's first question.
Cram inline actions (Edit / Delete) into the card. Open the detail sheet; put actions there.
Accessibility
- Use a
<button>(or<a>if it routes by URL) for the whole card so it's reachable by tab and announces as a single control. - The accessible name is the record name + value:
aria-label="Park Centre, $ 2,816, +12.4%". Sub and meta read on focus via the visible text. - Hover and active states must also be focus-visible states. Operators on a hardware keyboard should see the same lift.