List Header

List title/context.

html

<div class="lh-demo">
  <div class="lh lh--with-action" style="--accent:#E8A020;">
    <h3 class="lh__title">Team members</h3>
    <span class="lh__count">12 items</span>
    <button type="button" class="lh__action">Add</button>
  </div>
  <ul class="lh-demo__items">
    <li>Alicia Ferreira</li>
    <li>Ben Sato</li>
    <li>Charu Deshpande</li>
  </ul>
</div>
<style>
.lh-demo { font: 14px/1.4 system-ui, sans-serif; color: #241430; background: #FAF7F2; max-width: 300px; width: 300px; border-radius: 12px; box-sizing: border-box; overflow: hidden; border: 1px solid #24143014; }
.lh { display: flex; align-items: center; gap: 8px; padding: 12px 14px; border-bottom: 2px solid var(--accent); }
.lh--sticky { position: sticky; top: 0; background: #FAF7F2; }
.lh__title { margin: 0; font-size: 14px; font-weight: 700; flex: 1; }
.lh__count { display: none; font-size: 12px; color: #241430a0; }
.lh__action { display: none; background: var(--accent); color: #241430; border: none; border-radius: 6px; padding: 5px 10px; font: inherit; font-weight: 600; cursor: pointer; }
.lh--with-count .lh__count { display: inline; }
.lh--with-action .lh__action { display: inline-block; }
.lh-demo__items { list-style: none; margin: 0; padding: 8px 14px; }
.lh-demo__items li { padding: 6px 0; }
</style>

tailwind

<div class="lh-tw-demo font-sans text-sm text-[#241430] bg-[#FAF7F2] max-w-[300px] w-[300px] rounded-xl box-border overflow-hidden border border-[#24143014]">
  <div class="lh-tw lh-tw--with-action flex items-center gap-2 py-3 px-3.5" style="--accent:#E8A020;border-bottom:2px solid #E8A020">
    <h3 class="m-0 text-sm font-bold flex-1">Team members</h3>
    <span class="lh-tw__count text-xs text-[#241430a0]">12 items</span>
    <button type="button" class="lh-tw__action rounded-md py-1 px-2.5 font-semibold border-0 cursor-pointer" style="background:#E8A020;color:#241430">Add</button>
  </div>
  <ul class="list-none m-0 py-2 px-3.5">
    <li class="py-1.5">Alicia Ferreira</li>
    <li class="py-1.5">Ben Sato</li>
    <li class="py-1.5">Charu Deshpande</li>
  </ul>
</div>
<style>
.lh-tw--sticky { position: sticky; top: 0; background: #FAF7F2; }
.lh-tw__count { display: none; }
.lh-tw__action { display: none; }
.lh-tw--with-count .lh-tw__count { display: inline; }
.lh-tw--with-action .lh-tw__action { display: inline-block; }
</style>

react

export function ListHeader({
  title = "Team members",
  count = 12,
  layout = "with-action",
  accent = "#E8A020",
  sticky = false,
}) {
  return (
    <div style={{ fontFamily: "system-ui, sans-serif", fontSize: 14, color: "#241430", background: "#FAF7F2", maxWidth: 300, width: 300, borderRadius: 12, boxSizing: "border-box", overflow: "hidden", border: "1px solid #24143014" }}>
      <div style={{ display: "flex", alignItems: "center", gap: 8, padding: "12px 14px", borderBottom: `2px solid ${accent}`, position: sticky ? "sticky" : "static", top: sticky ? 0 : undefined, background: sticky ? "#FAF7F2" : "transparent" }}>
        <h3 style={{ margin: 0, fontSize: 14, fontWeight: 700, flex: 1 }}>{title}{sticky && <span aria-label="Sticky"> 📌</span>}</h3>
        {layout === "with-count" && <span style={{ fontSize: 12, color: "#241430a0" }}>{count} items</span>}
        {layout === "with-action" && <button type="button" style={{ background: accent, color: "#241430", border: "none", borderRadius: 6, padding: "5px 10px", font: "inherit", fontWeight: 600, cursor: "pointer" }}>Add</button>}
      </div>
      <ul style={{ listStyle: "none", margin: 0, padding: "8px 14px" }}>
        <li style={{ padding: "6px 0" }}>Alicia Ferreira</li>
        <li style={{ padding: "6px 0" }}>Ben Sato</li>
        <li style={{ padding: "6px 0" }}>Charu Deshpande</li>
      </ul>
    </div>
  );
}