Components / Metric Card
Metric Card
KPI metric display with trend indicator, sparkline, comparison text, invertible trend, and loading skeleton.
data-display v0.2.0
Playground
Examples
Dashboard row
<cg-stack direction="row" gap="md" style="flex-wrap:wrap;"><cg-metric-card title="Revenue" value="$2.4M" delta="+18%" trend="up" icon="trending-up" comparison="vs last quarter"></cg-metric-card><cg-metric-card title="Users" value="14.2K" delta="+5%" trend="up" icon="users"></cg-metric-card><cg-metric-card title="Churn" value="1.8%" delta="-0.3%" trend="down" invertTrend icon="trending-down" comparison="vs last month"></cg-metric-card></cg-stack>With sparkline
<cg-metric-card title="MRR" value="$48.5K" delta="+22%" trend="up" icon="chart" comparison="vs last month" style="max-width:280px;"></cg-metric-card>Inverted trend (down=good)
<cg-metric-card title="P95 Latency" value="120ms" delta="-15%" trend="down" invertTrend icon="clock" comparison="vs yesterday" style="max-width:280px;"></cg-metric-card>Compact
<cg-metric-card size="sm" title="Active" value="1,024" delta="+8%" trend="up" style="max-width:200px;"></cg-metric-card>Loading
<cg-metric-card loading style="max-width:240px;"></cg-metric-card>Import
import { CgMetricCard } from '@cognivo/components';// Or tree-shake: import '@cognivo/components/cg-metric-card';Per-component imports ship only that component (~8 kB gzip).
API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
title | string | — | Metric label (e.g. "Revenue") |
value | string | — | Metric value (e.g. "$2.4M") |
delta | string | — | Change text (e.g. "+18%") |
trend | "up" | "down" | "neutral" | "neutral" | Trend direction |
invertTrend | boolean | false | Flip sentiment — down=good for metrics like churn, latency |
icon | string | — | cg-icon name (e.g. "trending-up") or emoji |
comparison | string | — | Comparison text (e.g. "vs last quarter") |
sparkline | number[] | — | Mini bar chart data points |
size | "sm" | "md" | "lg" | "md" | Card size |
loading | boolean | false | Show loading skeleton |
clickable | boolean | false | Enable click interaction |
rounded | "none" | "sm" | "md" | "lg" | "lg" | Border radius variant |
Events
| Event | Detail | Description |
|---|---|---|
cg-metric-click | {title, value, delta, trend} | On click |