Stats with Sparkline

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

with-sparkline.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">
      <div class="flex items-center justify-between rounded-2xl border border-[var(--ws-data-stats-border)] bg-[var(--ws-data-stats-bg)] p-6 shadow-md">
        <div>
          <p class="text-sm font-medium text-[var(--ws-data-stats-text-soft)]">Revenue</p>
          <p class="mt-1 text-2xl font-bold text-[var(--ws-data-stats-text)]">$12.4k</p>
          <p class="mt-1 text-xs text-emerald-600 font-medium">+14%</p>
        </div>
        <svg class="h-10 w-16" viewBox="0 0 64 40" fill="none" role="img" aria-label="Revenue trend sparkline">
          <polyline points="0,30 10,25 20,28 30,15 40,18 50,8 64,5" stroke="var(--ws-data-stats-accent)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" fill="none"/>
        </svg>
      </div>

      <div class="flex items-center justify-between rounded-2xl border border-[var(--ws-data-stats-border)] bg-[var(--ws-data-stats-bg)] p-6 shadow-md">
        <div>
          <p class="text-sm font-medium text-[var(--ws-data-stats-text-soft)]">Users</p>
          <p class="mt-1 text-2xl font-bold text-[var(--ws-data-stats-text)]">3,842</p>
          <p class="mt-1 text-xs text-emerald-600 font-medium">+7%</p>
        </div>
        <svg class="h-10 w-16" viewBox="0 0 64 40" fill="none" role="img" aria-label="Users trend sparkline">
          <polyline points="0,35 10,30 20,25 30,28 40,20 50,15 64,10" stroke="var(--ws-data-stats-accent)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" fill="none"/>
        </svg>
      </div>

      <div class="flex items-center justify-between rounded-2xl border border-[var(--ws-data-stats-border)] bg-[var(--ws-data-stats-bg)] p-6 shadow-md">
        <div>
          <p class="text-sm font-medium text-[var(--ws-data-stats-text-soft)]">Orders</p>
          <p class="mt-1 text-2xl font-bold text-[var(--ws-data-stats-text)]">856</p>
          <p class="mt-1 text-xs text-red-600 font-medium">-2%</p>
        </div>
        <svg class="h-10 w-16" viewBox="0 0 64 40" fill="none" role="img" aria-label="Orders trend sparkline">
          <polyline points="0,10 10,15 20,12 30,20 40,25 50,22 64,30" stroke="var(--ws-data-stats-accent)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" fill="none"/>
        </svg>
      </div>

      <div class="flex items-center justify-between rounded-2xl border border-[var(--ws-data-stats-border)] bg-[var(--ws-data-stats-bg)] p-6 shadow-md">
        <div>
          <p class="text-sm font-medium text-[var(--ws-data-stats-text-soft)]">Bounce Rate</p>
          <p class="mt-1 text-2xl font-bold text-[var(--ws-data-stats-text)]">32.1%</p>
          <p class="mt-1 text-xs text-emerald-600 font-medium">-5%</p>
        </div>
        <svg class="h-10 w-16" viewBox="0 0 64 40" fill="none" role="img" aria-label="Bounce rate trend sparkline">
          <polyline points="0,15 10,20 20,18 30,25 40,22 50,30 64,28" stroke="var(--ws-data-stats-accent)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" fill="none"/>
        </svg>
      </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

statssparklinetrendmetricsdashboardchart

Slots

Name	Required	Description
content	Yes	Grid of stat cards with label, value, change, and sparkline SVG.

Two-column grid of four stat cards, each with a label, value, percentage change, and an inline SVG sparkline on the right. Revenue, Users, Orders, and Bounce Rate with ascending or descending trend lines. Sparklines are lightweight inline SVG polylines.