Header

Top-level page/application header.

html

<header class="head-demo head-demo--split" style="background:#FAF7F2;">
  <span class="head-demo__logo">Clydeford</span>
  <nav class="head-demo__nav"><a href="#">Product</a><a href="#">Pricing</a><a href="#">Docs</a></nav>
</header>
<style>
.head-demo { display: flex; align-items: center; font: 14px system-ui, sans-serif; color: #241430; padding: 12px 16px; border-bottom: 1px solid #24143018; box-sizing: border-box; }
.head-demo--split { justify-content: space-between; }
.head-demo--center { justify-content: center; flex-direction: column; gap: 8px; text-align: center; }
.head-demo__logo { font-weight: 700; font-size: 16px; }
.head-demo__nav { display: flex; gap: 18px; }
.head-demo__nav a { color: #241430; text-decoration: none; opacity: .75; }
.head-demo__nav a:hover { opacity: 1; }
</style>

tailwind

<header class="flex items-center font-sans text-sm text-[#241430] px-4 py-3 border-b border-[#24143018] box-border head-tw head-tw--split" style="background:#FAF7F2;">
  <span class="font-bold text-base">Clydeford</span>
  <nav class="flex gap-[18px]"><a href="#" class="text-[#241430] no-underline opacity-75 hover:opacity-100">Product</a><a href="#" class="text-[#241430] no-underline opacity-75 hover:opacity-100">Pricing</a><a href="#" class="text-[#241430] no-underline opacity-75 hover:opacity-100">Docs</a></nav>
</header>
<style>
.head-tw--split { justify-content: space-between; }
.head-tw--center { justify-content: center; flex-direction: column; gap: 8px; text-align: center; }
</style>

react

export function Header({
  title = "Clydeford",
  align = "split",
  bg = "#FAF7F2",
  nav = true,
}) {
  const centered = align === "center";
  return (
    <header style={{
      display: "flex", alignItems: "center", justifyContent: centered ? "center" : "space-between",
      flexDirection: centered ? "column" : "row", gap: centered ? 8 : 0, textAlign: centered ? "center" : "left",
      fontFamily: "system-ui, sans-serif", fontSize: 14, color: "#241430", background: bg, padding: "12px 16px",
      borderBottom: "1px solid #24143018", boxSizing: "border-box",
    }}>
      <span style={{ fontWeight: 700, fontSize: 16 }}>{title}</span>
      {nav && (
        <nav style={{ display: "flex", gap: 18 }}>
          <a href="#" style={{ color: "#241430", textDecoration: "none", opacity: .75 }}>Product</a>
          <a href="#" style={{ color: "#241430", textDecoration: "none", opacity: .75 }}>Pricing</a>
          <a href="#" style={{ color: "#241430", textDecoration: "none", opacity: .75 }}>Docs</a>
        </nav>
      )}
    </header>
  );
}