#176
Negative trend
Two KPI cards whose trends fall and are good news (`trendTone="positive-down"`), one with an icon and one without.
Hand this to your AI. It names the exact library parts, timings and accessibility promises of this demo.
Build the "Negative trend" pattern (@codeatlasdev/ui demo #176, layout/kpi-card) in my app.
Call get_demo({ ids: ["#176"] }) first and keep its structure. It needs @codeatlasdev/[email protected].
Use: Metrics where a falling number is good news, such as churn rate and response time.
Keep these library parts, with the props and tokens the demo uses:
- KpiCard, KpiGrid from "@codeatlasdev/ui"
Behaviour to keep:
- `<KpiGrid>` with 2 `KpiCard` items
- `<KpiCard title="Churn Rate" value="5.2" unit="%" trend={-1.8} trendTone="positive-down" icon={Activity} />`
- `<KpiCard title="Response Time" value="1.4" unit="s" trend={-12.3} trendTone="positive-down" />` has no `icon`
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
- `<KpiGrid>` with 2 `KpiCard` items
- `<KpiCard title="Churn Rate" value="5.2" unit="%" trend={-1.8} trendTone="positive-down" icon={Activity} />`
- `<KpiCard title="Response Time" value="1.4" unit="s" trend={-12.3} trendTone="positive-down" />` has no `icon`
Related
Loading source.