metrics kpi dashboard compact dense strip metrics kpi compact dense strip inline divider compact metric bar for dashboard header single-row KPI strip
Metric Grid Dense
Fetch pattern JSON:
curl https://webspire.de/patterns/metric-grid/dense.json dense.html
<section class="ws-metric-grid-dense" style="--ws-metric-grid-bg: var(--ws-color-surface); --ws-metric-grid-text: var(--ws-color-text); --ws-metric-grid-text-soft: var(--ws-color-text-soft); --ws-metric-grid-border: var(--ws-color-border); --ws-metric-grid-accent: var(--ws-color-primary);">
<div class="mx-auto max-w-5xl px-4 py-10 sm:px-6 lg:px-8">
<div class="rounded-2xl border border-[var(--ws-metric-grid-border)] bg-[var(--ws-metric-grid-bg)] shadow-md">
<div class="grid grid-cols-2 divide-x divide-[var(--ws-metric-grid-border)] lg:grid-cols-4">
<!-- Revenue -->
<div class="px-5 py-4">
<p class="text-xs font-medium uppercase tracking-wider text-[var(--ws-metric-grid-text-soft)]">Revenue</p>
<p class="mt-1 text-2xl font-bold tracking-tight text-[var(--ws-metric-grid-text)]">$45.2k</p>
<p class="mt-0.5 text-xs font-medium text-emerald-600" aria-label="Up 12 percent">
<span aria-hidden="true">↑</span> 12%
</p>
</div>
<!-- Users -->
<div class="px-5 py-4">
<p class="text-xs font-medium uppercase tracking-wider text-[var(--ws-metric-grid-text-soft)]">Users</p>
<p class="mt-1 text-2xl font-bold tracking-tight text-[var(--ws-metric-grid-text)]">2,340</p>
<p class="mt-0.5 text-xs font-medium text-emerald-600" aria-label="Up 8 percent">
<span aria-hidden="true">↑</span> 8%
</p>
</div>
<!-- Orders -->
<div class="px-5 py-4">
<p class="text-xs font-medium uppercase tracking-wider text-[var(--ws-metric-grid-text-soft)]">Orders</p>
<p class="mt-1 text-2xl font-bold tracking-tight text-[var(--ws-metric-grid-text)]">1,234</p>
<p class="mt-0.5 text-xs font-medium text-rose-600" aria-label="Down 3 percent">
<span aria-hidden="true">↓</span> 3%
</p>
</div>
<!-- Conversion -->
<div class="px-5 py-4">
<p class="text-xs font-medium uppercase tracking-wider text-[var(--ws-metric-grid-text-soft)]">Conversion</p>
<p class="mt-1 text-2xl font-bold tracking-tight text-[var(--ws-metric-grid-text)]">3.2%</p>
<p class="mt-0.5 text-xs font-medium text-emerald-600" aria-label="Up 0.5 percent">
<span aria-hidden="true">↑</span> 0.5%
</p>
</div>
</div>
</div>
</div>
</section>
Details
Responsive Dark Mode Tailwind Only SSR Safe Copy & Paste
Stable Published
metricskpidashboardcompactdensestrip
Slots
| Name | Required | Description |
|---|---|---|
| content | Yes | Single card with divided metric cells in a row. |
A compact 4-column metric strip inside a single card. No icons, just label, value, and change indicator per cell with vertical dividers. Collapses to 2x2 on small screens.