Page head

The interior-page title band — breadcrumbs, page title and lede on the panel surface.

Public Works

Roads, water, snow and trash — the department that keeps the town running.

Show the markup

<div class="cc-page-head">
  <nav class="cc-breadcrumbs" aria-label="Breadcrumb">
    <ol>
      <li><a href="#">Home</a></li>
      <li><a href="#">Departments</a></li>
      <li aria-current="page">Public Works</li>
    </ol>
  </nav>
  <h1 class="cc-page-head__title">Public Works</h1>
  <p class="cc-page-head__lede">Roads, water, snow and trash — the department that keeps the town running.</p>
</div>

Dog Licenses

Renew or register through the Town Clerk.

Show the markup

<div class="cc-page-head cc-page-head--plain">
  <nav class="cc-breadcrumbs" aria-label="Breadcrumb">
    <ol>
      <li><a href="#">Home</a></li>
      <li aria-current="page">Dog Licenses</li>
    </ol>
  </nav>
  <h3 class="cc-page-head__title">Dog Licenses</h3>
  <p class="cc-page-head__lede">Renew or register through the Town Clerk.</p>
</div>

Accessibility

The band is full-bleed; content is capped at the container measure by contained padding.
The title is the page's single h1; the lede is a paragraph, not a heading.
Breadcrumbs come first in source order so the path is announced before the title. See Breadcrumbs.