#642
Stats in a card
A Card titled This week holding three card-less Stat blocks in a responsive grid: leads with a hint, reply rate with a unit, trend and hint, and booked calls with a positive trend.
Hand this to your AI. It names the exact library parts, timings and accessibility promises of this demo.
Build the "Stats in a card" pattern (@codeatlasdev/ui demo #642, layout/kpi-card) in my app.
Call get_demo({ ids: ["#642"] }) first and keep its structure. It needs @codeatlasdev/[email protected].
Use: Plain statistics inside an existing card or panel, with no nested box, instead of several KpiCards.
Keep these library parts, with the props and tokens the demo uses:
- Card, Stat from "@codeatlasdev/ui"
Behaviour to keep:
- `<Card title="This week" headingLevel={3} class="stats-card">` with `max-width: 640px`
- `<Stat label="Leads this week" value="128" hint="12 more than last week" />`
- `<Stat label="Reply rate" value="18" unit="%" trend={-2.4} hint="Goal: 25%" />`
- `<Stat label="Booked calls" value="9" trend={12.5} />`
- The Stats sit in an auto-fit grid, `minmax(150px, 1fr)`, `gap: var(--ca-space-5)`
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
How it is built
- `<Card title="This week" headingLevel={3} class="stats-card">` with `max-width: 640px`
- `<Stat label="Leads this week" value="128" hint="12 more than last week" />`
- `<Stat label="Reply rate" value="18" unit="%" trend={-2.4} hint="Goal: 25%" />`
- `<Stat label="Booked calls" value="9" trend={12.5} />`
- The Stats sit in an auto-fit grid, `minmax(150px, 1fr)`, `gap: var(--ca-space-5)`
Related
Loading source.