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
Example
Page title
Use a concise explanation of what the page is about
Source
<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 link
Example
Source
<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 within a page header when there’s a main action for the page.
Example
Source
<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>