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.

Playground

Toggle every adjustable prop and watch the component — and the code — update live.

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

<kernel-header>
  <strong>Acme</strong>
</kernel-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.