Metric cards

Production-minded patterns. Real examples. Make them yours.

Total revenue

$186,800

12.8% vs. previous period

Total orders

1,842

8.2% vs. previous period

Customers

3,248

16.4% vs. previous period

Conversion rate

4.82%

2.1% vs. previous period

Progress summary

Target

78%

You are ahead of last month. Keep the momentum.

View source example

<div class="flex between mb">
<h3>Target</h3>
<strong>78%</strong>
</div>
<div class="p-progress">
<span style="width:78%">
</span>
</div>
<p class="p-note">You are ahead of last month. Keep the momentum.</p>

Period comparison

This month $186,800

12.8%

Last month $165,603

View source example

<div class="flex between">
<div>
<small>This month</small>
<strong class="p-total" style="display:block">$186,800</strong>
</div>
<span class="trend">
<svg class="icon " viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
<path d="m5 15 6-6 4 4 6-9m-7 0h7v7"/>
</svg>12.8%</span>
</div>
<div class="p-invoice-totals section-copy">
<div>
<span>Last month</span>
<strong>$165,603</strong>
</div>
</div>

Metric with trend

Available balance $24,860

•••• 2026

View source example

<section class="card p-goal">
<small>Available balance</small>
<strong class="p-total" style="display:block;margin:15px 0">$24,860</strong>
<div class="flex between">
<span>•••• 2026</span>
<svg class="icon " viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
<path d="M20 8V5H5a3 3 0 0 0 0 6h16v8a2 2 0 0 1-2 2H5a3 3 0 0 1-3-3V8m19 3h-6v5h6m-4-2.5h1"/>
</svg>
</div>
</section>

Revenue by channel

Website 48%

Marketplace 28%

Partners 16%

Retail 8%

View source example

<div class="p-stack">
<div>
<div class="flex between mb">
<span>Website</span>
<strong>48%</strong>
</div>
<div class="p-progress">
<span style="width:48%">
</span>
</div>
</div>
<div>
<div class="flex between mb">
<span>Marketplace</span>
<strong>28%</strong>
</div>
<div class="p-progress">
<span style="width:28%">
</span>
</div>
</div>
<div>
<div class="flex between mb">
<span>Partners</span>
<strong>16%</strong>
</div>
<div class="p-progress">
<span style="width:16%">
</span>
</div>
</div>
<div>
<div class="flex between mb">
<span>Retail</span>
<strong>8%</strong>
</div>
<div class="p-progress">
<span style="width:8%">
</span>
</div>
</div>
</div>