Stats Display Base

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

base.html

<section class="ws-stats-display bg-[var(--ws-stats-display-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-color-primary)]">Snippet metrics</p>
      <h2 class="mt-3 text-balance text-3xl font-bold tracking-tight text-[var(--ws-stats-display-text)] sm:text-4xl">At a Glance</h2>
    </div>
    <div class="mt-12 grid gap-6 sm:grid-cols-2 lg:grid-cols-4">
      <div class="rounded-lg border border-[var(--ws-stats-display-border)] bg-[var(--ws-stats-display-bg)] p-6 text-center">
        <p class="text-3xl font-bold tracking-tight text-[var(--ws-stats-display-text)]">25</p>
        <p class="mt-2 text-sm font-medium text-[var(--ws-stats-display-label)]">Lines</p>
      </div>
      <div class="rounded-lg border border-[var(--ws-stats-display-border)] bg-[var(--ws-stats-display-bg)] p-6 text-center">
        <p class="text-3xl font-bold tracking-tight text-[var(--ws-stats-display-text)]">655</p>
        <p class="mt-2 text-sm font-medium text-[var(--ws-stats-display-label)]">Bytes</p>
      </div>
      <div class="rounded-lg border border-[var(--ws-stats-display-border)] bg-[var(--ws-stats-display-bg)] p-6 text-center">
        <p class="text-3xl font-bold tracking-tight text-[var(--ws-stats-display-text)]">2024</p>
        <p class="mt-2 text-sm font-medium text-[var(--ws-stats-display-label)]">Baseline</p>
      </div>
      <div class="rounded-lg border border-[var(--ws-stats-display-border)] bg-[var(--ws-stats-display-bg)] p-6 text-center">
        <p class="text-3xl font-bold tracking-tight text-[var(--ws-stats-display-text)]">3</p>
        <p class="mt-2 text-sm font-medium text-[var(--ws-stats-display-label)]">Properties</p>
      </div>
    </div>
  </div>
</section>

Details

Family

stats-display

Tier

base

Kind

component

Responsive Dark Mode Tailwind Only SSR Safe Copy & Paste

Stable Published

statsmetricscardsgridnumbersdisplay

Slots

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

Clean four-column stat card grid with bordered cards, each displaying a bold value and a descriptive label. Responsive: 4 columns on desktop, 2 on tablet, 1 on mobile.