header

Introductory/header content for a page or section.

html

<div class="head-demo">
  <p class="head-demo__scope">Scope: <strong>&lt;page&gt;</strong> header</p>
  <header class="hdr" style="--accent:#241430;">
    <span class="hdr__brand">Studio</span>
    
    <nav class="hdr__nav"><a href="#">Work</a><a href="#">About</a><a href="#">Contact</a></nav>
    
  </header>
</div>
<style>
.head-demo { width: 380px; box-sizing: border-box; font: 14px/1.5 system-ui, sans-serif; }
.head-demo__scope { margin: 0 0 8px; font-size: 12px; color: #241430888; }
.hdr { display: flex; align-items: center; justify-content: space-between; background: #FAF7F2; padding: 14px 18px; border-bottom: 3px solid var(--accent); border-radius: 10px 10px 0 0; }
.hdr__brand { font-weight: 800; font-size: 16px; color: var(--accent); }
.hdr__nav { display: flex; gap: 16px; }
.hdr__nav a { color: #241430; text-decoration: none; font-weight: 600; font-size: 13px; }
.hdr__nav a:hover { color: var(--accent); }
</style>

tailwind

<div class="w-[380px] box-border font-sans text-sm">
  <p class="m-0 mb-2 text-xs text-[#241430]/55">Scope: <strong>&lt;page&gt;</strong> header</p>
  <header class="flex items-center justify-between bg-[#FAF7F2] px-[18px] py-3.5 border-b-[3px] rounded-t-[10px]" style="border-color:#241430">
    <span class="font-extrabold text-base" style="color:#241430">Studio</span>
    
    <nav class="flex gap-4"><a href="#" class="text-[#241430] no-underline font-semibold text-[13px] hover:opacity-70">Work</a><a href="#" class="text-[#241430] no-underline font-semibold text-[13px] hover:opacity-70">About</a><a href="#" class="text-[#241430] no-underline font-semibold text-[13px] hover:opacity-70">Contact</a></nav>
    
  </header>
</div>

react

export function HeaderElement({
  brand = "Studio",
  scope = "page",
  accent = "#241430",
  showNav = true,
}) {
  return (
    <div style={{ width: 380, boxSizing: "border-box", font: "14px/1.5 system-ui, sans-serif" }}>
      <p style={{ margin: "0 0 8px", fontSize: 12, color: "#241430888" }}>Scope: <strong>{`<${scope}>`}</strong> header</p>
      <header style={{ display: "flex", alignItems: "center", justifyContent: "space-between", background: "#FAF7F2", padding: "14px 18px", borderBottom: `3px solid ${accent}`, borderRadius: "10px 10px 0 0" }}>
        <span style={{ fontWeight: 800, fontSize: 16, color: accent }}>{brand}</span>
        {showNav && (
          <nav style={{ display: "flex", gap: 16 }}>
            <a href="#" style={{ color: "#241430", textDecoration: "none", fontWeight: 600, fontSize: 13 }}>Work</a>
            <a href="#" style={{ color: "#241430", textDecoration: "none", fontWeight: 600, fontSize: 13 }}>About</a>
            <a href="#" style={{ color: "#241430", textDecoration: "none", fontWeight: 600, fontSize: 13 }}>Contact</a>
          </nav>
        )}
      </header>
    </div>
  );
}