stats icons emoji cards metrics visual display stats icon emoji cards visual metrics display stat cards with icons metrics display with visual indicators
Stats Display With Icon
Fetch pattern JSON:
curl https://webspire.de/patterns/stats-display/with-icon.json with-icon.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">Detailed Overview</h2>
</div>
<div class="mt-12 grid gap-6 sm:grid-cols-2 lg:grid-cols-4">
<div class="flex items-start gap-4 rounded-lg border border-[var(--ws-stats-display-border)] bg-[var(--ws-stats-display-bg)] p-6">
<span class="flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-indigo-50 text-xl" aria-hidden="true">📄</span>
<div>
<p class="text-2xl font-bold tracking-tight text-[var(--ws-stats-display-text)]">25</p>
<p class="mt-1 text-sm font-medium text-[var(--ws-stats-display-label)]">Lines</p>
</div>
</div>
<div class="flex items-start gap-4 rounded-lg border border-[var(--ws-stats-display-border)] bg-[var(--ws-stats-display-bg)] p-6">
<span class="flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-indigo-50 text-xl" aria-hidden="true">📦</span>
<div>
<p class="text-2xl font-bold tracking-tight text-[var(--ws-stats-display-text)]">655</p>
<p class="mt-1 text-sm font-medium text-[var(--ws-stats-display-label)]">Bytes</p>
</div>
</div>
<div class="flex items-start gap-4 rounded-lg border border-[var(--ws-stats-display-border)] bg-[var(--ws-stats-display-bg)] p-6">
<span class="flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-indigo-50 text-xl" aria-hidden="true">🌍</span>
<div>
<p class="text-2xl font-bold tracking-tight text-[var(--ws-stats-display-text)]">2024</p>
<p class="mt-1 text-sm font-medium text-[var(--ws-stats-display-label)]">Baseline</p>
</div>
</div>
<div class="flex items-start gap-4 rounded-lg border border-[var(--ws-stats-display-border)] bg-[var(--ws-stats-display-bg)] p-6">
<span class="flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-indigo-50 text-xl" aria-hidden="true">🎨</span>
<div>
<p class="text-2xl font-bold tracking-tight text-[var(--ws-stats-display-text)]">3</p>
<p class="mt-1 text-sm font-medium text-[var(--ws-stats-display-label)]">Properties</p>
</div>
</div>
</div>
</div>
</section>
Details
Responsive Dark Mode Tailwind Only SSR Safe Copy & Paste
Stable Published
statsiconsemojicardsmetricsvisualdisplay
Slots
| Name | Required | Description |
|---|---|---|
| heading | No | Section title and subtitle. |
| stats | Yes | Array of stat items with icon, value, and label. |
Enhanced variant that adds a leading icon to each stat card, providing visual context alongside the value and label. Icons are rendered as emoji in a tinted container; swap for SVGs in production.