Page Header

Open in Figma View all pill renders 
<div class="page-header">
    <div class="page-header__content gap-m">
        <div class="page-header__title gap-xs">
            <h1 class="page-header__heading">
                Heading
            </h1>
            <h2 class="page-header__sub-heading">
                Sub heading
            </h2>
        </div>
        <p class="page-header__text">This is some placeholder copy</p>
    </div>
</div>

Variations and modifiers

Page Header with icon

<div class="page-header">
    <span class="material-symbols-rounded" aria-hidden="true">beach_access</span>
    <div class="page-header__content gap-m">
        <div class="page-header__title gap-xs">
            <h1 class="page-header__heading">
                Heading
            </h1>
            <h2 class="page-header__sub-heading">
                Sub heading
            </h2>
        </div>
        <p class="page-header__text">This is some placeholder copy</p>
    </div>
</div>

Page Header - Centered

<div class="page-header page-header--center">
    <div class="page-header__content gap-m">
        <div class="page-header__title gap-xs">
            <h1 class="page-header__heading">
                Heading
            </h1>
            <h2 class="page-header__sub-heading">
                Sub heading
            </h2>
        </div>
        <p class="page-header__text">This is some placeholder copy</p>
    </div>
</div>