Metric Card

Card showing a measurement.

html

<article class="metriccard metriccard--down" style="--c:#A8E6C1;">
  <span class="metriccard__label">Page load time</span>
  <p class="metriccard__value">1.8 <span class="metriccard__unit">seconds</span></p>
  <span class="metriccard__trend">
    <svg viewBox="0 0 10 10" width="10" height="10" aria-hidden="true"><path d="M5 1l4 4H1z"/></svg>
    <span class="metriccard__trend-word"></span>
  </span>
</article>
<style>
.metriccard { font: 13px system-ui, sans-serif; color: #241430; border: 1px solid #24143018; border-radius: 10px; padding: 14px; max-width: 220px; }
.metriccard__label { display: block; font-size: 12px; opacity: .7; margin-bottom: 6px; }
.metriccard__value { margin: 0 0 6px; font-size: 24px; font-weight: 700; }
.metriccard__unit { font-size: 13px; font-weight: 400; opacity: .7; }
.metriccard__trend { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; }
.metriccard__trend svg { fill: currentColor; }
.metriccard--up .metriccard__trend { color: #2f8f4e; }
.metriccard--down .metriccard__trend { color: #b3261e; }
.metriccard--flat .metriccard__trend { color: #24143099; }
.metriccard--down svg { transform: rotate(180deg); }
.metriccard--flat svg { transform: rotate(90deg); }
.metriccard--up .metriccard__trend-word::before { content: "trending up"; }
.metriccard--down .metriccard__trend-word::before { content: "trending down"; }
.metriccard--flat .metriccard__trend-word::before { content: "steady"; }
</style>

tailwind

<article class="metriccard-tw metriccard-tw--down font-sans text-[13px] text-[#241430] border border-[#24143018] rounded-[10px] p-3.5 max-w-[220px]" style="--c:#A8E6C1;">
  <span class="block text-xs opacity-70 mb-1.5">Page load time</span>
  <p class="m-0 mb-1.5 text-2xl font-bold">1.8 <span class="text-[13px] font-normal opacity-70">seconds</span></p>
  <span class="metriccard-tw__trend inline-flex items-center gap-1 text-[11px]">
    <svg viewBox="0 0 10 10" width="10" height="10" aria-hidden="true" fill="currentColor"><path d="M5 1l4 4H1z"/></svg>
    <span class="metriccard-tw__trend-word"></span>
  </span>
</article>
<style>
.metriccard-tw--up .metriccard-tw__trend { color: #2f8f4e; }
.metriccard-tw--down .metriccard-tw__trend { color: #b3261e; }
.metriccard-tw--flat .metriccard-tw__trend { color: #24143099; }
.metriccard-tw--down .metriccard-tw__trend svg { transform: rotate(180deg); }
.metriccard-tw--flat .metriccard-tw__trend svg { transform: rotate(90deg); }
.metriccard-tw--up .metriccard-tw__trend-word::before { content: "trending up"; }
.metriccard-tw--down .metriccard-tw__trend-word::before { content: "trending down"; }
.metriccard-tw--flat .metriccard-tw__trend-word::before { content: "steady"; }
</style>

react

export function MetricCard({
  label = "Page load time",
  value = "1.8",
  unit = "seconds",
  trend = "down",
  color = "#A8E6C1",
}) {
  const tone = { up: "#2f8f4e", down: "#b3261e", flat: "#24143099" }[trend] ?? "#2f8f4e";
  const word = { up: "trending up", down: "trending down", flat: "steady" }[trend] ?? "trending up";
  const rotate = { up: "0deg", down: "180deg", flat: "90deg" }[trend] ?? "0deg";
  return (
    <article style={{ font: "13px system-ui, sans-serif", color: "#241430", border: "1px solid #24143018", borderRadius: 10, padding: 14, maxWidth: 220 }}>
      <span style={{ display: "block", fontSize: 12, opacity: 0.7, marginBottom: 6 }}>{label}</span>
      <p style={{ margin: "0 0 6px", fontSize: 24, fontWeight: 700 }}>{value} <span style={{ fontSize: 13, fontWeight: 400, opacity: 0.7 }}>{unit}</span></p>
      <span style={{ display: "inline-flex", alignItems: "center", gap: 4, fontSize: 11, 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>
        {word}
      </span>
    </article>
  );
}