Page header
Eyebrow and title at the start, actions at the end.
Examples
Page header
Northlight
Overview
Anatomy
.page-header | Row with the title block at the start and actions at the end, aligned to the bottom edge. Wraps when narrow. |
> div | Title block: an optional <h6> eyebrow, then the heading. |
> div > h6 | Optional eyebrow: project, section or parent page. Spaced off the title. |
> .cluster | Actions. A single button can sit there directly. |
Accessibility
- Use the heading level the page needs, usually
<h1>for the page title; the size follows the element, so pick level first. - The
<h6>eyebrow joins the heading outline above the title. If that reads badly, put the eyebrow in a<p class="eyebrow">instead.