Stats with Trend

Fetch pattern JSON: curl https://webspire.de/patterns/data-stats/with-trend.json
with-trend.html
<section class="ws-data-stats bg-[var(--ws-data-stats-bg)] py-20">
  <div class="mx-auto max-w-7xl px-6">
    <div class="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-4">
      <div class="rounded-2xl border border-[var(--ws-data-stats-border)] bg-[var(--ws-data-stats-bg)] p-6 shadow-md">
        <div class="flex items-center gap-3">
          <div class="flex h-10 w-10 items-center justify-center rounded-lg bg-[var(--ws-data-stats-accent)]/10">
            <svg class="h-5 w-5 text-[var(--ws-data-stats-accent)]" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
              <path stroke-linecap="round" stroke-linejoin="round" d="M12 6v12m-3-2.818.879.659c1.171.879 3.07.879 4.242 0 1.172-.879 1.172-2.303 0-3.182C13.536 12.219 12.768 12 12 12c-.725 0-1.45-.22-2.003-.659-1.106-.879-1.106-2.303 0-3.182s2.9-.879 4.006 0l.415.33M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"/>
            </svg>
          </div>
          <p class="text-sm font-medium text-[var(--ws-data-stats-text-soft)]">Revenue</p>
        </div>
        <p class="mt-4 text-2xl font-bold text-[var(--ws-data-stats-text)]">$45.2k</p>
        <p class="mt-2 flex items-center gap-1 text-sm">
          <svg class="h-4 w-4 text-emerald-500" fill="none" viewBox="0 0 16 16" aria-hidden="true"><path d="M8 12V4m0 0L5 7m3-3 3 3" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
          <span class="font-medium text-emerald-600">+12%</span>
        </p>
      </div>

      <div class="rounded-2xl border border-[var(--ws-data-stats-border)] bg-[var(--ws-data-stats-bg)] p-6 shadow-md">
        <div class="flex items-center gap-3">
          <div class="flex h-10 w-10 items-center justify-center rounded-lg bg-[var(--ws-data-stats-accent)]/10">
            <svg class="h-5 w-5 text-[var(--ws-data-stats-accent)]" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
              <path stroke-linecap="round" stroke-linejoin="round" d="M15 19.128a9.38 9.38 0 0 0 2.625.372 9.337 9.337 0 0 0 4.121-.952 4.125 4.125 0 0 0-7.533-2.493M15 19.128v-.003c0-1.113-.285-2.16-.786-3.07M15 19.128v.106A12.318 12.318 0 0 1 8.624 21c-2.331 0-4.512-.645-6.374-1.766l-.001-.109a6.375 6.375 0 0 1 11.964-3.07M12 6.375a3.375 3.375 0 1 1-6.75 0 3.375 3.375 0 0 1 6.75 0Zm8.25 2.25a2.625 2.625 0 1 1-5.25 0 2.625 2.625 0 0 1 5.25 0Z"/>
            </svg>
          </div>
          <p class="text-sm font-medium text-[var(--ws-data-stats-text-soft)]">Users</p>
        </div>
        <p class="mt-4 text-2xl font-bold text-[var(--ws-data-stats-text)]">2,340</p>
        <p class="mt-2 flex items-center gap-1 text-sm">
          <svg class="h-4 w-4 text-emerald-500" fill="none" viewBox="0 0 16 16" aria-hidden="true"><path d="M8 12V4m0 0L5 7m3-3 3 3" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
          <span class="font-medium text-emerald-600">+8%</span>
        </p>
      </div>

      <div class="rounded-2xl border border-[var(--ws-data-stats-border)] bg-[var(--ws-data-stats-bg)] p-6 shadow-md">
        <div class="flex items-center gap-3">
          <div class="flex h-10 w-10 items-center justify-center rounded-lg bg-[var(--ws-data-stats-accent)]/10">
            <svg class="h-5 w-5 text-[var(--ws-data-stats-accent)]" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
              <path stroke-linecap="round" stroke-linejoin="round" d="M15.75 10.5V6a3.75 3.75 0 1 0-7.5 0v4.5m11.356-1.993 1.263 12c.07.665-.45 1.243-1.119 1.243H4.25a1.125 1.125 0 0 1-1.12-1.243l1.264-12A1.125 1.125 0 0 1 5.513 7.5h12.974c.576 0 1.059.435 1.119 1.007ZM8.625 10.5a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Zm7.5 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Z"/>
            </svg>
          </div>
          <p class="text-sm font-medium text-[var(--ws-data-stats-text-soft)]">Orders</p>
        </div>
        <p class="mt-4 text-2xl font-bold text-[var(--ws-data-stats-text)]">1,234</p>
        <p class="mt-2 flex items-center gap-1 text-sm">
          <svg class="h-4 w-4 text-red-500" fill="none" viewBox="0 0 16 16" aria-hidden="true"><path d="M8 4v8m0 0 3-3m-3 3L5 9" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
          <span class="font-medium text-red-600">-3%</span>
        </p>
      </div>

      <div class="rounded-2xl border border-[var(--ws-data-stats-border)] bg-[var(--ws-data-stats-bg)] p-6 shadow-md">
        <div class="flex items-center gap-3">
          <div class="flex h-10 w-10 items-center justify-center rounded-lg bg-[var(--ws-data-stats-accent)]/10">
            <svg class="h-5 w-5 text-[var(--ws-data-stats-accent)]" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
              <path stroke-linecap="round" stroke-linejoin="round" d="M3 13.125C3 12.504 3.504 12 4.125 12h2.25c.621 0 1.125.504 1.125 1.125v6.75C7.5 20.496 6.996 21 6.375 21h-2.25A1.125 1.125 0 0 1 3 19.875v-6.75ZM9.75 8.625c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125v11.25c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 0 1-1.125-1.125V8.625ZM16.5 4.125c0-.621.504-1.125 1.125-1.125h2.25C20.496 3 21 3.504 21 4.125v15.75c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 0 1-1.125-1.125V4.125Z"/>
            </svg>
          </div>
          <p class="text-sm font-medium text-[var(--ws-data-stats-text-soft)]">Conversion</p>
        </div>
        <p class="mt-4 text-2xl font-bold text-[var(--ws-data-stats-text)]">3.2%</p>
        <p class="mt-2 flex items-center gap-1 text-sm">
          <svg class="h-4 w-4 text-emerald-500" fill="none" viewBox="0 0 16 16" aria-hidden="true"><path d="M8 12V4m0 0L5 7m3-3 3 3" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
          <span class="font-medium text-emerald-600">+0.5%</span>
        </p>
      </div>
    </div>
  </div>
</section>
Details

Family
data-stats
Tier
enhanced
Kind
section
Extends
data-stats/base
Responsive Dark Mode Tailwind Only SSR Safe Copy & Paste
Stable Published
statskpitrendmetricsdashboardgrid
Slots

Name	Required	Description
content	Yes	Grid of stat cards with icon, label, value, and trend indicator.
Four-column responsive KPI grid. Each card shows an icon, label, value, and percentage change with green (up) or red (down) arrows. Cards: Revenue $45.2k +12%, Users 2,340 +8%, Orders 1,234 -3%, Conversion 3.2% +0.5%.