Stats with Links

Fetch pattern JSON: curl https://webspire.de/patterns/stats/with-links.json

with-links.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)]">Trusted at scale</p>
      <h2 class="mt-3 text-balance text-3xl font-bold tracking-tight text-[var(--ws-stats-text)] sm:text-4xl">Numbers that speak for themselves</h2>
    </div>

    <dl class="mt-16 grid gap-8 sm:grid-cols-3">
      <div class="flex flex-col items-center rounded-2xl border border-[var(--ws-stats-border)] bg-[var(--ws-stats-card-bg)] px-8 py-10 text-center">
        <dt class="order-2 mt-3 text-base text-[var(--ws-stats-text-soft)]">Community Members</dt>
        <dd class="order-1 text-5xl font-bold tracking-tight text-[var(--ws-stats-text)]">3,000+</dd>
        <a href="#" class="order-3 mt-6 inline-flex items-center gap-1 text-sm font-medium text-[var(--ws-stats-accent)] hover:underline">
          Join Discord
          <svg class="h-4 w-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M17 8l4 4m0 0l-4 4m4-4H3"/></svg>
        </a>
      </div>

      <div class="flex flex-col items-center rounded-2xl border border-[var(--ws-stats-border)] bg-[var(--ws-stats-card-bg)] px-8 py-10 text-center">
        <dt class="order-2 mt-3 text-base text-[var(--ws-stats-text-soft)]">Organizations</dt>
        <dd class="order-1 text-5xl font-bold tracking-tight text-[var(--ws-stats-text)]">12,000+</dd>
        <a href="#" class="order-3 mt-6 inline-flex items-center gap-1 text-sm font-medium text-[var(--ws-stats-accent)] hover:underline">
          Read case studies
          <svg class="h-4 w-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M17 8l4 4m0 0l-4 4m4-4H3"/></svg>
        </a>
      </div>

      <div class="flex flex-col items-center rounded-2xl border border-[var(--ws-stats-border)] bg-[var(--ws-stats-card-bg)] px-8 py-10 text-center">
        <dt class="order-2 mt-3 text-base text-[var(--ws-stats-text-soft)]">Uptime Guarantee</dt>
        <dd class="order-1 text-5xl font-bold tracking-tight text-[var(--ws-stats-text)]">99.99%</dd>
        <a href="#" class="order-3 mt-6 inline-flex items-center gap-1 text-sm font-medium text-[var(--ws-stats-accent)] hover:underline">
          View status page
          <svg class="h-4 w-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M17 8l4 4m0 0l-4 4m4-4H3"/></svg>
        </a>
      </div>
    </dl>
  </div>
</section>

Details

Family

stats

Tier

enhanced

Kind

section

Extends

stats/base

Responsive Dark Mode Tailwind Only SSR Safe Copy & Paste

Stable Published

statsmetricskpilinksctasocial-proofnumbers

Slots

Name	Required	Description
heading	No	Section title and eyebrow text.
stats	Yes	Stat cards with value, label, and link.

Three stat cards in a grid, each showing a large number, a label, and a directional link to a relevant destination. Inspired by the pattern on infisical.com — effective for linking metrics directly to evidence (case studies, status pages, community channels).