Stat Card

Compact metric display.

html

<article class="stat-card stat-card--up stat-card--bordered" style="--accent:#A8E6C1;">
  <span class="stat-card__bar" aria-hidden="true"></span>
  <h3 class="stat-card__title">Active subscribers</h3>
  <p class="stat-card__value">1284</p>
  <p class="stat-card__change">
    <span class="stat-card__arrow" aria-hidden="true"></span>
    +4.2% vs last week
  </p>
</article>
<style>
.stat-card { font: 16px/1.4 system-ui, sans-serif; color: #241430; background: #FAF7F2; border-radius: 12px; padding: 18px 20px; width: 220px; box-sizing: border-box; box-shadow: 0 6px 18px rgba(36,20,48,.10); position: relative; }
.stat-card--bordered { border: 1.5px solid #24143026; box-shadow: none; }
.stat-card__bar { display: block; height: 4px; border-radius: 4px 4px 0 0; background: var(--accent); margin: -18px -20px 14px; }
.stat-card__title { margin: 0 0 6px; font-size: 13px; font-weight: 600; color: #241430aa; text-transform: uppercase; letter-spacing: .02em; }
.stat-card__value { margin: 0 0 4px; font-size: 30px; font-weight: 700; line-height: 1; }
.stat-card__change { margin: 0; font-size: 13px; font-weight: 600; display: flex; align-items: center; gap: 4px; }
.stat-card__arrow::before { content: "\25B2"; }
.stat-card--up .stat-card__change { color: #A8E6C1; }
.stat-card--down .stat-card__arrow::before { content: "\25BC"; }
.stat-card--down .stat-card__change { color: #F5C2E0; }
.stat-card--flat .stat-card__arrow::before { content: "\25AC"; }
.stat-card--flat .stat-card__change { color: #D9C8F0; }
</style>

tailwind

<article class="stat-card-tw stat-card-tw--up border border-[#24143026] relative bg-[#FAF7F2] text-[#241430] rounded-xl px-5 py-[18px] w-[220px] box-border shadow-[0_6px_18px_rgba(36,20,48,0.10)]" style="--accent:#A8E6C1">
  <span aria-hidden="true" class="block h-1 rounded-t-xl -mx-5 -mt-[18px] mb-3.5" style="background:#A8E6C1"></span>
  <h3 class="m-0 mb-1.5 text-xs font-semibold uppercase tracking-wide text-[#241430aa]">Active subscribers</h3>
  <p class="m-0 mb-1 text-3xl font-bold leading-none">1284</p>
  <p class="stat-card-tw__change m-0 text-sm font-semibold flex items-center gap-1">
    <span class="stat-card-tw__arrow" aria-hidden="true"></span>
    +4.2% vs last week
  </p>
</article>
<style>
.stat-card-tw--bordered { box-shadow: none; }
.stat-card-tw__arrow::before { content: "\25B2"; }
.stat-card-tw--up .stat-card-tw__change { color: #A8E6C1; }
.stat-card-tw--down .stat-card-tw__arrow::before { content: "\25BC"; }
.stat-card-tw--down .stat-card-tw__change { color: #F5C2E0; }
.stat-card-tw--flat .stat-card-tw__arrow::before { content: "\25AC"; }
.stat-card-tw--flat .stat-card-tw__change { color: #D9C8F0; }
</style>

react

export function StatCard({
  title = "Active subscribers",
  value = 1284,
  change = "+4.2% vs last week",
  trend = "up",
  accent = "#A8E6C1",
  bordered = true,
}) {
  const trendMeta = {
    up: { arrow: "▲", color: "#A8E6C1" },
    down: { arrow: "▼", color: "#F5C2E0" },
    flat: { arrow: "▬", color: "#D9C8F0" },
  }[trend] ?? { arrow: "▲", color: accent };
  return (
    <article style={{ fontFamily: "system-ui, sans-serif", fontSize: 16, lineHeight: 1.4, color: "#241430",
      background: "#FAF7F2", borderRadius: 12, padding: "18px 20px", width: 220, boxSizing: "border-box",
      boxShadow: bordered ? "none" : "0 6px 18px rgba(36,20,48,.10)",
      border: bordered ? "1.5px solid #24143026" : "none", position: "relative" }}>
      <span aria-hidden="true" style={{ display: "block", height: 4, borderRadius: "4px 4px 0 0",
        background: accent, margin: "-18px -20px 14px" }} />
      <h3 style={{ margin: "0 0 6px", fontSize: 13, fontWeight: 600, color: "#241430aa",
        textTransform: "uppercase", letterSpacing: ".02em" }}>{title}</h3>
      <p style={{ margin: "0 0 4px", fontSize: 30, fontWeight: 700, lineHeight: 1 }}>{value}</p>
      <p style={{ margin: 0, fontSize: 13, fontWeight: 600, display: "flex", alignItems: "center", gap: 4,
        color: trendMeta.color }}>
        <span aria-hidden="true">{trendMeta.arrow}</span>
        {change}
      </p>
    </article>
  );
}