stats icons metrics social-proof numbers stats icons metrics numbers social-proof badges stats section with icons metric grid with colored badges
Stats with Icons
Fetch pattern JSON:
curl https://webspire.de/patterns/stats/icon.json icon.html
<section class="ws-stats bg-[var(--ws-stats-bg)] py-20">
<div class="mx-auto max-w-7xl px-6">
<div class="mx-auto max-w-2xl text-center">
<h2 class="text-3xl font-bold tracking-tight text-[var(--ws-stats-text)] sm:text-4xl">Built for impact</h2>
<p class="mt-4 text-base text-[var(--ws-stats-text-soft)]">Real numbers from real teams using Webspire in production.</p>
</div>
<div class="mt-12 grid gap-8 sm:grid-cols-2 lg:grid-cols-4">
<div class="text-center">
<div class="mx-auto flex h-12 w-12 items-center justify-center rounded-xl bg-indigo-100 text-indigo-600">
<svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M14.25 9.75L16.5 12l-2.25 2.25m-4.5 0L7.5 12l2.25-2.25M6 20.25h12A2.25 2.25 0 0020.25 18V6A2.25 2.25 0 0018 3.75H6A2.25 2.25 0 003.75 6v12A2.25 2.25 0 006 20.25z"/></svg>
</div>
<p class="mt-4 text-3xl font-bold tracking-tight text-[var(--ws-stats-text)]">60+</p>
<p class="mt-1 text-sm text-[var(--ws-stats-text-soft)]">UI patterns</p>
</div>
<div class="text-center">
<div class="mx-auto flex h-12 w-12 items-center justify-center rounded-xl bg-emerald-100 text-emerald-600">
<svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" 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-3xl font-bold tracking-tight text-[var(--ws-stats-text)]">5,000+</p>
<p class="mt-1 text-sm text-[var(--ws-stats-text-soft)]">Developers</p>
</div>
<div class="text-center">
<div class="mx-auto flex h-12 w-12 items-center justify-center rounded-xl bg-amber-100 text-amber-600">
<svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M3 16.5v2.25A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V16.5M16.5 12L12 16.5m0 0L7.5 12m4.5 4.5V3"/></svg>
</div>
<p class="mt-4 text-3xl font-bold tracking-tight text-[var(--ws-stats-text)]">50k+</p>
<p class="mt-1 text-sm text-[var(--ws-stats-text-soft)]">Downloads</p>
</div>
<div class="text-center">
<div class="mx-auto flex h-12 w-12 items-center justify-center rounded-xl bg-rose-100 text-rose-600">
<svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" 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-3xl font-bold tracking-tight text-[var(--ws-stats-text)]">4.9/5</p>
<p class="mt-1 text-sm text-[var(--ws-stats-text-soft)]">Rating</p>
</div>
</div>
</div>
</section>
Details
Responsive Dark Mode Tailwind Only SSR Safe Copy & Paste
Stable Published
statsiconsmetricssocial-proofnumbers
Slots
| Name | Required | Description |
|---|---|---|
| heading | No | Section title and description. |
| stats | Yes | Stat items with icon badge, number, and label. |
Four-column stats grid. Each stat has a colored icon badge (rounded-xl), large number, and descriptive label. Each column uses a different accent color (indigo, emerald, amber, rose). Responsive: 4 → 2 → 1 columns.