stats minimal metrics numbers dividers typography stats minimal metrics numbers dividers row inline minimal stats row with dividers simple number metrics inline
Stats Minimal
Fetch pattern JSON:
curl https://webspire.de/patterns/stats/minimal.json minimal.html
<section class="ws-stats py-16">
<div class="mx-auto max-w-4xl px-6">
<div class="flex flex-col items-center divide-y divide-[var(--ws-stats-border)] sm:flex-row sm:divide-x sm:divide-y-0">
<div class="flex-1 py-6 text-center sm:py-0 sm:px-8">
<p class="text-4xl font-bold tracking-tight text-[var(--ws-stats-text)]">500+</p>
<p class="mt-1 text-sm text-[var(--ws-stats-text-soft)]">Teams</p>
</div>
<div class="flex-1 py-6 text-center sm:py-0 sm:px-8">
<p class="text-4xl font-bold tracking-tight text-[var(--ws-stats-text)]">50k+</p>
<p class="mt-1 text-sm text-[var(--ws-stats-text-soft)]">Patterns copied</p>
</div>
<div class="flex-1 py-6 text-center sm:py-0 sm:px-8">
<p class="text-4xl font-bold tracking-tight text-[var(--ws-stats-text)]">99.9%</p>
<p class="mt-1 text-sm text-[var(--ws-stats-text-soft)]">Uptime</p>
</div>
<div class="flex-1 py-6 text-center sm:py-0 sm:px-8">
<p class="text-4xl font-bold tracking-tight text-[var(--ws-stats-text)]"><2s</p>
<p class="mt-1 text-sm text-[var(--ws-stats-text-soft)]">Build time</p>
</div>
</div>
</div>
</section>
Details
Responsive Dark Mode Tailwind Only SSR Safe Copy & Paste
Stable Published
statsminimalmetricsnumbersdividerstypography
Slots
| Name | Required | Description |
|---|---|---|
| stats | Yes | Array of stat items with value and label. |
Ultra-minimal horizontal stats row. Four stats separated by vertical dividers — large numbers with small labels, centered alignment. No cards, no borders, no shadows, just clean typography. Responsive: horizontal row on desktop, stacked with horizontal dividers on mobile.