Stats Base

Fetch pattern JSON: curl https://webspire.de/patterns/stats/base.json

base.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)]">By the numbers</p>
      <h2 class="mt-3 text-balance text-3xl font-bold tracking-tight text-[var(--ws-stats-text)] sm:text-4xl">Proven at scale</h2>
    </div>
    <div class="mt-12 grid gap-8 sm:grid-cols-2 lg:grid-cols-4">
      <div class="text-center">
        <p class="text-4xl font-bold tracking-tight text-[var(--ws-stats-text)]">500+</p>
        <p class="mt-2 text-sm text-[var(--ws-stats-text-soft)]">Teams using Webspire</p>
      </div>
      <div class="text-center">
        <p class="text-4xl font-bold tracking-tight text-[var(--ws-stats-text)]">50k+</p>
        <p class="mt-2 text-sm text-[var(--ws-stats-text-soft)]">Patterns copied</p>
      </div>
      <div class="text-center">
        <p class="text-4xl font-bold tracking-tight text-[var(--ws-stats-text)]">99.9%</p>
        <p class="mt-2 text-sm text-[var(--ws-stats-text-soft)]">Uptime guarantee</p>
      </div>
      <div class="text-center">
        <p class="text-4xl font-bold tracking-tight text-[var(--ws-stats-text)]">&lt;2s</p>
        <p class="mt-2 text-sm text-[var(--ws-stats-text-soft)]">Build time average</p>
      </div>
    </div>
  </div>
</section>

Details

Family

stats

Tier

base

Kind

section

Responsive Dark Mode Tailwind Only SSR Safe Copy & Paste

Stable Published

statsmetricsnumberssocial-prooflanding-page

Slots

Name	Required	Description
heading	No	Section title.
stats	Yes	Array of stat items with value and label.

Clean four-column stats section with large numbers and descriptive labels. Responsive: 4 → 2 → 1 columns. Place after the hero or features section for quantified proof.