Stats & Numbers

Stat band whose numbers count up when the section scrolls into view, then settle. No runtime dependency — plain Astro plus a small inline observer. Honours prefers-reduced-motion by rendering final values immediately.

Astro

Puts two numbers on one shared scale and calls out the delta — the proof-point shape for 'we cut your load time' or 'conversion rate before vs. after' case studies. Ships a screen-reader summary alongside the bars, so the comparison reads correctly even without the visual.

Astro

A single metric’s percentile rank against a peer benchmark on a quartile-shaded scale, with an auto-generated plain-English comparison sentence.

Astro

One headline figure sized to carry a section on its own, with a short annotation line underneath for context. Locale-safe number formatting (including compact '4.2M' notation) and a count-up that lands on the real value immediately for reduced-motion users.

Astro

The compact way to show actual-vs-target on a scorecard row: a thin fill against a qualitative poor/satisfactory/good band, with a tick marking the target, so a whole KPI reads in the space a single number used to take. Values stay in text too, so it holds up for anyone who can't read the bar visually.

Astro

Two to four nested progress rings in one dial, each with its own label, value and token colour.

Astro

A single large figure that counts up the moment it scrolls into view, paired with a directional change badge. No chart library, no runtime dependency — locale-safe number formatting and a permanent screen-reader value so the real number is never hidden behind the animation.

Astro

A lifetime running total — total revenue, total signups, total units shipped — with the current period's own contribution called out underneath, so a reader sees where things stand and what just moved the needle in one card instead of two.

Astro

Stacks several datasets as one-line range tracks so min, median, max and the middle-50% spread are readable at a glance down a list — load times by route, deal size by rep, response time by week. A compact alternative to a histogram when the shape of the data matters less than where it sits.

Astro

Shows how a total splits across a handful of categories — revenue by plan, traffic by channel, tickets by type — as a donut with a legend and an exact-value table underneath. Every segment carries a fixed colour, a direct percentage and a legend row at once, so the breakdown reads correctly even for colourblind viewers or screen readers.

Astro

A forward-looking point estimate shown with its low-high confidence range on one track, for projections rather than observed data.

Astro

Turns a signup, checkout or sales pipeline into a descending set of stage bars, with the step-over-step conversion rate and the raw drop-off count called out next to each one — so the question 'where are we losing people' is answered on sight, not after opening a tooltip.

Astro

A current-vs-target meter for revenue goals, quotas and SLAs, with a labelled threshold marker on the same track so the team can see at a glance whether they're ahead or behind. Over/under is never shown by colour alone — a worded status pill and a hatch texture on the fill carry the same meaning.

Astro

A GitHub-style year grid of daily activity — commits, workouts, orders, logins, anything with one value per day — shaded by a five-step intensity legend so density reads at a glance. Scrolls inside its own container, so a full year never breaks the page layout on mobile.

Astro

A ranked top-N list — top pages, top referrers, top SKUs — where bar length shows magnitude and every label and value stays fully legible outside the fill, never clipped or reversed on dark mode. Auto-sorts descending, prints the rank number on every row, and ships an exact-value table fallback for anyone who can't read the bars visually.

Astro

A value paired with a compact inline trend line — the pattern for a metric row where every figure needs its recent history at a glance. Hand-rolled SVG computed from a plain number array, no chart library, with an accessible text summary so the trend is never color-only.

Astro

A shared-card row of metric tiles for a dashboard header or report summary — label, value and an optional directional delta badge per tile. Reflows to a two-column grid on mobile so nothing truncates at narrow widths.

Astro

A grid of metric cards for a monthly or quarterly review, each one showing two periods side by side with its own delta. A per-metric goodDirection flag lets churn or latency colour correctly when down is the win, instead of every metric reading green-for-up.

Astro

A big figure where every digit is its own mechanical odometer reel that rolls into place, staggered left to right, and correct with zero JS.

Astro

A single horizontal bar divided into labelled proportions — traffic sources, plan mix, budget allocation — with a legend underneath carrying the exact share for every segment. Built for the "these parts make one hundred percent" read in one horizontal sweep, with a table fallback for anyone who can't read the bar visually.

Astro

A metric card with a Day / Week / Month switch that re-renders its own figure and delta instantly, no reload and no chart library — lets one card do the work three separate stat tiles used to, with a real keyboard-operable tab switcher underneath.

Astro

A circular gauge for any 0-100 metric — profile completion, renewal rate, score cards. Reads instantly with a centre value and a labelled track, and exposes real meter semantics so screen readers announce the number, not just the shape.

Astro

A ranked leaderboard — top accounts, top pages, top reps — where every row states how far it moved since the last period in plain words alongside the arrow, so a skim of the list still tells you who's climbing and who's slipping without reading a tooltip.

Astro

Grid of metric cards that scores each one against its own target, with a written verdict — on track, at risk, or missed — instead of colour-only pass/fail. Handles metrics where lower is the win, like churn or response time, with a single flag per card.

Astro

A half-circle gauge with a trig-computed needle, a swept zone band and a worded verdict pill — never colour alone.

Astro

A wall of small labelled trend lines for scanning every region, SKU or account at once instead of reading one chart at a time. Each tile carries its own value, delta and line, the grid reflows to a single column on mobile, and the full set is mirrored in a table for anyone who can't read the lines visually.

Astro

A compact dashboard-cell chart that stacks two or three series over time — traffic by channel, revenue by segment, tickets by priority — so composition and total trend read together without needing a full-width chart section.

Astro

A sequence of headline figures pinned along a dated rail, for a company-history or growth-milestones section. One flexbox rail flips from a horizontal scroller on desktop to a vertical list on mobile with a single media query, so there's no JS layout branching to get out of sync.

Astro

StatsSplitCounters — a value-proposition section: copy + two CTAs on the left, a 2x2 grid of count-up stat cards on the right.

Astro

A headline metric paired with a small multi-point trend line, sized to drop straight into a dashboard grid cell — MRR, active users, response time over time. Carries first/last axis labels and an optional second comparison series (this period vs last), with a legend and hidden data table so the trend is never colour-only.

Astro

Shows how a run of gains and losses builds a start total into an end total, step by step. Positive and negative steps carry their own glyph and position so the direction reads without relying on colour, with a plain-text breakdown underneath for screen readers.

Astro