Card
Moleculebeta@macaw-ds/ui · since 0.1.0A bordered surface that groups related content: a KPI, a form section, a record summary. Not a page, not a modal.
Contract
From the manifest's a11y block: what assistive technology sees, and every key the component handles.
- Role
- none for a static card; link or button when interactive with asChild
- Focusable
- When interactive is on.
- Accessible name
- Static cards have none. Interactive cards take the name from their text content; keep the title first so it is read first.
- Notes
- Card.Title renders an h3 by default. Set `as` to keep heading levels in order on the page.
- Do not nest interactive elements inside an interactive card; a card that is a link cannot contain buttons.
- The footer's sunken background keeps 4.5:1 for primary and secondary text.
| Keys | Behaviour |
|---|---|
| — | Static cards are not focusable |
| Interactive cards (asChild anchor or button) | Tab to focus, Enter (and Space for buttons) to activate |
Motion
- What moves
- An interactive card eases its border colour on hover. Visible when interactive is on.
- Tokens
- duration.fastease.standard
- Reduced motion
- Every token above collapses to 0 ms (and the spin animation to none) under the OS preference or inside any data-motion="reduced" scope. The component has no motion code of its own.
Contrast
Computed at build time from the token values, against the background each colour is paired with.
| Token | On | Light | Dark |
|---|---|---|---|
| line.strong | surface.layer-1 | 5.27:1 AA | 3.73:1 AA-large |
| focus.ring | surface.layer-1 | 6.00:1 AA | 6.72:1 AA |