KPI Card

Prominent metric display.

html

<section class="kpi kpi--up" style="--c:#A8E6C1;" aria-labelledby="kpi-label">
  <h3 id="kpi-label" class="kpi__label">Monthly recurring revenue</h3>
  <p class="kpi__value">$482K</p>
  <p class="kpi__delta">
    <svg class="kpi__arrow" viewBox="0 0 10 10" width="10" height="10" aria-hidden="true"><path d="M5 1l4 4H1z"/></svg>
    <span class="kpi__delta-text">+12.4%</span>
    <span class="kpi__dir-word"></span>
    <span class="kpi__period">vs previous 30 days</span>
  </p>
</section>
<style>
.kpi { border: 1px solid #24143018; border-radius: 12px; padding: 16px; background: #FAF7F2; font: 13px system-ui, sans-serif; color: #241430; max-width: 260px; }
.kpi__label { margin: 0 0 6px; font-size: 13px; font-weight: 600; opacity: .8; }
.kpi__value { margin: 0 0 6px; font-size: 28px; font-weight: 700; }
.kpi__delta { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px; font-size: 12px; }
.kpi__arrow { fill: currentColor; }
.kpi--up .kpi__delta { color: #2f8f4e; }
.kpi--down .kpi__delta { color: #b3261e; }
.kpi--flat .kpi__delta { color: #241430; opacity: .7; }
.kpi--down .kpi__arrow { transform: rotate(180deg); }
.kpi--flat .kpi__arrow { transform: rotate(90deg); }
.kpi--up .kpi__dir-word::before { content: "increase"; }
.kpi--down .kpi__dir-word::before { content: "decrease"; }
.kpi--flat .kpi__dir-word::before { content: "no change"; }
.kpi__period { width: 100%; opacity: .6; color: #241430; }
</style>

tailwind

<section class="kpi-tw kpi-tw--up border border-[#24143018] rounded-xl p-4 bg-[#FAF7F2] font-sans text-[13px] text-[#241430] max-w-xs" style="--c:#A8E6C1;" aria-labelledby="kpi-tw-label">
  <h3 id="kpi-tw-label" class="m-0 mb-1.5 text-[13px] font-semibold opacity-80">Monthly recurring revenue</h3>
  <p class="m-0 mb-1.5 text-[28px] font-bold">$482K</p>
  <p class="kpi-tw__delta m-0 flex flex-wrap items-center gap-1 text-xs">
    <svg class="kpi-tw__arrow" viewBox="0 0 10 10" width="10" height="10" aria-hidden="true"><path d="M5 1l4 4H1z" fill="currentColor"/></svg>
    <span>+12.4%</span>
    <span class="kpi-tw__dir-word"></span>
    <span class="w-full opacity-60 text-[#241430]">vs previous 30 days</span>
  </p>
</section>
<style>
.kpi-tw--up .kpi-tw__delta { color: #2f8f4e; }
.kpi-tw--down .kpi-tw__delta { color: #b3261e; }
.kpi-tw--flat .kpi-tw__delta { color: #241430; opacity: .7; }
.kpi-tw--down .kpi-tw__arrow { transform: rotate(180deg); }
.kpi-tw--flat .kpi-tw__arrow { transform: rotate(90deg); }
.kpi-tw--up .kpi-tw__dir-word::before { content: "increase"; }
.kpi-tw--down .kpi-tw__dir-word::before { content: "decrease"; }
.kpi-tw--flat .kpi-tw__dir-word::before { content: "no change"; }
</style>

react

export function KpiCard({
  label = "Monthly recurring revenue",
  value = "$482K",
  period = "vs previous 30 days",
  delta = "+12.4%",
  direction = "up",
  color = "#A8E6C1",
}) {
  const tone = { up: "#2f8f4e", down: "#b3261e", flat: "#24143099" }[direction] ?? "#2f8f4e";
  const word = { up: "increase", down: "decrease", flat: "no change" }[direction] ?? "increase";
  const rotate = { up: "0deg", down: "180deg", flat: "90deg" }[direction] ?? "0deg";
  return (
    <section aria-labelledby="kpi-react-label" style={{ border: "1px solid #24143018", borderRadius: 12, padding: 16, background: "#FAF7F2", font: "13px system-ui, sans-serif", color: "#241430", maxWidth: 260 }}>
      <h3 id="kpi-react-label" style={{ margin: "0 0 6px", fontSize: 13, fontWeight: 600, opacity: 0.8 }}>{label}</h3>
      <p style={{ margin: "0 0 6px", fontSize: 28, fontWeight: 700 }}>{value}</p>
      <p style={{ margin: 0, display: "flex", flexWrap: "wrap", alignItems: "center", gap: 4, fontSize: 12, color: tone }}>
        <svg viewBox="0 0 10 10" width="10" height="10" aria-hidden="true" style={{ transform: `rotate(${rotate})` }}><path d="M5 1l4 4H1z" fill="currentColor" /></svg>
        <span>{delta}</span>
        <span>{word}</span>
        <span style={{ width: "100%", opacity: 0.6, color: "#241430" }}>{period}</span>
      </p>
    </section>
  );
}