Summary Card

Overview of an entity or dataset.

html

<div class="summary-card summary-card--detailed summary-card--bordered" style="--accent:#A8E6C1;border-radius:14px;">
  <div class="summary-card__header">
    <h3 class="summary-card__title">Q3 Product Launch</h3>
    <span class="summary-card__badge">Live</span>
  </div>
  <p class="summary-card__description">Adoption trends across all regions during the third quarter.</p>
  <dl class="summary-card__stats">
    <div class="summary-card__stat">
      <dt>Users</dt>
      <dd>12,480</dd>
    </div>
    <div class="summary-card__stat">
      <dt>Growth</dt>
      <dd>+18%</dd>
    </div>
    <div class="summary-card__stat">
      <dt>Status</dt>
      <dd>On track</dd>
    </div>
  </dl>
</div>
<style>
.summary-card { font: 16px/1.5 system-ui, sans-serif; color: #241430; background: #FAF7F2; box-sizing: border-box; padding: 20px; max-width: 340px; }
.summary-card--bordered { border: 1.5px solid #24143025; }
.summary-card--detailed { box-shadow: 0 10px 26px rgba(36,20,48,.10); }
.summary-card__header { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.summary-card__title { margin: 0; font-size: 17px; font-weight: 700; }
.summary-card__badge { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--accent); border: 1px solid var(--accent); border-radius: 999px; padding: 2px 8px; }
.summary-card__description { margin: 0 0 16px; font-size: 13.5px; color: #241430b3; }
.summary-card--compact .summary-card__description { display: none; }
.summary-card__stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 0; }
.summary-card--compact .summary-card__stats { gap: 8px; }
.summary-card__stat dt { margin: 0 0 2px; font-size: 11px; color: #24143099; text-transform: uppercase; letter-spacing: .03em; }
.summary-card__stat dd { margin: 0; font-size: 15px; font-weight: 700; }
.summary-card--compact .summary-card__stat dd { font-size: 13px; }
.summary-card--compact .summary-card__stat dt { font-size: 10px; }
</style>

tailwind

<div class="summary-card-tw summary-card-tw--detailed border border-[#24143025] font-sans text-[#241430] bg-[#FAF7F2] box-border p-5 max-w-[340px]" style="--accent:#A8E6C1;border-radius:14px;">
  <div class="flex items-center justify-between gap-2.5 mb-2">
    <h3 class="m-0 text-[17px] font-bold">Q3 Product Launch</h3>
    <span class="text-[11px] font-semibold uppercase tracking-wide rounded-full px-2 py-0.5 border" style="color:#A8E6C1;border-color:#A8E6C1">Live</span>
  </div>
  <p class="summary-card-tw__description m-0 mb-4 text-[13.5px] text-[#241430]/70">Adoption trends across all regions during the third quarter.</p>
  <dl class="summary-card-tw__stats grid grid-cols-3 gap-3 m-0">
    <div>
      <dt class="m-0 mb-0.5 text-[11px] uppercase tracking-wide text-[#24143099]">Users</dt>
      <dd class="m-0 text-[15px] font-bold">12,480</dd>
    </div>
    <div>
      <dt class="m-0 mb-0.5 text-[11px] uppercase tracking-wide text-[#24143099]">Growth</dt>
      <dd class="m-0 text-[15px] font-bold">+18%</dd>
    </div>
    <div>
      <dt class="m-0 mb-0.5 text-[11px] uppercase tracking-wide text-[#24143099]">Status</dt>
      <dd class="m-0 text-[15px] font-bold">On track</dd>
    </div>
  </dl>
</div>
<style>
.summary-card-tw--detailed { box-shadow: 0 10px 26px rgba(36,20,48,.10); }
.summary-card-tw--compact .summary-card-tw__description { display: none; }
.summary-card-tw--compact .summary-card-tw__stats { gap: 8px; }
</style>

react

export function SummaryCard({
  title = "Q3 Product Launch",
  description = "Adoption trends across all regions during the third quarter.",
  variant = "detailed",
  accent = "#A8E6C1",
  bordered = true,
  radius = 14,
}) {
  const compact = variant === "compact";
  const statStyle = { margin: 0, fontSize: compact ? 13 : 15, fontWeight: 700 };
  const labelStyle = { margin: "0 0 2px", fontSize: compact ? 10 : 11, color: "#24143099", textTransform: "uppercase", letterSpacing: ".03em" };
  return (
    <div style={{ fontFamily: "system-ui, sans-serif", fontSize: 16, lineHeight: 1.5, color: "#241430",
      background: "#FAF7F2", boxSizing: "border-box", padding: 20, maxWidth: 340, borderRadius: radius,
      border: bordered ? "1.5px solid #24143025" : "none",
      boxShadow: !compact ? "0 10px 26px rgba(36,20,48,.10)" : "none" }}>
      <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", gap: 10, marginBottom: 8 }}>
        <h3 style={{ margin: 0, fontSize: 17, fontWeight: 700 }}>{title}</h3>
        <span style={{ fontSize: 11, fontWeight: 600, textTransform: "uppercase", letterSpacing: ".04em",
          color: accent, border: `1px solid ${accent}`, borderRadius: 999, padding: "2px 8px" }}>Live</span>
      </div>
      {!compact && <p style={{ margin: "0 0 16px", fontSize: 13.5, color: "#241430b3" }}>{description}</p>}
      <dl style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: compact ? 8 : 12, margin: 0 }}>
        <div>
          <dt style={labelStyle}>Users</dt>
          <dd style={statStyle}>12,480</dd>
        </div>
        <div>
          <dt style={labelStyle}>Growth</dt>
          <dd style={statStyle}>+18%</dd>
        </div>
        <div>
          <dt style={labelStyle}>Status</dt>
          <dd style={statStyle}>On track</dd>
        </div>
      </dl>
    </div>
  );
}