stats sparkline trend metrics dashboard chart stats sparkline trend mini chart revenue users dashboard stat cards with sparklines metric cards with mini charts
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
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.