#482
Stacked controls
A Card titled Trending topics that stacks three Checkbox controls in a column with gap="sm", the title aligned with the controls.
Hand this to your AI. It names the exact library parts, timings and accessibility promises of this demo.
Build the "Stacked controls" pattern (@codeatlasdev/ui demo #482, surfaces/card) in my app.
Call get_demo({ ids: ["#482"] }) first and keep its structure. It needs @codeatlasdev/[email protected].
Use: Settings and filter cards whose content is several inline controls (Checkbox, Switch, TextField) that need vertical spacing.
Keep these library parts, with the props and tokens the demo uses:
- Card, Checkbox from "@codeatlasdev/ui"
Behaviour to keep:
- `<Card title="Trending topics" headingLevel={3} gap="sm" class="stacked">` with `max-width: 320px`
- Three `<Checkbox label="Hacker News" />` children: Hacker News, Product Hunt, Lobsters
- `gap="sm"` stacks the children in a column with 8px between them; the title shares the checkboxes' left edge
Reduced motion: the demo handles it; keep that branch.
Keyboard: operable; keep the focus order and key handling.
Change only the copy and the data. Use the theme tokens (--ca-*), never raw colours. Library parts
How it is built
- `<Card title="Trending topics" headingLevel={3} gap="sm" class="stacked">` with `max-width: 320px`
- Three `<Checkbox label="Hacker News" />` children: Hacker News, Product Hunt, Lobsters
- `gap="sm"` stacks the children in a column with 8px between them; the title shares the checkboxes' left edge
Related
Loading source.