Stats and metrics sections

Number rows, KPI tiles, trend deltas and counters.

A number without a comparison is decoration. These lay out the figure, the label and the delta as one unit, so "12,480" arrives as "12,480 requests, up 8% on last week" — which is the only form a reader can act on. The marketing variants are the same shape with bigger type and fewer of them.

17 matching17 blocksFree to copy
Open the full page for this block

Hairline Stats Band

A four-up metrics strip with 1px hairline dividers, built from a single gap-px grid so the rules stay crisp on any display.

Stats51 linesNo deps
Open the full page for this block

Sparkline Metric Cards

KPI cards with a hand-built SVG trend line — no charting dependency for a path this file computes in twelve lines.

Charts & Metrics142 linesNo deps
Open the full page for this block

CSS Bar Chart Panel

Categorical bars in plain CSS with gridlines, hover values and a screen-reader table carrying the real numbers.

Charts & Metrics139 linesNo deps
Open the full page for this block

Dual-Series Line Chart

A year-over-year trend in inline SVG with a printed axis, no charting dependency and the same data repeated as a screen-reader table.

Charts & Metrics277 linesNo deps
Open the full page for this block

Conversion Funnel

A funnel that leads with the step-to-step rate and the people who fell out of it, not the tidy share-of-top percentages nobody can act on. Biggest drop named in words, and a footnote saying which definition of funnel this is.

Charts & Metrics195 lines1 dep
Open the full page for this block

Stat Cards with Deltas

Metrics carrying the direction they moved, with the good direction declared per stat so a falling churn rate reads as a win — arrow and text, never colour alone.

Stats135 lines1 dep
Open the full page for this block

Stats Beside the Argument

Four figures in a hairline card next to the paragraph making the claim, each carrying an optional source line — for numbers that mean nothing without knowing lower than what, over how long, across how many.

Stats151 lines1 dep
Open the full page for this block

Before-and-After Metric Table

The buyer’s current situation in one column and yours in the next, as a real table with scoped headers — the comparison they are actually making, which a delta against your own past cannot express.

Stats210 lines1 dep
Open the full page for this block

Milestone Timeline

The same measurement taken year after year down a vertical rail, each with the event that explains it — the shape for trajectory, which no snapshot of four numbers can claim.

Stats157 linesNo deps
Open the full page for this block

Benchmark Stat Band

Performance figures with the measurement method printed beside each one, so a sceptical reader can check rather than take them.

Stats121 linesNo deps
Open the full page for this block

Security Posture Band

The compliance and security facts a procurement reviewer asks for, stated as figures with their scope rather than as badges.

Stats116 linesNo deps
Open the full page for this block

Quota & Usage Meters

Consumption against plan limits, with warning thresholds, honest overage display and unmetered quotas that do not fake a bar.

Charts & Metrics172 lines1 dep
Open the full page for this block

Donut Breakdown

Where a total went, drawn as one conic-gradient ring with the total in the hole and every number repeated in the legend.

Charts & Metrics205 linesNo deps
Open the full page for this block

Daily Activity Heatmap

A year of daily activity as one square per day, bucketed against a quantile so a single outlier cannot flatten the scale.

Charts & Metrics231 linesNo deps
Open the full page for this block

Metric Alert List

Alert thresholds with their current distance from firing, so a quiet alert is visibly armed rather than possibly broken.

Charts & Metrics141 linesNo deps
Open the full page for this block

KPI Summary Band

The top-of-dashboard figures, each carrying the comparison period that makes a delta mean anything.

Charts & Metrics118 linesNo deps
Open the full page for this block

Market Price Ticker

The moving price rail that sits under an exchange’s navbar — direction carried by an arrow and a sign as well as by colour, and the duplicate half dropped rather than read twice.

Charts & Metrics180 lines1 dep

Questions about stats and metrics sections

Should the numbers count up on scroll?
On a marketing page, occasionally — it draws the eye once. In a dashboard, never: a figure that animates is a figure you cannot read at a glance, and it re-animates on every re-render.
How do I show a metric that got worse?
Same tile, different colour and an arrow that points down — and do not invert the colour for metrics where down is good (churn, latency) without saying so. The delta needs a text label either way, because colour is not a direction.
Are these stats and metrics sections free to use?
All 17 are free to copy and use in your own projects, including commercial ones. A Pro licence exists for redistribution — shipping them inside a product other people buy — and the full terms are on the licence page.
How do I add one to my project?
Install it with the CLI: `npx hoverlab add stats-band` writes the component and its dependencies into your project. Every artifact here also has a copy button for the raw source, and an "Open in sandbox" link if you would rather try it first.