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.

Page Title

A brief description of the page content.

.site

Full-width site header with flexbox layout.

Brand

.page

Page header with bottom border and spacing.

Documentation

Learn how to use Vanilla Breeze in your projects.

Page content begins here...

.card

Card header with bottom border.

Card Title

Card content goes here...

.sticky

Sticky header that remains at the top during scroll.

Sticky Header

Scroll this container to see the sticky header in action.

Content line 1

Content line 2

Content line 3

Content line 4

Content line 5

.transparent

Transparent header for hero overlay positioning.

Brand

Hero Content

Header overlays this hero section

.centered

Centered header for landing pages.

Welcome to Our Site

Building the future of web development, one component at a time.

.compact

Compact header with reduced padding and smaller text.

Brand

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
.sticky Fixed to top with z-index and background
.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> with aria-label to 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-motion for sticky header animations

Related Elements

  • <nav> - Primary navigation typically lives in site headers
  • <hgroup> - For grouping heading with subtitle in headers
  • <footer> - Complementary element for closing content
  • <article> - Header provides article metadata
  • <section> - Header introduces section content