Ingest delay
p95 1.4s, up 220ms vs the previous 24h range.
Card
A visual treatment. Elevation 1. Not a Panel — Panel is layout.
Spec
- Elevation 1:
--elev-1-bg+--shadow-1+ hairline. - Slots: header, media, body, actions.
- Media: top full-bleed, or inline-start at 40%.
- One primary action.
- Tappable through the title link, not a whole-card button. Nested buttons stay reachable.
- Full width under 768px.
- Groups: CSS grid, gap
--space-4.
Live demo
Runnable controls. Not a screenshot. Paper / Ink in the header recolors tokens.
Elevation 1. Title is the link. One primary.
Error budget
14%
Remaining in the 30-day window. Burn 2.1× on 1h.
Do / Don't
| Do | Don't |
|---|---|
| Call it a card when it is a treatment. | Name a Card as a Panel. |
| Title is the link. | Wrap the whole card in <button> or <a>. |
| One primary in actions. | Two filled buttons on a card. |
Motion
| Property | Duration | Easing | Trigger | Reduced motion |
|---|---|---|---|---|
transform: scale(0.97) | 120ms --dur-fast | --ease-out | :active | instant |
| color / border | 120ms --dur-fast | --ease-out | :hover | instant |
| outline | 80ms --dur-micro | --ease-out | :focus-visible | instant |
Accessibility
- The title link is the name of the card. Don't add a redundant “Read more” without a unique name.
- Media that is decorative: empty alt. Charts need a text alternative.
- Hit 44px on actions.
- These notes describe construction. They are not a guarantee of WCAG conformance. Validate with axe, keyboard, and operators. See Accessibility.
Related
- Button
- Elevation
- Terminology — Panel vs Card