#138
Cards on narrow containers
A SimpleTable that turns each row into a stacked card on narrow screens, listing three users in a flush card.
Hand this to your AI. It names the exact library parts, timings and accessibility promises of this demo.
Build the "Cards on narrow containers" pattern (@codeatlasdev/ui demo #138, display/table) in my app.
Call get_demo({ ids: ["#138"] }) first and keep its structure. It needs @codeatlasdev/[email protected].
Use: Data tables that must stay readable on phones without horizontal scrolling.
Keep these library parts, with the props and tokens the demo uses:
- SimpleTable, Card from "@codeatlasdev/ui"
Behaviour to keep:
- `<Card flush full>` wraps the table
- `<SimpleTable responsive="cards">` with plain `thead` and `tbody`
- Header columns: Name, Email, Role, Status
- 3 rows from `rows` with `name`, `email`, `role`, `status`
- Each cell carries a label such as `data-label="Name"` for the card layout
- The first cell uses `class="primary"`
Reduced motion: the demo handles it; keep that branch.
Keyboard: not an interactive control.
Change only the copy and the data. Use the theme tokens (--ca-*), never raw colours. Library parts
- SimpleTable
@codeatlasdev/ui - Card
@codeatlasdev/ui
How it is built
- `<Card flush full>` wraps the table
- `<SimpleTable responsive="cards">` with plain `thead` and `tbody`
- Header columns: Name, Email, Role, Status
- 3 rows from `rows` with `name`, `email`, `role`, `status`
- Each cell carries a label such as `data-label="Name"` for the card layout
- The first cell uses `class="primary"`
Related
Loading source.