#072
Stat cards
Three stat Cards in a flex row, each with a label, a large value and a delta line.
Hand this to your AI. It names the exact library parts, timings and accessibility promises of this demo.
Build the "Stat cards" pattern (@codeatlasdev/ui demo #072, surfaces/card) in my app.
Call get_demo({ ids: ["#072"] }) first and keep its structure. It needs @codeatlasdev/[email protected].
Use: Dashboard KPI strips showing a metric, its value and a short qualifier.
Keep these library parts, with the props and tokens the demo uses:
- Card from "@codeatlasdev/ui"
Behaviour to keep:
- `{#each stats as s}` renders `<Card class="stat">` once per stat
- 3 stats with `label`, `value`, `delta`: Components 70+, Presets 8, Tokens 80+
- Each card has three paragraphs: `{s.label}`, `{s.value}` and `{s.delta}`
- `.stat` uses `min-width: 140px` inside a wrapping flex `.grid`
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
- Card
@codeatlasdev/ui
How it is built
- `{#each stats as s}` renders `<Card class="stat">` once per stat
- 3 stats with `label`, `value`, `delta`: Components 70+, Presets 8, Tokens 80+
- Each card has three paragraphs: `{s.label}`, `{s.value}` and `{s.delta}`
- `.stat` uses `min-width: 140px` inside a wrapping flex `.grid`
Related
Loading source.