Why?

Give a clear introduction to a page to explain the content on a page.

Usage

Use underneath the breadcrumb inside a container and above the main content. Use a clear, short title and a concise intro to the contents of the page.

Variants

Default

<div class="page-header">
    <h1 class="page-header__heading">
        Page title
    </h1>
    <p class="page-header__lead">
        Use a concise explanation of what the page is about
    </p>
</div>

With metadata

<div class="page-header">
    <h1 class="page-header__heading">
        Cerliponase alfa for treating neuronal ceroid lipofuscinosis type 2
    </h1>
    <ul class="page-header__metadata" aria-label="Product metadata">
        <li>Highly specialised technologies guidance</li>
        <li>HST12</li>
        <li>Last updated: 29 October 2019</li>
        <li>Last updated: 29 October 201</li>
    </ul>
    <p class="page-header__cta">
        <button>Find out more now</button>
    </p>
</div>
<div class="page-header">
    <h1 class="page-header__heading">
        Page title
    </h1>
    <p class="page-header__lead">
        Use a concise explanation of what the page is about
    </p>
    <p class="page-header__cta">
        <a href="#">A link</a>
    </p>
</div>

With call-to-action button

Use a [call-to-action button]({{ site.baseurl }}{% link foundations/buttons.md %}#call-to-action-button) within a page header when there's a main action for the page.

<div class="page-header">
    <h1 class="page-header__heading">
        Page title
    </h1>
    <p class="page-header__lead">
        Use a concise explanation of what the page is about
    </p>
    <p class="page-header__cta">
        <a href="#" class="btn btn--cta">A call to action</a>
    </p>
</div>