features stats metrics numbers grid kpi highlight stats metrics numbers kpi grid features highlight data product metrics grid with large numbers stat highlight section
Stat Highlight Grid
Fetch pattern JSON:
curl https://webspire.de/patterns/features/stat-highlight.json stat-highlight.html
<section class="ws-features-stat-highlight bg-[var(--ws-color-bg)] py-20">
<div class="mx-auto max-w-7xl px-6">
<div class="mb-12 text-center">
<h2 class="text-3xl font-bold tracking-tight text-[var(--ws-color-text)] sm:text-4xl">Platform at a glance</h2>
<p class="mt-4 text-base text-[var(--ws-color-text-soft)]">The numbers behind what we've built and who uses it.</p>
</div>
<div class="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3">
<!-- Featured stat (double border treatment) -->
<div class="relative rounded-2xl border-2 border-[var(--ws-color-accent)] p-8 text-center shadow-sm">
<div class="absolute inset-1 rounded-xl border border-[var(--ws-color-accent)]/30 pointer-events-none"></div>
<div class="flex justify-center mb-4">
<svg xmlns="http://www.w3.org/2000/svg" class="h-10 w-10 text-[var(--ws-color-text-soft)]" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
<path stroke-linecap="round" stroke-linejoin="round" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0" />
</svg>
</div>
<div class="border-b border-[var(--ws-color-border)] pb-4 mb-4">
<p class="text-5xl font-black text-[var(--ws-color-accent)]">10<span class="text-2xl">k+</span></p>
<p class="mt-1 text-sm font-semibold uppercase tracking-wider text-[var(--ws-color-text-soft)]">Active users</p>
</div>
<p class="text-sm text-[var(--ws-color-text-soft)]">Designers and developers building with Webspire patterns every month.</p>
</div>
<!-- Stat 2 -->
<div class="rounded-2xl border border-[var(--ws-color-border)] p-8 text-center">
<div class="flex justify-center mb-4">
<svg xmlns="http://www.w3.org/2000/svg" class="h-10 w-10 text-[var(--ws-color-text-soft)]" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
<path stroke-linecap="round" stroke-linejoin="round" d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 8a1 1 0 011-1h6a1 1 0 011 1v6a1 1 0 01-1 1H5a1 1 0 01-1-1v-6zm12 0a1 1 0 011-1h2a1 1 0 011 1v6a1 1 0 01-1 1h-2a1 1 0 01-1-1v-6z" />
</svg>
</div>
<div class="border-b border-[var(--ws-color-border)] pb-4 mb-4">
<p class="text-5xl font-black text-[var(--ws-color-accent)]">500<span class="text-2xl">+</span></p>
<p class="mt-1 text-sm font-semibold uppercase tracking-wider text-[var(--ws-color-text-soft)]">UI patterns</p>
</div>
<p class="text-sm text-[var(--ws-color-text-soft)]">Production-ready sections covering every page type and use case.</p>
</div>
<!-- Stat 3 -->
<div class="rounded-2xl border border-[var(--ws-color-border)] p-8 text-center">
<div class="flex justify-center mb-4">
<svg xmlns="http://www.w3.org/2000/svg" class="h-10 w-10 text-[var(--ws-color-text-soft)]" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
<path stroke-linecap="round" stroke-linejoin="round" d="M13 10V3L4 14h7v7l9-11h-7z" />
</svg>
</div>
<div class="border-b border-[var(--ws-color-border)] pb-4 mb-4">
<p class="text-5xl font-black text-[var(--ws-color-accent)]">0<span class="text-2xl">ms</span></p>
<p class="mt-1 text-sm font-semibold uppercase tracking-wider text-[var(--ws-color-text-soft)]">JS on load</p>
</div>
<p class="text-sm text-[var(--ws-color-text-soft)]">Every pattern is SSR-safe and ships zero JavaScript by default.</p>
</div>
<!-- Stat 4 -->
<div class="rounded-2xl border border-[var(--ws-color-border)] p-8 text-center">
<div class="flex justify-center mb-4">
<svg xmlns="http://www.w3.org/2000/svg" class="h-10 w-10 text-[var(--ws-color-text-soft)]" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
<path stroke-linecap="round" stroke-linejoin="round" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
</div>
<div class="border-b border-[var(--ws-color-border)] pb-4 mb-4">
<p class="text-5xl font-black text-[var(--ws-color-accent)]">165<span class="text-2xl">+</span></p>
<p class="mt-1 text-sm font-semibold uppercase tracking-wider text-[var(--ws-color-text-soft)]">Pattern families</p>
</div>
<p class="text-sm text-[var(--ws-color-text-soft)]">Organized into families with base + enhanced tiers for every need.</p>
</div>
<!-- Stat 5 -->
<div class="rounded-2xl border border-[var(--ws-color-border)] p-8 text-center">
<div class="flex justify-center mb-4">
<svg xmlns="http://www.w3.org/2000/svg" class="h-10 w-10 text-[var(--ws-color-text-soft)]" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
<path stroke-linecap="round" stroke-linejoin="round" d="M7 21a4 4 0 01-4-4V5a2 2 0 012-2h4a2 2 0 012 2v12a4 4 0 01-4 4zm0 0h12a2 2 0 002-2v-4a2 2 0 00-2-2h-2.343M11 7.343l1.657-1.657a2 2 0 012.828 0l2.829 2.829a2 2 0 010 2.828l-8.486 8.485M7 17h.01" />
</svg>
</div>
<div class="border-b border-[var(--ws-color-border)] pb-4 mb-4">
<p class="text-5xl font-black text-[var(--ws-color-accent)]">42<span class="text-2xl">+</span></p>
<p class="mt-1 text-sm font-semibold uppercase tracking-wider text-[var(--ws-color-text-soft)]">Full templates</p>
</div>
<p class="text-sm text-[var(--ws-color-text-soft)]">Standalone HTML pages ready to drop in with zero build tools required.</p>
</div>
<!-- Stat 6 -->
<div class="rounded-2xl border border-[var(--ws-color-border)] p-8 text-center">
<div class="flex justify-center mb-4">
<svg xmlns="http://www.w3.org/2000/svg" class="h-10 w-10 text-[var(--ws-color-text-soft)]" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
<path stroke-linecap="round" stroke-linejoin="round" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
</div>
<div class="border-b border-[var(--ws-color-border)] pb-4 mb-4">
<p class="text-5xl font-black text-[var(--ws-color-accent)]"><5<span class="text-2xl">min</span></p>
<p class="mt-1 text-sm font-semibold uppercase tracking-wider text-[var(--ws-color-text-soft)]">Time to first page</p>
</div>
<p class="text-sm text-[var(--ws-color-text-soft)]">From zero to a styled, responsive page in under five minutes.</p>
</div>
</div>
</div>
</section>
Details
Responsive Dark Mode Tailwind Only SSR Safe Copy & Paste
Stable Published
featuresstatsmetricsnumbersgridkpihighlight
Slots
| Name | Required | Description |
|---|---|---|
| heading | Yes | Section title and subtitle. |
| stats | Yes | Six stat boxes: icon, metric number, unit, label, description. |
Six stat boxes arranged in a 3×2 grid. Each box contains an SVG icon, a large accent-colored number with unit suffix, a capitalized label, a divider, and a one-line description. The first box receives a double-border treatment (accent-colored outer border + faint inner ring) to emphasize the primary metric. No card shadows — flat cells defined purely by border and spacing.