Counter tile with a tone accent bar and a required context line, because a bare figure means nothing and the second line is what a person can act on. Optionally clickable to drill into the underlying list.
Loading preview...
import KpiTile from '@/components/ui/crash-claim-kpi-tile'
export default function KpiTileDemo() {
return (
<div
style={{
display: 'grid',
gap: 16,
gridTemplateColumns: 'repeat(auto-fit, minmax(200px, 1fr))',
padding: 24,
background: '#F4F7FA',
}}
>
<KpiTile label="Active claims" value="20,497" context="Loaded from the legacy estate" />
<KpiTile
label="Awaiting validation"
value="7,371"
context="No third party insurer claim number"
tone="warn"
onClick={() => undefined}
/>
<KpiTile
label="Client onboarding"
value="4,249"
context="Authority to act not signed"
tone="warn"
/>
<KpiTile label="Red flags" value="80" context="Waiting on a supervisor decision" tone="risk" />
</div>
)
}