Dashboard metric tile — label, big number, delta pill, and a sparkline trend. Plus a featured 2× variant with mini breakdown.
The default unit of every dashboard: a card showing one metric (Revenue, Users, Conversion rate) with its current value, a trend pill (+ or − vs previous period), a one-line context message, and a small sparkline chart underneath. Compact enough to fit 4–6 in a row at the top of a dashboard, expressive enough to communicate the headline numbers at a glance. The pattern that powers every analytics tool from Linear Insights to Stripe Dashboard.
A card with header row (small uppercase label + colored delta pill), big tabular-nums value (with optional prefix like "$" and suffix like "%"), one line of context ("vs last week"), and an SVG sparkline below. The sparkline is a 2-line SVG path: the trend line, plus a filled area beneath at low opacity. Green = up, red = down, accent color = neutral hero metric. The featured variant spans 2×2 cells with a larger sparkline and a mini-grid breakdown of sub-metrics beneath.
Build a dashboard KPI card grid with 6 metrics. Container: 4-column responsive CSS Grid, gap:14px. Each card: padding:20px, border:1px solid border-color, border-radius:14px, hover lift transform:translateY(-2px). Card layout: HEADER ROW with a tiny uppercase mono label on the left and a colored delta pill on the right ("↑ 8.2%" green for up, "↓ 2.1%" red for down, "— flat" gray). BIG VALUE in display serif at 36px with font-variant-numeric:tabular-nums and an optional prefix ($) or suffix (%, s, pp). CONTEXT line below ("vs $74,920 last month"). SPARKLINE at the bottom: an SVG with preserveAspectRatio:none, ~40px tall, containing TWO paths — a line path (stroke 2px, fill:none, color matches trend) and an area path (same shape closed at the bottom, fill same color, opacity 0.18). Featured variant: .kp-card.feat spans grid-column:span 2 grid-row:span 2 with larger value (76px), larger sparkline (110px tall), and a 3-column mini breakdown grid at the bottom showing sub-metrics. Trend colors: .up green #4ade80, .down red #f87171, accent purple/amber for hero metrics.