stats comparison before-after metrics improvement growth stats comparison before-after improvement growth change metrics before and after stats section metrics comparison with percentage change
Stats Comparison
Fetch pattern JSON:
curl https://webspire.de/patterns/stats/comparison.json comparison.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">
<p class="text-sm font-semibold uppercase tracking-[0.18em] text-[var(--ws-stats-accent)]">Before & after</p>
<h2 class="mt-3 text-balance text-3xl font-bold tracking-tight text-[var(--ws-stats-text)] sm:text-4xl">The impact speaks for itself</h2>
<p class="mt-4 text-base text-[var(--ws-stats-text-soft)]">See how key metrics improved after switching to our platform.</p>
</div>
<div class="mt-14 grid gap-8 sm:grid-cols-2 lg:grid-cols-4">
<!-- Card 1: Page Load Time -->
<div class="rounded-2xl border border-[var(--ws-stats-border)] bg-[var(--ws-stats-bg)] p-6 text-center">
<p class="text-sm font-medium text-[var(--ws-stats-text-soft)]">Page Load Time</p>
<p class="mt-3 text-lg text-[var(--ws-stats-text-muted)] line-through">4.2s</p>
<p class="mt-1 text-4xl font-bold tracking-tight text-[var(--ws-stats-accent)]">1.1s</p>
<div class="mt-3 inline-flex items-center gap-1 rounded-full bg-emerald-100 px-2.5 py-1 text-sm font-medium text-emerald-700">
<svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 10.5L12 3m0 0l7.5 7.5M12 3v18"/></svg>
74% faster
</div>
</div>
<!-- Card 2: Conversion Rate -->
<div class="rounded-2xl border border-[var(--ws-stats-border)] bg-[var(--ws-stats-bg)] p-6 text-center">
<p class="text-sm font-medium text-[var(--ws-stats-text-soft)]">Conversion Rate</p>
<p class="mt-3 text-lg text-[var(--ws-stats-text-muted)] line-through">2.1%</p>
<p class="mt-1 text-4xl font-bold tracking-tight text-[var(--ws-stats-accent)]">5.8%</p>
<div class="mt-3 inline-flex items-center gap-1 rounded-full bg-emerald-100 px-2.5 py-1 text-sm font-medium text-emerald-700">
<svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 10.5L12 3m0 0l7.5 7.5M12 3v18"/></svg>
176% increase
</div>
</div>
<!-- Card 3: Bounce Rate -->
<div class="rounded-2xl border border-[var(--ws-stats-border)] bg-[var(--ws-stats-bg)] p-6 text-center">
<p class="text-sm font-medium text-[var(--ws-stats-text-soft)]">Bounce Rate</p>
<p class="mt-3 text-lg text-[var(--ws-stats-text-muted)] line-through">68%</p>
<p class="mt-1 text-4xl font-bold tracking-tight text-[var(--ws-stats-accent)]">31%</p>
<div class="mt-3 inline-flex items-center gap-1 rounded-full bg-emerald-100 px-2.5 py-1 text-sm font-medium text-emerald-700">
<svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 10.5L12 3m0 0l7.5 7.5M12 3v18"/></svg>
54% lower
</div>
</div>
<!-- Card 4: Dev Time -->
<div class="rounded-2xl border border-[var(--ws-stats-border)] bg-[var(--ws-stats-bg)] p-6 text-center">
<p class="text-sm font-medium text-[var(--ws-stats-text-soft)]">Dev Time per Page</p>
<p class="mt-3 text-lg text-[var(--ws-stats-text-muted)] line-through">8 hrs</p>
<p class="mt-1 text-4xl font-bold tracking-tight text-[var(--ws-stats-accent)]">45 min</p>
<div class="mt-3 inline-flex items-center gap-1 rounded-full bg-emerald-100 px-2.5 py-1 text-sm font-medium text-emerald-700">
<svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 10.5L12 3m0 0l7.5 7.5M12 3v18"/></svg>
91% faster
</div>
</div>
</div>
</div>
</section>
Details
Responsive Dark Mode Tailwind Only SSR Safe Copy & Paste
Stable Published
statscomparisonbefore-aftermetricsimprovementgrowth
Slots
| Name | Required | Description |
|---|---|---|
| heading | No | Section title, subtitle, and kicker text. |
| stats | Yes | Stat cards with metric name, before value, after value, and change indicator. |
Before-and-after stats comparison with four metric cards. Each card shows the metric name, a muted struck-through “before” value, a large accent-colored “after” value, and a percentage change badge with directional arrow. Cards have bordered rounded containers. Responsive: 4 → 2 → 1 columns.