header
Introductory content for its nearest sectioning ancestor. Contains headings, logos, navigation, search forms, or other introductory elements.
Usage
Use the <header> element for:
- Site header with logo, navigation, and search
- Page header with title and breadcrumbs
- Article header with title, author, and publication date
- Section headers with title and description
- Card headers with title and actions
A page can have multiple header elements: one for the site and additional ones within articles, sections, or other content.
Examples
Default
Basic header without additional styling.
Default header
<header> <h2>Page Title</h2> <p>A brief description of the page content.</p></header>.site
Full-width site header with flexbox layout.
Site header
<header class="site"> <strong>Brand</strong> <nav class="horizontal pills" aria-label="Site navigation"> <ul> <li><a href="#">Home</a></li> <li><a href="#">Products</a></li> <li><a href="#">About</a></li> <li><a href="#">Contact</a></li> </ul> </nav></header>.page
Page header with bottom border and spacing.
Page header
<header class="page"> <h1>Documentation</h1> <p>Learn how to use Vanilla Breeze in your projects.</p></header><p>Page content begins here...</p>.card
Card header with bottom border.
Card header
<layout-card> <header class="card"> <h3>Card Title</h3> </header> <p>Card content goes here...</p></layout-card>Sticky
Add data-sticky to pin the header to the top of the viewport during scroll. See the data-sticky attribute page for full details and recipes.
Sticky header
<header data-sticky class="site"> <strong>Sticky Header</strong> <nav class="horizontal pills"> <ul> <li><a href="#">Link 1</a></li> <li><a href="#">Link 2</a></li> </ul> </nav></header>.centered
Centered header for landing pages.
Centered header
<header class="centered"> <h1>Welcome to Our Site</h1> <p>Building the future of web development, one component at a time.</p></header>.compact
Compact header with reduced padding and smaller text.
Compact header
<header class="compact site"> <strong>Brand</strong> <nav class="horizontal minimal"> <ul> <li><a href="#">Home</a></li> <li><a href="#">Docs</a></li> <li><a href="#">API</a></li> </ul> </nav></header>Variants
| Class | Description |
|---|---|
.site |
Flexbox layout with space-between, padding, and bottom border |
.page |
Bottom border and margin for page title headers |
.card |
Padding with bottom border for card headers |
data-sticky |
Pins header to top of viewport on scroll (see attribute page) |
.transparent |
Absolute positioning with transparent background for hero overlays |
.centered |
Centered text and auto margins for children |
.compact |
Reduced padding and smaller font size |
Accessibility
- The document's main header becomes a banner landmark (only when not nested)
- Include skip links at the start of the header to bypass navigation
- Use
<nav>witharia-labelto identify navigation regions - Sticky headers should not obscure content when users navigate with keyboard
- Ensure transparent headers maintain sufficient contrast with background
- Consider
prefers-reduced-motionfor sticky header animations