Metric

Numerical measurement.

html

<dl class="metric metric--plain" style="--accent:#A8E6C1;">
  <dt class="metric__label">Monthly active users</dt>
  <dd class="metric__value" style="font-size:40px;">48200</dd>
</dl>
<style>
.metric { font: 16px/1.4 system-ui, sans-serif; color: #241430; background: #FAF7F2; display: inline-grid; gap: 4px; padding: 20px 24px; border-radius: 10px; margin: 0; }
.metric dt, .metric dd { margin: 0; }
.metric__label { font-size: 13px; font-weight: 600; letter-spacing: .02em; color: var(--accent); text-transform: uppercase; }
.metric__value { font-weight: 700; line-height: 1; }
.metric--currency .metric__value::before { content: "$"; }
.metric--percent .metric__value::after { content: "%"; }
</style>

tailwind

<dl class="metric-tw metric-tw--plain inline-grid gap-1 bg-[#FAF7F2] text-[#241430] font-sans px-6 py-5 rounded-[10px] m-0" style="--accent:#A8E6C1">
  <dt class="m-0 text-xs font-semibold uppercase tracking-wide" style="color:#A8E6C1">Monthly active users</dt>
  <dd class="m-0 font-bold leading-none" style="font-size:40px">48200</dd>
</dl>
<style>
.metric-tw--currency dd::before { content: "$"; }
.metric-tw--percent dd::after { content: "%"; }
</style>

react

export function Metric({
  label = "Monthly active users",
  value = 48200,
  format = "plain",
  size = 40,
  accent = "#A8E6C1",
}) {
  const formatted = {
    plain: value.toLocaleString(),
    currency: `$${value.toLocaleString()}`,
    percent: `${value}%`,
  }[format] ?? value;
  return (
    <dl style={{ font: "16px/1.4 system-ui, sans-serif", color: "#241430", background: "#FAF7F2",
      display: "inline-grid", gap: 4, padding: "20px 24px", borderRadius: 10, margin: 0 }}>
      <dt style={{ margin: 0, fontSize: 13, fontWeight: 600, letterSpacing: ".02em", color: accent, textTransform: "uppercase" }}>{label}</dt>
      <dd style={{ margin: 0, fontWeight: 700, lineHeight: 1, fontSize: size }}>{formatted}</dd>
    </dl>
  );
}