Stats Milestone Grid

Fetch pattern JSON: curl https://webspire.de/patterns/stats/milestone-grid.json

milestone-grid.html

<section class="ws-stats ws-features bg-[var(--ws-features-bg)] py-20">
  <div class="mx-auto max-w-6xl px-6">
    <div class="mb-12 text-center">
      <h2 class="text-2xl font-bold tracking-tight text-[var(--ws-features-text)] sm:text-3xl">Zahlen, die für uns sprechen</h2>
    </div>
    <dl class="grid grid-cols-2 gap-8 md:grid-cols-4">

      <div class="flex flex-col items-center text-center">
        <dd class="text-5xl font-bold tabular-nums text-[var(--ws-features-text)] sm:text-6xl">
          40<span class="text-2xl text-[var(--ws-features-icon-color)]">+</span>
        </dd>
        <dt class="mt-2 text-sm font-medium uppercase tracking-widest text-[var(--ws-features-text-muted)]">Jahre Erfahrung</dt>
      </div>

      <div class="flex flex-col items-center text-center">
        <dd class="text-5xl font-bold tabular-nums text-[var(--ws-features-text)] sm:text-6xl">
          1.200<span class="text-2xl text-[var(--ws-features-icon-color)]">+</span>
        </dd>
        <dt class="mt-2 text-sm font-medium uppercase tracking-widest text-[var(--ws-features-text-muted)]">Zufriedene Kunden</dt>
      </div>

      <div class="flex flex-col items-center text-center">
        <dd class="text-5xl font-bold tabular-nums text-[var(--ws-features-text)] sm:text-6xl">
          120<span class="text-2xl text-[var(--ws-features-icon-color)]">+</span>
        </dd>
        <dt class="mt-2 text-sm font-medium uppercase tracking-widest text-[var(--ws-features-text-muted)]">Mitarbeiter:innen</dt>
      </div>

      <div class="flex flex-col items-center text-center">
        <dd class="text-5xl font-bold tabular-nums text-[var(--ws-features-text)] sm:text-6xl">
          98<span class="text-2xl text-[var(--ws-features-icon-color)]">%</span>
        </dd>
        <dt class="mt-2 text-sm font-medium uppercase tracking-widest text-[var(--ws-features-text-muted)]">Kundenzufriedenheit</dt>
      </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

statsnumbersmilestoneskpicountergridb2b

Slots

Name	Required	Description
heading	No	Optional section heading above the stats grid.
stats	Yes	Array of stat items — each with a number, optional suffix and a label.

Nutzt <dl> + <dt> + <dd> für semantisch korrekte Key-Value-Pairs. Die Zahl steht als <dd> vor dem Label <dt> im DOM — flex-col mit natürlicher Reihenfolge hält visuelle und Screen-Reader-Reihenfolge konsistent. Suffix-Symbole (+, %, k) werden als <span> mit reduzierter Schriftgröße eingebettet und sind Teil des sichtbaren Werts.