Blocks / Stat Cards

Stat Cards beta

Four numbers a dashboard opens with — each with its delta and its verdict.

Preview

Revenue

$48,210

↑ 12.4% vs last month

On track

Active users

8,412

↑ 3.8% vs last month

Live

Conversion

3.42%

↓ 0.4 pt vs last month

Watch

Open tickets

↓ 5 vs last month

Needs action

Built from: Stat, Badge — include their CSS alongside this block.

<div class="statgrid">
  <div class="statcard">
    <div class="k-stat"><div class="k-stat-lbl">Revenue</div><div class="k-stat-val">$48,210</div><span class="k-stat-delta">↑ 12.4% vs last month</span></div>
    <span class="badge teal"><i></i>On track</span>
  </div>
  <div class="statcard">
    <div class="k-stat"><div class="k-stat-lbl">Active users</div><div class="k-stat-val">8,412</div><span class="k-stat-delta">↑ 3.8% vs last month</span></div>
    <span class="badge teal"><i></i>Live</span>
  </div>
  <div class="statcard">
    <div class="k-stat"><div class="k-stat-lbl">Conversion</div><div class="k-stat-val">3.42%</div><span class="k-stat-delta" data-dir="down">↓ 0.4 pt vs last month</span></div>
    <span class="badge amber"><i></i>Watch</span>
  </div>
  <div class="statcard">
    <div class="k-stat"><div class="k-stat-lbl">Open tickets</div><div class="k-stat-val">17</div><span class="k-stat-delta">↓ 5 vs last month</span></div>
    <span class="badge red"><i></i>Needs action</span>
  </div>
</div>

.statgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;font-family:var(--k-font);width:100%}
.statcard{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;background:var(--k-bg);border:1px solid var(--k-line);border-radius:12px;padding:16px;text-align:left}

Usage

The card adds what the Stat part deliberately leaves out: a frame and a verdict badge. Four across on desktop, stacking down on mobile.

Site Header

Testimonials