KPI

Key Performance Indicator.

html

<div class="kpi" style="--accent:#A8E6C1;">
  <p class="kpi__label">Monthly recurring revenue</p>
  <p class="kpi__value">$482,900</p>
  <div class="kpi__trend kpi__trend--up">
    <span class="kpi__trend-icon" aria-hidden="true"></span>
    <span class="kpi__trend-change">+12.4%</span>
  </div>
  <dl class="kpi__meta">
    <dt class="kpi__meta-dt">Target</dt>
    <dd class="kpi__meta-dd">$450,000</dd>
  </dl>
</div>
<style>
.kpi { font: 16px/1.5 system-ui, sans-serif; color: #241430; background: #FAF7F2; border-radius: 14px; padding: 22px 24px; box-shadow: 0 8px 24px rgba(36,20,48,.12); max-width: 280px; box-sizing: border-box; border-top: 4px solid var(--accent); }
.kpi__label { margin: 0 0 6px; font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: #24143099; }
.kpi__value { margin: 0 0 10px; font-size: 34px; font-weight: 700; }
.kpi__trend { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; font-size: 13px; font-weight: 600; margin-bottom: 14px; }
.kpi__trend--up { background: #A8E6C133; color: #1c6b3f; }
.kpi__trend--down { background: #F5C2E055; color: #8a1f56; }
.kpi__trend--flat { background: #24143014; color: #241430; }
.kpi__trend--up .kpi__trend-icon::before { content: "▲"; }
.kpi__trend--down .kpi__trend-icon::before { content: "▼"; }
.kpi__trend--flat .kpi__trend-icon::before { content: "▬"; }
.kpi__meta { margin: 0; display: flex; gap: 6px; font-size: 13px; color: #241430aa; }
.kpi__meta-dt { font-weight: 600; }
.kpi__meta-dt::after { content: ":"; }
.kpi__meta-dd { margin: 0; }
</style>

tailwind

<div class="kpi-tw rounded-2xl bg-[#FAF7F2] text-[#241430] p-6 shadow-[0_8px_24px_rgba(36,20,48,.12)] max-w-[280px] box-border border-t-4" style="border-color:#A8E6C1">
  <p class="mb-1.5 text-[13px] font-semibold uppercase tracking-wide text-[#241430]/60">Monthly recurring revenue</p>
  <p class="mb-2.5 text-[34px] font-bold">$482,900</p>
  <div class="kpi-tw__trend kpi-tw__trend--up inline-flex items-center gap-1.5 rounded-full px-2.5 py-1 text-[13px] font-semibold mb-3.5">
    <span class="kpi-tw__icon" aria-hidden="true"></span>
    <span>+12.4%</span>
  </div>
  <dl class="m-0 flex gap-1.5 text-[13px] text-[#241430]/70">
    <dt class="kpi-tw__dt font-semibold">Target</dt>
    <dd class="m-0">$450,000</dd>
  </dl>
</div>
<style>
.kpi-tw__trend--up { background: #A8E6C133; color: #1c6b3f; }
.kpi-tw__trend--down { background: #F5C2E055; color: #8a1f56; }
.kpi-tw__trend--flat { background: #24143014; color: #241430; }
.kpi-tw__trend--up .kpi-tw__icon::before { content: "▲"; }
.kpi-tw__trend--down .kpi-tw__icon::before { content: "▼"; }
.kpi-tw__trend--flat .kpi-tw__icon::before { content: "▬"; }
.kpi-tw__dt::after { content: ":"; }
</style>

react

export function Kpi({
  label = "Monthly recurring revenue",
  value = "$482,900",
  change = "+12.4%",
  trend = "up",
  target = "$450,000",
  accent = "#A8E6C1",
}) {
  const trendStyle = {
    up: { background: "#A8E6C133", color: "#1c6b3f", icon: "▲" },
    down: { background: "#F5C2E055", color: "#8a1f56", icon: "▼" },
    flat: { background: "#24143014", color: "#241430", icon: "▬" },
  }[trend] ?? { background: "#24143014", color: "#241430", icon: "▬" };
  return (
    <div style={{ fontFamily: "system-ui, sans-serif", fontSize: 16, lineHeight: 1.5, color: "#241430",
      background: "#FAF7F2", borderRadius: 14, padding: "22px 24px", boxShadow: "0 8px 24px rgba(36,20,48,.12)",
      maxWidth: 280, boxSizing: "border-box", borderTop: `4px solid ${accent}` }}>
      <p style={{ margin: "0 0 6px", fontSize: 13, fontWeight: 600, textTransform: "uppercase",
        letterSpacing: ".04em", color: "#24143099" }}>{label}</p>
      <p style={{ margin: "0 0 10px", fontSize: 34, fontWeight: 700 }}>{value}</p>
      <div style={{ display: "inline-flex", alignItems: "center", gap: 6, padding: "4px 10px",
        borderRadius: 999, fontSize: 13, fontWeight: 600, marginBottom: 14,
        background: trendStyle.background, color: trendStyle.color }}>
        <span aria-hidden="true">{trendStyle.icon}</span>
        <span>{change}</span>
      </div>
      <dl style={{ margin: 0, display: "flex", gap: 6, fontSize: 13, color: "#241430aa" }}>
        <dt style={{ fontWeight: 600 }}>Target:</dt>
        <dd style={{ margin: 0 }}>{target}</dd>
      </dl>
    </div>
  );
}