Widget Header

Header containing title/context/actions.

html

<header class="whead" style="--c:#E8A020;">
  <div class="whead__text">
    <h3 class="whead__title">Support tickets</h3>
    <span class="whead__context">Last 30 days</span>
  </div>
  
  <div class="whead__toolbar">
    <button type="button" aria-label="Refresh">⟳</button>
    <button type="button" aria-label="Expand">⤢</button>
  </div>
  
</header>
<style>
.whead { 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: 8px; }
.whead__title { margin: 0; font-size: 15px; }
.whead__context { font-size: 11px; opacity: .65; }
.whead__toolbar { display: flex; gap: 4px; flex: none; }
.whead__toolbar button { border: 1px solid #24143022; background: #FAF7F2; border-radius: 6px; width: 24px; height: 24px; cursor: pointer; }
.whead__toolbar button:hover, .whead__toolbar button:focus-visible { background: color-mix(in srgb, var(--c) 30%, #FAF7F2); outline: none; }
</style>

tailwind

<header class="whead-tw flex justify-between items-start gap-2.5 font-sans text-[13px] text-[#241430] border-b-2 pb-2" style="border-color:#E8A020;--c:#E8A020;">
  <div>
    <h3 class="m-0 text-[15px]">Support tickets</h3>
    <span class="text-[11px] opacity-65">Last 30 days</span>
  </div>
  
  <div class="flex gap-1 flex-none">
    <button type="button" class="border border-[#24143022] bg-[#FAF7F2] rounded-md w-6 h-6 cursor-pointer" aria-label="Refresh">⟳</button>
    <button type="button" class="border border-[#24143022] bg-[#FAF7F2] rounded-md w-6 h-6 cursor-pointer" aria-label="Expand">⤢</button>
  </div>
  
</header>

react

export function WidgetHeader({
  title = "Support tickets",
  context = "Last 30 days",
  toolbar = true,
  color = "#E8A020",
}) {
  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: 8 }}>
      <div>
        <h3 style={{ margin: 0, fontSize: 15 }}>{title}</h3>
        <span style={{ fontSize: 11, opacity: 0.65 }}>{context}</span>
      </div>
      {toolbar && (
        <div style={{ display: "flex", gap: 4, flex: "none" }}>
          <button type="button" aria-label="Refresh" style={{ border: "1px solid #24143022", background: "#FAF7F2", borderRadius: 6, width: 24, height: 24, cursor: "pointer" }}>⟳</button>
          <button type="button" aria-label="Expand" style={{ border: "1px solid #24143022", background: "#FAF7F2", borderRadius: 6, width: 24, height: 24, cursor: "pointer" }}>⤢</button>
        </div>
      )}
    </header>
  );
}