Page header

Usage

Every Fleetline page opens with a page header: where you are (breadcrumbs), what this is (title + status), and what you can do (actions). It sits at the top of <main>, below the top nav.

• The title is the page's only <h1> and matches the last breadcrumb and the document <title>. (Demos below use h2 so this docs page keeps one h1.)
• Meta: status (dot + word), place, owner, last update as relative time with the exact time in datetime.
• One primary action. Two or three visible actions at most; the rest go into "More actions".
• Use tabs underneath only when the object has several sections with their own URLs.

Anatomy

1. Breadcrumbs (optional) — .page-header__breadcrumbs
2. Title — h1.page-header__title
3. Description (optional) — .page-header__description
4. Meta — ul.page-header__meta with .page-header__status[data-tone]
5. Actions — .page-header__actions: buttons + overflow menu button
6. Section tabs (optional) — nav.tabs.page-header__tabs

Examples

The overflow menu is live (js/menu.js). Narrow the window: actions wrap under the title (container query at 40rem).

<main id="main" tabindex="-1">
  <header class="page-header">
    <nav class="breadcrumbs page-header__breadcrumbs" aria-label="Breadcrumb">…</nav>
    <div class="page-header__main">
      <div class="page-header__heading">
        <h1 class="page-header__title">Van KX-219</h1>
        <ul class="page-header__meta">
          <li class="page-header__meta-item"><span class="page-header__status" data-tone="success">In service</span></li>
          <li class="page-header__meta-item">…North Yard depot</li>
          <li class="page-header__meta-item">…Updated <time datetime="2026-10-08T09:40">2 hours ago</time></li>
        </ul>
      </div>
      <div class="page-header__actions">
        <button type="button" class="btn btn--secondary">Print job sheet</button>
        <button type="button" class="btn btn--primary">New work order</button>
        <!-- overflow: icon-btn menu button, see menu.html -->
      </div>
    </div>
    <nav class="tabs tabs--underline page-header__tabs" aria-label="Van KX-219 sections">
      <ul class="tabs__list"><li><a class="tabs__tab" href="/vehicles/KX-219" aria-current="page">Overview</a></li>…</ul>
    </nav>
  </header>
  …
</main>

API

Do and don't

Accessibility

• Inside <main>, <header> has no landmark role — the page's banner is the top nav.
• Status is a word plus a colored dot, never the dot alone (principle: status is never color alone).
• <time datetime> carries the absolute time; show it in a tooltip on hover/focus where it matters.
• Section tabs that change the URL are links with aria-current="page".

Tokens