Headers

What is a page header?

A page header is the title area at the top of an inner page, below the navigation. Unlike a hero section on a homepage, it is usually more compact: a page title, an optional short description, breadcrumbs, and sometimes a background image, actions or metadata such as an article date. Page headers are used on blog posts, service pages, documentation pages, category pages and admin screens to tell users where they are.

When to use a page header

Use one on every inner page that needs a clear title. Keep it short so the actual content appears quickly, particularly on mobile devices where vertical space is limited.

Best practices

• Each page should have exactly one <h1>, and the page header is the natural place for it.
• Place breadcrumbs inside a <nav aria-label="Breadcrumb"> and mark the current page with aria-current="page".
• When using a background image, add a dark or light overlay so text keeps sufficient contrast, and do not put important text inside the image itself.
• Keep the header height moderate; avoid full-screen headers on content pages.
• Align header content with the grid of the page below so the layout feels consistent.
• Use responsive font sizes, for example with clamp(), so long titles wrap gracefully.
• Action buttons in a header should stack or wrap on small screens.

Bootstrap, Tailwind CSS and pure CSS versions

The header examples are available in Bootstrap 6, Bootstrap 5, Tailwind CSS and pure CSS. Bootstrap versions use the container, typography and breadcrumb components, with Bootstrap 6 versions using theme-* colour roles for backgrounds and text. Tailwind CSS versions are made with utilities, and pure CSS versions rely on semantic markup and custom properties. Pick your framework with the filter, view each title banner in the live preview, then copy the code from the tabs or download it. Replace the title, description and breadcrumbs for each page of your site.