Stats Card Grid

Code

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

body {
  font-family: system-ui, -apple-system, sans-serif;
  background: #0f172a;
  color: #f1f5f9;
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 2rem;
}

/* ── Wrapper ── */
.stats-wrapper {
  width: min(820px, 100%);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.stats-heading {
  font-size: 1.375rem;
  font-weight: 700;
  color: #f1f5f9;
}

.stats-subheading {
  font-size: 0.875rem;
  color: #64748b;
  margin-bottom: 1rem;
}

/* ── Grid ── */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}

@media (max-width: 540px) {
  .stats-grid {
    grid-template-columns: 1fr;
  }
}

/* ── Card ── */
.stat-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 1rem;
  padding: 1.375rem 1.375rem 1.25rem;
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.stat-card:hover {
  transform: translateY(-2px);
  border-color: rgba(255, 255, 255, 0.13);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35);
}

/* ── Icon badge ── */
.stat-card__icon {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 0.75rem;
  display: grid;
  place-items: center;
}

.stat-card__icon--blue {
  background: rgba(56, 189, 248, 0.12);
  color: #38bdf8;
}

.stat-card__icon--green {
  background: rgba(52, 211, 153, 0.12);
  color: #34d399;
}

.stat-card__icon--purple {
  background: rgba(167, 139, 250, 0.12);
  color: #a78bfa;
}

.stat-card__icon--amber {
  background: rgba(251, 191, 36, 0.12);
  color: #fbbf24;
}

/* ── Body ── */
.stat-card__body {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 0;
}

.stat-card__label {
  font-size: 0.8rem;
  font-weight: 500;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.stat-card__value {
  font-size: 1.875rem;
  font-weight: 700;
  color: #f1f5f9;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

/* ── Trend badge ── */
.stat-card__trend {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.775rem;
  font-weight: 500;
  padding: 0.2em 0.55em;
  border-radius: 9999px;
  width: fit-content;
  margin-top: 0.125rem;
}

.trend--up {
  background: rgba(52, 211, 153, 0.12);
  color: #34d399;
}

.trend--down {
  background: rgba(248, 113, 113, 0.12);
  color: #f87171;
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Stats Card Grid</title>
  <link rel="stylesheet" href="style.css" />
</head>
<body>

  <div class="stats-wrapper">
    <h2 class="stats-heading">Overview</h2>
    <p class="stats-subheading">Performance snapshot for March 2026</p>

    <div class="stats-grid">

      <!-- Total Users -->
      <div class="stat-card">
        <div class="stat-card__icon stat-card__icon--blue">
          <svg aria-hidden="true" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" 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>
        <div class="stat-card__body">
          <span class="stat-card__label">Total Users</span>
          <span class="stat-card__value">24,521</span>
          <span class="stat-card__trend trend--up">
            <svg aria-hidden="true" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
              <polyline points="18 15 12 9 6 15"/>
            </svg>
            +12.5% vs last month
          </span>
        </div>
      </div>

      <!-- Monthly Revenue -->
      <div class="stat-card">
        <div class="stat-card__icon stat-card__icon--green">
          <svg aria-hidden="true" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" 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>
        <div class="stat-card__body">
          <span class="stat-card__label">Monthly Revenue</span>
          <span class="stat-card__value">$48,392</span>
          <span class="stat-card__trend trend--up">
            <svg aria-hidden="true" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
              <polyline points="18 15 12 9 6 15"/>
            </svg>
            +8.3% vs last month
          </span>
        </div>
      </div>

      <!-- New Orders -->
      <div class="stat-card">
        <div class="stat-card__icon stat-card__icon--purple">
          <svg aria-hidden="true" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round">
            <path d="M6 2 3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4z"/>
            <line x1="3" y1="6" x2="21" y2="6"/>
            <path d="M16 10a4 4 0 0 1-8 0"/>
          </svg>
        </div>
        <div class="stat-card__body">
          <span class="stat-card__label">New Orders</span>
          <span class="stat-card__value">1,284</span>
          <span class="stat-card__trend trend--down">
            <svg aria-hidden="true" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
              <polyline points="6 9 12 15 18 9"/>
            </svg>
            -2.1% vs last month
          </span>
        </div>
      </div>

      <!-- Conversion Rate -->
      <div class="stat-card">
        <div class="stat-card__icon stat-card__icon--amber">
          <svg aria-hidden="true" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round">
            <polyline points="22 12 18 12 15 21 9 3 6 12 2 12"/>
          </svg>
        </div>
        <div class="stat-card__body">
          <span class="stat-card__label">Conversion Rate</span>
          <span class="stat-card__value">3.6%</span>
          <span class="stat-card__trend trend--up">
            <svg aria-hidden="true" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
              <polyline points="18 15 12 9 6 15"/>
            </svg>
            +0.4% vs last month
          </span>
        </div>
      </div>

    </div>
  </div>

</body>
</html>

A responsive 2×2 grid of KPI metric cards built entirely in CSS. Each card features an icon accent, a large value, a descriptive label, and a color-coded trend badge showing performance versus the previous period.

Features

Pure CSS — zero JavaScript required
Color-coded trend badges (green up, red down) with directional arrows
Subtle hover lift effect with border highlight on focus
Responsive: stacks to a single column on narrow viewports
Inline SVG icons for users, revenue, orders, and conversion rate