Card Header

Card title/context area.

html

<header class="cardhead" style="--c:#BFD9F2;">
  <div class="cardhead__text">
    <h3 class="cardhead__title">Invoice #4021</h3>
    <span class="cardhead__subtitle">Due 2 September</span>
  </div>
  <button type="button" class="cardhead__action" aria-label="More actions for Invoice #4021">⋯</button>
</header>
<style>
.cardhead { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; font: 13px system-ui, sans-serif; color: #241430; border-bottom: 2px solid var(--c); padding-bottom: 10px; max-width: 300px; }
.cardhead__title { margin: 0; font-size: 15px; }
.cardhead__subtitle { font-size: 12px; opacity: .65; }
.cardhead__action { border: 1px solid #24143022; background: #FAF7F2; border-radius: 6px; width: 26px; height: 26px; cursor: pointer; flex: none; }
.cardhead__action:hover, .cardhead__action:focus-visible { background: color-mix(in srgb, var(--c) 30%, #FAF7F2); outline: none; }
</style>

tailwind

<header class="cardhead-tw flex justify-between items-start gap-2.5 font-sans text-[13px] text-[#241430] border-b-2 pb-2.5 max-w-xs" style="border-color:#BFD9F2;">
  <div>
    <h3 class="m-0 text-[15px]">Invoice #4021</h3>
    <span class="text-xs opacity-65">Due 2 September</span>
  </div>
  <button type="button" class="border border-[#24143022] bg-[#FAF7F2] rounded-md w-[26px] h-[26px] cursor-pointer flex-none" aria-label="More actions for Invoice #4021">⋯</button>
</header>

react

export function CardHeader({
  title = "Invoice #4021",
  subtitle = "Due 2 September",
  showAction = true,
  color = "#BFD9F2",
}) {
  return (
    <header style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start", gap: 10, font: "13px system-ui, sans-serif", color: "#241430", borderBottom: "2px solid " + color, paddingBottom: 10, maxWidth: 300 }}>
      <div>
        <h3 style={{ margin: 0, fontSize: 15 }}>{title}</h3>
        <span style={{ fontSize: 12, opacity: 0.65 }}>{subtitle}</span>
      </div>
      {showAction && (
        <button type="button" aria-label={"More actions for " + title} style={{ border: "1px solid #24143022", background: "#FAF7F2", borderRadius: 6, width: 26, height: 26, cursor: "pointer", flex: "none" }}>
          ⋯
        </button>
      )}
    </header>
  );
}