Usage

An h1 title on the left, and the last div as a button group on the right. On narrow screens the buttons wrap to a new line.

<header class="page-header">
  <h1>Orders</h1>
  <div>
    <a href="#" class="btn">Export</a>
    <a href="#" class="btn" data-variant="primary">New order</a>
  </div>
</header>

Title only

<header class="page-header">
  <h1>Overview</h1>
</header>

With a breadcrumb above the title

A direct-child nav.breadcrumb gets its own full-width row.

<header class="page-header">
  <nav class="breadcrumb" aria-label="Breadcrumb">
    <ol>
      <li><a href="#">Dashboard</a></li>
      <li><span aria-current="page">Products</span></li>
    </ol>
  </nav>
  <h1>Products</h1>
  <div>
    <a href="#" class="btn" data-variant="primary">New product</a>
  </div>
</header>

With a back button

For a page one level below a list. A direct-child .btn sits before the title. Give it an aria-label that says where it goes back to.

Crew tee

View

<header class="page-header">
  <nav class="breadcrumb" aria-label="Breadcrumb">
    <ol>
      <li><a href="#">Dashboard</a></li>
      <li><a href="#">Products</a></li>
      <li><span aria-current="page">Crew tee</span></li>
    </ol>
  </nav>
  <a href="#" class="btn" data-size="icon" aria-label="Back to products"><i class="icon icon-arrow-left" aria-hidden="true"></i></a>
  <h1>Crew tee</h1>
  <div>
    <a href="#" class="btn" data-variant="ghost">View</a>
    <button type="button" class="btn" popovertarget="ph-more">
      More actions
      <i class="icon icon-chevron-down" aria-hidden="true"></i>
    </button>
    <div class="dropdown" id="ph-more" popover>
      <button type="button" popovertarget="ph-more" popovertargetaction="hide">View revisions</button>
      <hr />
      <button type="button" data-variant="danger" popovertarget="ph-more" popovertargetaction="hide">Delete</button>
    </div>
  </div>
</header>

Badges inside the title, and a line under it

Put .badge elements right inside the h1. Use an hgroup when a p goes under the title.

Order #110963 Open Partially fulfilled Paid

Emma Wilson • emma.wilson@example.com • (555) 234-5678

Refund Edit

<header class="page-header">
  <nav class="breadcrumb" aria-label="Breadcrumb">
    <ol>
      <li><a href="#">Dashboard</a></li>
      <li><a href="#">Orders</a></li>
      <li><span aria-current="page">#110963</span></li>
    </ol>
  </nav>
  <a href="#" class="btn" data-size="icon" aria-label="Back to orders"><i class="icon icon-arrow-left" aria-hidden="true"></i></a>
  <hgroup>
    <h1>
      Order #110963
      <span class="badge" data-variant="warning">Open</span>
      <span class="badge">Partially fulfilled</span>
      <span class="badge" data-variant="ok">Paid</span>
    </h1>
    <p><a href="#">Emma Wilson</a> &bull; emma.wilson@example.com &bull; (555) 234-5678</p>
  </hgroup>
  <div>
    <a href="#" class="btn" data-variant="ghost">Refund</a>
    <a href="#" class="btn">Edit</a>
  </div>
</header>

Title block in a div

The older pattern these docs pages use: the first div holds the breadcrumb, title and description. The last div holds the buttons.

<header class="page-header">
  <div>
    <h1>Crew tee</h1>
    <p>SKU TS-001, 128 in stock</p>
  </div>
  <div>
    <button type="button" class="btn">Duplicate</button>
    <button type="button" class="btn" data-variant="primary">Save</button>
  </div>
</header>

Attributes

Attribute / element	Values	Description
`.page-header`	`header`	Wrapping flex row, centered vertically
`> nav`	`nav.breadcrumb`	Breadcrumb on the top row, full width
`> .btn`		Back button before the title. Does not grow or shrink (use `data-size="icon"` and `aria-label`)
`> h1`		Page title. Fills the space; a `.badge` inside follows the title
`> hgroup`		An `h1` title with a gray `p` under it
`> div:first-child`		Older title block: breadcrumb, h1 and p stacked
`> div:last-child`		Action buttons on the right (unless it is the first child or the title block after a nav)
`p`		Gray secondary text