Action Card

Card primarily encouraging an action.

html

<article class="actioncard actioncard--primary" style="--c:#A8E6C1;">
  <h3 class="actioncard__title">Connect your calendar</h3>
  <p class="actioncard__body">Sync meetings automatically so nothing gets double-booked.</p>
  <button type="button" class="actioncard__action">Connect</button>
</article>
<style>
.actioncard { font: 14px/1.5 system-ui, sans-serif; color: #241430; max-width: 300px; border-radius: 12px; padding: 18px; }
.actioncard--primary { background: var(--c); }
.actioncard--secondary { background: #FAF7F2; border: 1.5px solid var(--c); }
.actioncard--ghost { background: transparent; border: 1px dashed #24143033; }
.actioncard__title { margin: 0 0 6px; font-size: 16px; }
.actioncard__body { margin: 0 0 14px; font-size: 13px; opacity: .85; }
.actioncard__action { border: none; border-radius: 8px; padding: 8px 16px; font: 600 13px system-ui, sans-serif; cursor: pointer; background: #241430; color: #FAF7F2; }
.actioncard--secondary .actioncard__action, .actioncard--ghost .actioncard__action { background: var(--c); color: #241430; }
.actioncard__action:focus-visible { outline: 2px solid #241430; outline-offset: 2px; }
</style>

tailwind

<article class="actioncard-tw actioncard-tw--primary font-sans text-[14px] leading-relaxed text-[#241430] max-w-xs rounded-xl p-4.5" style="--c:#A8E6C1;">
  <h3 class="m-0 mb-1.5 text-base">Connect your calendar</h3>
  <p class="m-0 mb-3.5 text-[13px] opacity-85">Sync meetings automatically so nothing gets double-booked.</p>
  <button type="button" class="actioncard-tw__action border-none rounded-lg px-4 py-2 text-[13px] font-semibold cursor-pointer bg-[#241430] text-[#FAF7F2]">Connect</button>
</article>
<style>
.actioncard-tw--primary { background: var(--c); }
.actioncard-tw--secondary { background: #FAF7F2; border: 1.5px solid var(--c); }
.actioncard-tw--ghost { background: transparent; border: 1px dashed #24143033; }
.actioncard-tw--secondary .actioncard-tw__action, .actioncard-tw--ghost .actioncard-tw__action { background: var(--c) !important; color: #241430 !important; }
</style>

react

export function ActionCard({
  title = "Connect your calendar",
  body = "Sync meetings automatically so nothing gets double-booked.",
  actionLabel = "Connect",
  variant = "primary",
  color = "#A8E6C1",
}) {
  const wrap = {
    primary: { background: color, border: "none" },
    secondary: { background: "#FAF7F2", border: "1.5px solid " + color },
    ghost: { background: "transparent", border: "1px dashed #24143033" },
  }[variant] ?? {};
  const actionBg = variant === "primary" ? "#241430" : color;
  const actionColor = variant === "primary" ? "#FAF7F2" : "#241430";
  return (
    <article style={{ font: "14px/1.5 system-ui, sans-serif", color: "#241430", maxWidth: 300, borderRadius: 12, padding: 18, ...wrap }}>
      <h3 style={{ margin: "0 0 6px", fontSize: 16 }}>{title}</h3>
      <p style={{ margin: "0 0 14px", fontSize: 13, opacity: 0.85 }}>{body}</p>
      <button type="button" style={{ border: "none", borderRadius: 8, padding: "8px 16px", fontSize: 13, fontWeight: 600, cursor: "pointer", background: actionBg, color: actionColor }}>
        {actionLabel}
      </button>
    </article>
  );
}