Interactive Card

Entire card or sections are interactive.

html

<article class="intcard intcard--elevated" style="--c:#E8A020;">
  <h3 class="intcard__title"><a class="intcard__link" href="#detail">Autumn campaign brief</a></h3>
  <p class="intcard__body">Creative direction, timeline and budget for the Q4 launch.</p>
  <button type="button" class="intcard__action">Save</button>
</article>
<style>
.intcard { position: relative; font: 14px/1.5 system-ui, sans-serif; color: #241430; border-radius: 12px; padding: 18px; max-width: 300px; background: #FAF7F2; }
.intcard--elevated { box-shadow: 0 8px 20px rgba(36,20,48,.14); }
.intcard--outlined { border: 1.5px solid var(--c); }
.intcard__title { margin: 0 0 8px; font-size: 16px; }
.intcard__link { color: inherit; text-decoration: none; }
.intcard__link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.intcard__link:hover, .intcard__link:focus-visible { text-decoration: underline; }
.intcard__body { margin: 0 0 14px; font-size: 13px; opacity: .8; }
.intcard__action { position: relative; z-index: 1; border: 1.5px solid var(--c); border-radius: 8px; padding: 7px 14px; font: 600 13px system-ui, sans-serif; cursor: pointer; background: transparent; color: #241430; }
.intcard__action:hover, .intcard__action:focus-visible { background: color-mix(in srgb, var(--c) 25%, #FAF7F2); outline: none; }
</style>

tailwind

<article class="intcard-tw intcard-tw--elevated relative font-sans text-[14px] leading-relaxed text-[#241430] rounded-xl p-4.5 max-w-xs bg-[#FAF7F2]" style="--c:#E8A020;">
  <h3 class="m-0 mb-2 text-base"><a class="intcard-tw__link text-inherit no-underline hover:underline focus-visible:underline" href="#detail">Autumn campaign brief</a></h3>
  <p class="m-0 mb-3.5 text-[13px] opacity-80">Creative direction, timeline and budget for the Q4 launch.</p>
  <button type="button" class="relative z-10 border-[1.5px] rounded-lg px-3.5 py-1.5 text-[13px] font-semibold cursor-pointer bg-transparent text-[#241430]" style="border-color:var(--c);">Save</button>
</article>
<style>
.intcard-tw--elevated { box-shadow: 0 8px 20px rgba(36,20,48,.14); }
.intcard-tw--outlined { border: 1.5px solid var(--c); }
.intcard-tw__link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
</style>

react

export function InteractiveCard({
  title = "Autumn campaign brief",
  body = "Creative direction, timeline and budget for the Q4 launch.",
  actionLabel = "Save",
  variant = "elevated",
  color = "#E8A020",
}) {
  const wrap = variant === "elevated" ? { boxShadow: "0 8px 20px rgba(36,20,48,.14)" } : { border: "1.5px solid " + color };
  return (
    <article style={{ position: "relative", font: "14px/1.5 system-ui, sans-serif", color: "#241430", borderRadius: 12, padding: 18, maxWidth: 300, background: "#FAF7F2", ...wrap }}>
      <h3 style={{ margin: "0 0 8px", fontSize: 16 }}>
        {/* Stretched-link pattern: this anchor's ::after covers the card so the
            whole card is clickable, while the button below stays above it in
            z-index and is never swallowed by the overlay. */}
        <a href="#detail" style={{ color: "inherit", textDecoration: "none", position: "relative" }}>
          {title}
          <span style={{ position: "absolute", inset: 0 }} />
        </a>
      </h3>
      <p style={{ margin: "0 0 14px", fontSize: 13, opacity: 0.8 }}>{body}</p>
      <button type="button" style={{ position: "relative", zIndex: 1, border: "1.5px solid " + color, borderRadius: 8, padding: "7px 14px", fontWeight: 600, fontSize: 13, cursor: "pointer", background: "transparent", color: "#241430" }}>
        {actionLabel}
      </button>
    </article>
  );
}