Stat Card

Metric stat cards with KPI value, trend badge (up/down %), supporting label, and optional sparkline bar.

css

Targets: HTML

Code

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: Inter, system-ui, sans-serif;
  background: #050910;
  color: #f2f6ff;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
}

.demo {
  width: 100%;
  max-width: 880px;
}
.demo-title {
  font-size: 1.5rem;
  font-weight: 800;
  margin-bottom: 0.375rem;
  text-align: center;
}
.demo-sub {
  color: #475569;
  font-size: 0.875rem;
  margin-bottom: 2.5rem;
  text-align: center;
}

/* ── Grid ── */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 1rem;
}

/* ── Card ── */
.stat-card {
  background: #0d1320;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 1.125rem;
  padding: 1.375rem 1.375rem 1.125rem;
  display: flex;
  flex-direction: column;
  gap: 0;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.stat-card:hover {
  border-color: rgba(255, 255, 255, 0.16);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

/* ── Header row ── */
.stat-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.875rem;
}
.stat-label {
  font-size: 0.75rem;
  font-weight: 500;
  color: #64748b;
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Icon ── */
.stat-icon {
  width: 32px;
  height: 32px;
  border-radius: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.stat-icon--blue {
  background: rgba(56, 189, 248, 0.12);
  color: #38bdf8;
}
.stat-icon--purple {
  background: rgba(167, 139, 250, 0.12);
  color: #a78bfa;
}
.stat-icon--green {
  background: rgba(52, 211, 153, 0.12);
  color: #34d399;
}
.stat-icon--amber {
  background: rgba(251, 191, 36, 0.12);
  color: #fbbf24;
}

/* ── Trend badge ── */
.stat-trend {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  padding: 0.2rem 0.5rem;
  border-radius: 999px;
  font-size: 0.6875rem;
  font-weight: 700;
  flex-shrink: 0;
}
.stat-trend--up {
  background: rgba(52, 211, 153, 0.15);
  color: #34d399;
}
.stat-trend--down {
  background: rgba(239, 68, 68, 0.15);
  color: #f87171;
}

/* ── Value ── */
.stat-value {
  font-size: 1.875rem;
  font-weight: 800;
  color: #f2f6ff;
  letter-spacing: -0.03em;
  line-height: 1.1;
  margin-bottom: 1rem;
}

/* ── Sparkline ── */
.stat-sparkline {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 36px;
  margin-bottom: 0.75rem;
}
.bar {
  flex: 1;
  height: var(--h, 50%);
  background: rgba(56, 189, 248, 0.25);
  border-radius: 3px 3px 0 0;
  transition: background 0.2s;
  min-width: 0;
}
.bar--active {
  background: #38bdf8;
}
.bar--down {
  background: #ef4444;
}
.stat-card:hover .bar:not(.bar--active):not(.bar--down) {
  background: rgba(56, 189, 248, 0.35);
}

/* ── Supporting text ── */
.stat-sub {
  font-size: 0.6875rem;
  color: #475569;
}

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Stat Card</title>
  <link rel="stylesheet" href="style.css" />
</head>
<body>
  <div class="demo">
    <h1 class="demo-title">Stat Card</h1>
    <p class="demo-sub">KPI metric cards with trend badge and sparkline bar chart.</p>

    <div class="stat-grid">

      <!-- Revenue -->
      <div class="stat-card">
        <div class="stat-header">
          <div class="stat-icon stat-icon--blue" aria-hidden="true">
            <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="1" x2="12" y2="23"/><path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"/></svg>
          </div>
          <span class="stat-label">Total Revenue</span>
          <span class="stat-trend stat-trend--up" aria-label="Up 12.4%">
            <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="18 15 12 9 6 15"/></svg>
            12.4%
          </span>
        </div>
        <div class="stat-value">$48,392</div>
        <div class="stat-sparkline" aria-hidden="true">
          <div class="bar" style="--h:35%"></div>
          <div class="bar" style="--h:50%"></div>
          <div class="bar" style="--h:42%"></div>
          <div class="bar" style="--h:68%"></div>
          <div class="bar" style="--h:55%"></div>
          <div class="bar" style="--h:80%"></div>
          <div class="bar bar--active" style="--h:90%"></div>
        </div>
        <p class="stat-sub">vs. $43,052 last month</p>
      </div>

      <!-- Active Users -->
      <div class="stat-card">
        <div class="stat-header">
          <div class="stat-icon stat-icon--purple" aria-hidden="true">
            <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>
          </div>
          <span class="stat-label">Active Users</span>
          <span class="stat-trend stat-trend--up" aria-label="Up 8.1%">
            <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="18 15 12 9 6 15"/></svg>
            8.1%
          </span>
        </div>
        <div class="stat-value">12,847</div>
        <div class="stat-sparkline" aria-hidden="true">
          <div class="bar" style="--h:60%"></div>
          <div class="bar" style="--h:45%"></div>
          <div class="bar" style="--h:70%"></div>
          <div class="bar" style="--h:55%"></div>
          <div class="bar" style="--h:75%"></div>
          <div class="bar" style="--h:65%"></div>
          <div class="bar bar--active" style="--h:85%"></div>
        </div>
        <p class="stat-sub">11,882 users last month</p>
      </div>

      <!-- Conversion Rate -->
      <div class="stat-card">
        <div class="stat-header">
          <div class="stat-icon stat-icon--green" aria-hidden="true">
            <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="22 7 13.5 15.5 8.5 10.5 2 17"/><polyline points="16 7 22 7 22 13"/></svg>
          </div>
          <span class="stat-label">Conversion Rate</span>
          <span class="stat-trend stat-trend--down" aria-label="Down 2.3%">
            <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="6 9 12 15 18 9"/></svg>
            2.3%
          </span>
        </div>
        <div class="stat-value">3.74%</div>
        <div class="stat-sparkline" aria-hidden="true">
          <div class="bar" style="--h:80%"></div>
          <div class="bar" style="--h:72%"></div>
          <div class="bar" style="--h:85%"></div>
          <div class="bar" style="--h:70%"></div>
          <div class="bar" style="--h:60%"></div>
          <div class="bar" style="--h:55%"></div>
          <div class="bar bar--active bar--down" style="--h:50%"></div>
        </div>
        <p class="stat-sub">Was 3.83% last month</p>
      </div>

      <!-- Avg Order Value -->
      <div class="stat-card">
        <div class="stat-header">
          <div class="stat-icon stat-icon--amber" aria-hidden="true">
            <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="9" cy="21" r="1"/><circle cx="20" cy="21" r="1"/><path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6"/></svg>
          </div>
          <span class="stat-label">Avg Order Value</span>
          <span class="stat-trend stat-trend--up" aria-label="Up 5.7%">
            <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="18 15 12 9 6 15"/></svg>
            5.7%
          </span>
        </div>
        <div class="stat-value">$87.40</div>
        <div class="stat-sparkline" aria-hidden="true">
          <div class="bar" style="--h:40%"></div>
          <div class="bar" style="--h:55%"></div>
          <div class="bar" style="--h:48%"></div>
          <div class="bar" style="--h:62%"></div>
          <div class="bar" style="--h:70%"></div>
          <div class="bar" style="--h:75%"></div>
          <div class="bar bar--active" style="--h:82%"></div>
        </div>
        <p class="stat-sub">vs. $82.69 last month</p>
      </div>

    </div>
  </div>
</body>
</html>

Stat Card

Dashboard KPI cards that surface a single key metric at a glance. Each card shows a value, a trend badge (up or down percentage), a descriptive label, and an optional inline sparkline bar chart.

Features

Trend badge — green for positive, red for negative delta
Sparkline bar — seven-bar mini chart using pure CSS custom properties
Icon slot — optional icon in the card header for context
Grid layout — responsive 2-col / 4-col grid with CSS Grid
CSS-only — zero JavaScript, sparkline heights set via inline --h custom properties

Anatomy

[Icon]     [Label]          [Trend +12%]
[Value: $48,392]
[Sparkline bars ▁▂▄▆▇█▅]
[Supporting text]

Usage

Set the sparkline bar heights by adding style="--h: 60%" to each .bar element. Values are percentages relative to the bar container height.