Header

A real <header>, the banner landmark. A page can have more than one <header>, only the top-level site one should usually be the banner (nested ones inside <article>or <section> aren't). sticky pins it to the top of its scroll container with a blurred backdrop, it's off by default since not every header needs to follow the page.

import { Header } from "@kernelui/react";

<Header>
  <strong>Acme</strong>
</Header>

<Header sticky>
  <strong>Acme</strong>
</Header>

Props

Accessibility

• Renders a native <header>, exposed as thebanner landmark so assistive tech can jump straight to it.
• Only one <header> per page should be a top-level banner, headers nested inside <article> or<section> are scoped to that content instead.