stats metrics icons grid divided kpi numbers dark-variant stats metrics icons kpi grid dividers numbers dark light stats grid with colored icons metrics display with icon circles and dividers KPI grid with large numbers and icons
Stats Display With Icon Grid
Fetch pattern JSON:
curl https://webspire.de/patterns/stats-display/with-icon-grid.json with-icon-grid.html
<section class="ws-stats-display bg-[var(--ws-color-bg)] py-20">
<div class="mx-auto max-w-7xl px-6">
<div class="mx-auto max-w-2xl text-center">
<p class="text-sm font-semibold uppercase tracking-[0.18em] text-[var(--ws-color-accent)]">By the numbers</p>
<h2 class="mt-3 text-balance text-3xl font-bold tracking-tight text-[var(--ws-color-text)] sm:text-4xl">Trusted by teams worldwide</h2>
</div>
<!-- Light variant — divided grid, no card bg -->
<div class="mt-12 grid divide-y divide-[var(--ws-color-border)] sm:grid-cols-2 sm:divide-x sm:divide-y-0 lg:grid-cols-4">
<!-- Stat 1 -->
<div class="flex flex-col items-center px-8 py-10 text-center first:pt-0 sm:first:pt-10">
<div class="flex h-10 w-10 items-center justify-center rounded-full bg-violet-100">
<svg class="h-5 w-5 text-violet-600" fill="none" viewBox="0 0 24 24" stroke-width="1.75" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" d="M15 19.128a9.38 9.38 0 002.625.372 9.337 9.337 0 004.121-.952 4.125 4.125 0 00-7.533-2.493M15 19.128v-.003c0-1.113-.285-2.16-.786-3.07M15 19.128v.106A12.318 12.318 0 018.624 21c-2.331 0-4.512-.645-6.374-1.766l-.001-.109a6.375 6.375 0 0111.964-3.07M12 6.375a3.375 3.375 0 11-6.75 0 3.375 3.375 0 016.75 0zm8.25 2.25a2.625 2.625 0 11-5.25 0 2.625 2.625 0 015.25 0z"/>
</svg>
</div>
<p class="mt-4 text-5xl font-black tabular-nums text-[var(--ws-color-text)]">12K+</p>
<p class="mt-1 text-sm font-semibold text-[var(--ws-color-text)]">Active users</p>
<p class="mt-1 text-xs text-[var(--ws-color-text-soft)]">Across 60+ countries</p>
</div>
<!-- Stat 2 -->
<div class="flex flex-col items-center px-8 py-10 text-center">
<div class="flex h-10 w-10 items-center justify-center rounded-full bg-emerald-100">
<svg class="h-5 w-5 text-emerald-600" fill="none" viewBox="0 0 24 24" stroke-width="1.75" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" d="M3.75 13.5l10.5-11.25L12 10.5h8.25L9.75 21.75 12 13.5H3.75z"/>
</svg>
</div>
<p class="mt-4 text-5xl font-black tabular-nums text-[var(--ws-color-text)]">99%</p>
<p class="mt-1 text-sm font-semibold text-[var(--ws-color-text)]">Uptime SLA</p>
<p class="mt-1 text-xs text-[var(--ws-color-text-soft)]">30-day rolling average</p>
</div>
<!-- Stat 3 -->
<div class="flex flex-col items-center px-8 py-10 text-center">
<div class="flex h-10 w-10 items-center justify-center rounded-full bg-amber-100">
<svg class="h-5 w-5 text-amber-600" fill="none" viewBox="0 0 24 24" stroke-width="1.75" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" d="M11.48 3.499a.562.562 0 011.04 0l2.125 5.111a.563.563 0 00.475.345l5.518.442c.499.04.701.663.321.988l-4.204 3.602a.563.563 0 00-.182.557l1.285 5.385a.562.562 0 01-.84.61l-4.725-2.885a.563.563 0 00-.586 0L6.982 20.54a.562.562 0 01-.84-.61l1.285-5.386a.562.562 0 00-.182-.557l-4.204-3.602a.563.563 0 01.321-.988l5.518-.442a.563.563 0 00.475-.345L11.48 3.5z"/>
</svg>
</div>
<p class="mt-4 text-5xl font-black tabular-nums text-[var(--ws-color-text)]">4.9</p>
<p class="mt-1 text-sm font-semibold text-[var(--ws-color-text)]">Avg. rating</p>
<p class="mt-1 text-xs text-[var(--ws-color-text-soft)]">From 2,400+ reviews</p>
</div>
<!-- Stat 4 -->
<div class="flex flex-col items-center px-8 py-10 text-center">
<div class="flex h-10 w-10 items-center justify-center rounded-full bg-sky-100">
<svg class="h-5 w-5 text-sky-600" fill="none" viewBox="0 0 24 24" stroke-width="1.75" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75m-3-7.036A11.959 11.959 0 013.598 6 11.99 11.99 0 003 9.749c0 5.592 3.824 10.29 9 11.623 5.176-1.332 9-6.03 9-11.622 0-1.31-.21-2.571-.598-3.751h-.152c-3.196 0-6.1-1.248-8.25-3.285z"/>
</svg>
</div>
<p class="mt-4 text-5xl font-black tabular-nums text-[var(--ws-color-text)]">500+</p>
<p class="mt-1 text-sm font-semibold text-[var(--ws-color-text)]">UI patterns</p>
<p class="mt-1 text-xs text-[var(--ws-color-text-soft)]">Across 165+ families</p>
</div>
</div>
<!-- Dark variant -->
<div class="mt-12 overflow-hidden rounded-3xl bg-[var(--ws-color-surface-alt)]">
<div class="grid divide-y divide-slate-700 sm:grid-cols-2 sm:divide-x sm:divide-y-0 lg:grid-cols-4">
<!-- Stat 1 dark -->
<div class="flex flex-col items-center px-8 py-10 text-center">
<div class="flex h-10 w-10 items-center justify-center rounded-full bg-violet-500/20">
<svg class="h-5 w-5 text-violet-400" fill="none" viewBox="0 0 24 24" stroke-width="1.75" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" d="M15 19.128a9.38 9.38 0 002.625.372 9.337 9.337 0 004.121-.952 4.125 4.125 0 00-7.533-2.493M15 19.128v-.003c0-1.113-.285-2.16-.786-3.07M15 19.128v.106A12.318 12.318 0 018.624 21c-2.331 0-4.512-.645-6.374-1.766l-.001-.109a6.375 6.375 0 0111.964-3.07M12 6.375a3.375 3.375 0 11-6.75 0 3.375 3.375 0 016.75 0zm8.25 2.25a2.625 2.625 0 11-5.25 0 2.625 2.625 0 015.25 0z"/>
</svg>
</div>
<p class="mt-4 text-5xl font-black tabular-nums text-white">12K+</p>
<p class="mt-1 text-sm font-semibold text-slate-200">Active users</p>
<p class="mt-1 text-xs text-slate-400">Across 60+ countries</p>
</div>
<!-- Stat 2 dark -->
<div class="flex flex-col items-center px-8 py-10 text-center">
<div class="flex h-10 w-10 items-center justify-center rounded-full bg-emerald-500/20">
<svg class="h-5 w-5 text-emerald-400" fill="none" viewBox="0 0 24 24" stroke-width="1.75" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" d="M3.75 13.5l10.5-11.25L12 10.5h8.25L9.75 21.75 12 13.5H3.75z"/>
</svg>
</div>
<p class="mt-4 text-5xl font-black tabular-nums text-white">99%</p>
<p class="mt-1 text-sm font-semibold text-slate-200">Uptime SLA</p>
<p class="mt-1 text-xs text-slate-400">30-day rolling average</p>
</div>
<!-- Stat 3 dark -->
<div class="flex flex-col items-center px-8 py-10 text-center">
<div class="flex h-10 w-10 items-center justify-center rounded-full bg-amber-500/20">
<svg class="h-5 w-5 text-amber-400" fill="none" viewBox="0 0 24 24" stroke-width="1.75" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" d="M11.48 3.499a.562.562 0 011.04 0l2.125 5.111a.563.563 0 00.475.345l5.518.442c.499.04.701.663.321.988l-4.204 3.602a.563.563 0 00-.182.557l1.285 5.385a.562.562 0 01-.84.61l-4.725-2.885a.563.563 0 00-.586 0L6.982 20.54a.562.562 0 01-.84-.61l1.285-5.386a.562.562 0 00-.182-.557l-4.204-3.602a.563.563 0 01.321-.988l5.518-.442a.563.563 0 00.475-.345L11.48 3.5z"/>
</svg>
</div>
<p class="mt-4 text-5xl font-black tabular-nums text-white">4.9</p>
<p class="mt-1 text-sm font-semibold text-slate-200">Avg. rating</p>
<p class="mt-1 text-xs text-slate-400">From 2,400+ reviews</p>
</div>
<!-- Stat 4 dark -->
<div class="flex flex-col items-center px-8 py-10 text-center">
<div class="flex h-10 w-10 items-center justify-center rounded-full bg-sky-500/20">
<svg class="h-5 w-5 text-sky-400" fill="none" viewBox="0 0 24 24" stroke-width="1.75" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75m-3-7.036A11.959 11.959 0 013.598 6 11.99 11.99 0 003 9.749c0 5.592 3.824 10.29 9 11.623 5.176-1.332 9-6.03 9-11.622 0-1.31-.21-2.571-.598-3.751h-.152c-3.196 0-6.1-1.248-8.25-3.285z"/>
</svg>
</div>
<p class="mt-4 text-5xl font-black tabular-nums text-white">500+</p>
<p class="mt-1 text-sm font-semibold text-slate-200">UI patterns</p>
<p class="mt-1 text-xs text-slate-400">Across 165+ families</p>
</div>
</div>
</div>
</div>
</section>
Details
Responsive Dark Mode Tailwind Only SSR Safe Copy & Paste
Stable Published
statsmetricsiconsgriddividedkpinumbersdark-variant
Slots
| Name | Required | Description |
|---|---|---|
| heading | No | Section eyebrow and title. |
| stats-light | Yes | Four stat cells in the light divided grid. |
| stats-dark | No | Same four stats in the dark variant block. |
Four stat metrics displayed in a flat divided grid — no card backgrounds, just divide-x and divide-y lines between cells. Each cell has a colored icon circle, a large number (text-5xl font-black), a label, and a small descriptor. Includes both a light variant and a dark variant (slate-900 background, translucent icon circles).