Marketing headers

Marketing-site nav with centered links, trailing CTA, and full-screen mobile menu. Distinct from the application Navbars.

Preview

React preview

LiveView (HEEx)

alias DesignSystem.UI.MarketingHeaders

<MarketingHeaders.header
  brand_label="Goodbones"
  brand_href={~p"/"}
  links={[
    %{label: "Product", href: "#"},
    %{label: "Features", href: "#"},
    %{label: "Company", href: ~p"/about"}
  ]}
>
  <:cta>
    <.link href={~p"/login"} class="text-sm/6 font-semibold text-gray-900 dark:text-white">
      Log in <span aria-hidden="true">&rarr;</span>
    </.link>
  </:cta>
</MarketingHeaders.header>

React (JSX)

import { MarketingHeader } from "../ui/index.mjs"

<MarketingHeader
  brandLabel="Goodbones"
  brandHref="/"
  links={[
    { label: "Product", href: "#" },
    { label: "Features", href: "#" },
    { label: "Company", href: "/about" },
  ]}
  cta={
    <a href="/login" className="text-sm/6 font-semibold text-gray-900 dark:text-white">
      Log in <span aria-hidden="true">&rarr;</span>
    </a>
  }
/>