A full-width dark band that shows four key figures. A heading and a short line about where the numbers come from sit at the top. Under them, four large figures in a bright accent colour run across the band, separated by hairline dividers, each with a label and a smaller note. On tablets the figures form a two by two grid, and on phones they stack in one column with a rule between each.
const stats = [
{ value: "2.4", unit: "m", label: "Parcels delivered last year", note: "Across 61 towns and cities" },
{ value: "98.2", unit: "%", label: "Arrived inside the booked hour", note: "Measured on every drop" },
{ value: "37", unit: "min", label: "Median time from depot to door", note: "Same-day orders only" },
{ value: "840", unit: "", label: "Cargo bikes and electric vans", note: "No diesel in the fleet" },
];
export default function StatsBandWithFourNumbersOnDark() {
return (
<section className="bg-slate-950 px-6 py-16 text-white sm:py-20">
<div className="mx-auto max-w-6xl">
<div className="flex flex-col gap-4 lg:flex-row lg:items-end lg:justify-between lg:gap-16">
<h2 className="max-w-xl text-3xl font-semibold tracking-tight sm:text-4xl">City delivery, measured in minutes rather than days</h2>
<p className="max-w-md leading-relaxed text-slate-300">
Figures from our own dispatch system for the twelve months to March, checked by an outside auditor each quarter.
</p>
</div>
<dl className="mt-12 grid grid-cols-1 border-t border-white/15 sm:grid-cols-2 lg:mt-14 lg:grid-cols-4">
{stats.map((s, i) => (
<div
key={s.label}
className={`flex flex-col-reverse justify-end border-b border-white/15 py-8 sm:px-8 lg:border-b-0 lg:py-10 ${i % 2 === 0 ? "sm:pl-0" : "sm:border-l"} ${i > 0 ? "lg:border-l lg:pl-8" : ""} ${i === stats.length - 1 ? "lg:pr-0" : ""}`}
>
<dt>
<span className="mt-4 block text-base font-medium text-white">{s.label}</span>
<span className="mt-1 block text-sm text-slate-400">{s.note}</span>
</dt>
<dd className="flex items-baseline gap-1 text-5xl font-semibold tracking-tight tabular-nums text-lime-300 sm:text-6xl">
{s.value}
{s.unit && <span className="text-2xl font-medium text-lime-300/80 sm:text-3xl">{s.unit}</span>}
</dd>
</div>
))}
</dl>
</div>
</section>
);
}
Install with one command: npx shadcn@latest add https://we.inc/r/stats-band-with-four-numbers-on-dark.json
Three or four. Each one should be something a visitor can understand without explanation. If a figure needs a paragraph to make sense, it belongs in the body text.
Give each item a bottom border by default and a left border from the breakpoint where it sits beside another item. Here that is `border-b` on phones, `sm:border-l` on every second item, and `lg:border-l` on all but the first.
A `<dl>` ties each value to its label in the markup, which is what a statistic is. Assistive technology can then announce the label with the number instead of reading two unrelated lines.
Yes, with a small effect that increases the value over about a second. Keep the final number in the markup so it is correct without scripts, and skip the animation for visitors who prefer reduced motion.
Round to what a person would say out loud, such as 2.4m, and keep precise figures for rates and times where the decimals matter. State the period the figures cover.
Related: Logo Cloud with Drawn Wordmarks, Numbered How It Works Steps in a Row, Bento Grid with Six Feature Tiles, Split Hero with Email Capture.
More content sections or all free UI components. Start for free to have a full site built around it.
We.Inc is an AI-powered website builder you can resell under your own brand. Launch a branded client dashboard, bill on Stripe Connect, and deliver AI-generated websites in minutes. White-label plans start at $99 a month for 25 client sites, with a 7-day free trial and no per-site fees.