Card

Self-contained content/action block.

Weekly digest

A short summary of what changed, written so anyone can skim it in ten seconds.

html

<article class="card card--elevated" style="border-radius:16px;">
  <span class="card__accent" style="background:#A8E6C1;"></span>
  <h3 class="card__title">Weekly digest</h3>
  <p class="card__body">A short summary of what changed, written so anyone can skim it in ten seconds.</p>
  
  <div class="card__footer">
    <button class="card__action" style="color:#A8E6C1;border-color:#A8E6C1;" type="button">View details</button>
  </div>
  
</article>
<style>
.card { font: 16px/1.5 system-ui, sans-serif; max-width: 320px; padding: 20px; background: #FAF7F2; color: #241430; }
.card--elevated { box-shadow: 0 8px 24px rgba(36,20,48,.16); border: 1px solid transparent; }
.card--outlined { border: 1.5px solid #A8E6C1; box-shadow: none; }
.card--flat { border: none; box-shadow: none; }
.card__accent { display: block; width: 40px; height: 4px; border-radius: 2px; margin-bottom: 12px; }
.card__title { margin: 0 0 8px; font-weight: 600; font-size: 18px; }
.card__body { margin: 0; font-size: 14px; color: #241430cc; }
.card__footer { margin-top: 16px; }
.card__action { background: transparent; border: 1.5px solid; padding: 8px 14px; border-radius: 8px; font: 500 14px system-ui, sans-serif; cursor: pointer; }
.card__action:focus-visible { outline: 2px solid #A8E6C1; outline-offset: 2px; }
</style>

tailwind

<div class="card-tw card-tw--elevated max-w-xs p-5 bg-[#FAF7F2] text-[#241430] font-sans shadow-lg" style="border-radius:16px;">
  <span class="block w-10 h-1 rounded-full mb-3" style="background:#A8E6C1"></span>
  <h3 class="m-0 mb-2 text-lg font-semibold">Weekly digest</h3>
  <p class="m-0 text-sm text-[#241430]/80">A short summary of what changed, written so anyone can skim it in ten seconds.</p>
  
  <div class="mt-4">
    <button type="button" class="bg-transparent border-[1.5px] px-3.5 py-2 rounded-lg text-sm font-medium" style="color:#A8E6C1;border-color:#A8E6C1">View details</button>
  </div>
  
</div>
<style>
.card-tw--outlined { box-shadow: none !important; border: 1.5px solid #A8E6C1; }
.card-tw--flat { box-shadow: none !important; border: none; }
</style>

react

export function Card({
  title = "Weekly digest",
  body = "A short summary of what changed, written so anyone can skim it in ten seconds.",
  variant = "elevated",
  accent = "#A8E6C1",
  radius = 16,
  footer = true,
}) {
  const wrap = {
    elevated: { boxShadow: "0 8px 24px rgba(36,20,48,.16)", border: "1px solid transparent" },
    outlined: { border: `1.5px solid ${accent}`, boxShadow: "none" },
    flat: { border: "none", boxShadow: "none" },
  }[variant] ?? {};
  return (
    <div style={{ maxWidth: 320, padding: 20, background: "#FAF7F2", color: "#241430",
      borderRadius: radius, fontFamily: "system-ui, sans-serif", ...wrap }}>
      <span style={{ display: "block", width: 40, height: 4, borderRadius: 2, background: accent, marginBottom: 12 }} />
      <h3 style={{ margin: "0 0 8px", fontWeight: 600, fontSize: 18 }}>{title}</h3>
      <p style={{ margin: 0, fontSize: 14, color: "#241430cc" }}>{body}</p>
      {footer && (
        <div style={{ marginTop: 16 }}>
          <button type="button" style={{ background: "transparent", border: `1.5px solid ${accent}`,
            color: accent, padding: "8px 14px", borderRadius: 8, fontSize: 14, fontWeight: 500, cursor: "pointer" }}>
            View details
          </button>
        </div>
      )}
    </div>
  );
}