Stats band
A marketing band of headline statistics separated by vertical dividers on a card background.
@quill
A marketing band of headline statistics separated by vertical dividers on a card background.
@quill
registry/blocks/stats-band.tsx
import { Separator } from '@/components/ui/separator'
const stats = [
{ value: '56', label: 'Components' },
{ value: '40+', label: 'Patterns' },
{ value: '5', label: 'Themes, light and dark' },
{ value: 'AA', label: 'WCAG 2.1 target' },
]
/** A marketing band of headline statistics separated by vertical dividers on a card background. */
export function StatsBand() {
return (
<section className="mx-auto w-full max-w-[880px] rounded-xl bg-card px-8 py-10 ring-1 ring-foreground/10">
<div className="flex flex-col items-center gap-2 text-center">
<span className="text-xs font-medium tracking-eyebrow uppercase text-ink-muted">
By the numbers
</span>
<h2 className="font-heading text-2xl text-foreground">A system that keeps its promises</h2>
</div>
<div className="mt-8 flex items-stretch justify-between gap-6 max-sm:flex-col max-sm:items-center">
{stats.map((s, i) => (
<div key={s.label} className="flex flex-1 items-center gap-6 max-sm:w-full max-sm:flex-col max-sm:gap-2">
{i > 0 && <Separator orientation="vertical" className="max-sm:hidden" />}
<div className="flex flex-1 flex-col items-center gap-1 text-center">
<span className="font-heading text-3xl leading-none text-accent-pigment-text">{s.value}</span>
<span className="text-sm text-muted-foreground">{s.label}</span>
</div>
</div>
))}
</div>
</section>
)
}
A marketing band of headline statistics separated by vertical dividers on a card background. Do: Color headline numbers from the accent's TEXT cut (--accent-pigment-text), so they follow the page's data-accent and still clear WCAG contrast on every ground. Don't: Use --accent-pigment for text. That is the decorative cut: on a Dawn card it is 2.9:1 for moss (the default accent) and 2.1:1 for gold, both under the 3:1 large-text minimum. It is also what --link and --ring already avoid. And never hardcode a fixed pigment (e.g. --terracotta) — that breaks the moment a consumer sets a different accent. Do: Pair every headline number with its own visible label directly beneath it (e.g. "Components"), as every stat in this band does. Don't: Ship a bare number with no label — a viewer has no way to tell what it counts. Use stat-cards when each number needs its own card with a period-over-period delta — this pattern is a single flat band with no per-item chrome or comparison. Use feature-section when you're describing capabilities, not reporting numbers.
