PageHeader

The title, description and primary actions for a page.

When to use it

• The top of any page.

When not to use it

• Section headings within a page. Use a plain heading.

Examples

Each example is a conformance case: every emitter — React, and each framework adapter — is checked against exactly this markup.

basic

<header class="gov-page-header">
  <div class="gov-page-header__content">
    <h1 class="gov-page-header__title">Employees</h1>
  </div>
</header>

{
  "title": "Employees"
}

with-description

<header class="gov-page-header">
  <div class="gov-page-header__content">
    <h1 class="gov-page-header__title">Employees</h1>
    <p class="gov-page-header__description">Manage your team members and their roles.</p>
  </div>
</header>

{
  "title": "Employees",
  "description": "Manage your team members and their roles."
}

with-actions

<header class="gov-page-header">
  <div class="gov-page-header__content">
    <h1 class="gov-page-header__title">Employees</h1>
    <p class="gov-page-header__description">Manage your team members and their roles.</p>
  </div>
  <div class="gov-page-header__actions">
    <button class="gov-button gov-button--secondary gov-button--md" type="button">Export</button>
    <button class="gov-button gov-button--primary gov-button--md" type="button">Add employee</button>
  </div>
</header>

{
  "title": "Employees",
  "description": "Manage your team members and their roles.",
  "children": [
    {
      "component": "button",
      "props": {
        "variant": "secondary",
        "children": "Export"
      }
    },
    {
      "component": "button",
      "props": {
        "children": "Add employee"
      }
    }
  ]
}

Accessibility

• Renders the page's single h1 by default. Two h1 elements, or a skip from h1 to h3, breaks the outline screen reader users navigate by.
• Actions sit outside the heading, so the heading text is exactly the page name.

Class names

View the manifest for this component: packages/manifest/components/page-header.json