Page Hero

The page hero establishes context and hierarchy at the top of content pages, combining breadcrumb navigation with a clear page title and optional description.

When to use

Use the page hero pattern on all interior pages to help users understand where they are in the site structure and what the page contains. This is especially important for:

• Documentation pages
• Service landing pages
• Content pages within a section hierarchy
• Any page more than one level deep in the navigation

Structure

The page hero consists of three main elements:

1. Breadcrumbs - Shows the path from home to the current page
2. Page title - The main heading (h1) for the page
3. Description - Optional lead text summarising the page content

Example

Design Specifications

Breadcrumb Behaviour

• Always start with "Home" linking to the site root
• Each path segment is a clickable link except the current page
• The current page appears in bold without a link
• Use aria-current="page" on the current page item
• Separator is hidden from screen readers with aria-hidden="true"

Accessibility

• Breadcrumb navigation wrapped in <nav> with aria-label="Breadcrumb"
• Title should be the only <h1> on the page
• Links have visible hover and focus states
• Separators are decorative and hidden from assistive technology

HTML Structure

<header class="page-hero">
  <nav aria-label="Breadcrumb" class="breadcrumbs">
    <ol class="breadcrumb-list">
      <li class="breadcrumb-item">
        <a href="/" class="breadcrumb-link">Home</a>
        <span class="breadcrumb-separator" aria-hidden="true">/</span>
      </li>
      <li class="breadcrumb-item">
        <a href="/components" class="breadcrumb-link">Components</a>
        <span class="breadcrumb-separator" aria-hidden="true">/</span>
      </li>
      <li class="breadcrumb-item">
        <span class="breadcrumb-current" aria-current="page">Buttons</span>
      </li>
    </ol>
  </nav>
  <h1 class="page-title">Buttons</h1>
  <p class="page-description">
    Buttons are used for actions and navigation.
  </p>
</header>

CSS Classes

.page-hero {
  margin-bottom: var(--space-8);
  padding-bottom: var(--space-6);
  border-bottom: 1px solid var(--border-default);
}

.breadcrumbs {
  margin-bottom: var(--space-4);
}

.breadcrumb-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: var(--text-sm);
}

.breadcrumb-item {
  display: flex;
  align-items: center;
}

.breadcrumb-link {
  color: var(--text-secondary);
  text-decoration: none;
}

.breadcrumb-link:hover {
  color: var(--color-primary);
  text-decoration: underline;
}

.breadcrumb-separator {
  margin: 0 var(--space-2);
  color: var(--text-tertiary);
}

.breadcrumb-current {
  color: var(--text-primary);
  font-weight: var(--weight-medium);
}

.page-title {
  font-size: var(--heading-xl);
  font-weight: var(--weight-bold);
  margin: 0 0 var(--space-3) 0;
  color: var(--text-primary);
}

.page-description {
  font-size: var(--text-lg);
  color: var(--text-secondary);
  margin: 0;
  max-width: 65ch;
}