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 &amp; 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

Family

stats

Tier

enhanced

Kind

section

Extends

stats/base

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.