The page header holds the page breadcrumbs, title, subtitle, hero image, and sometimes a carousel.
Below is an example of how the .page-header element is employed in CGU Core templates. It is a direct child of the #page container and is not located inside any containing elements; it spans the width of the browser.
For a live example view the page header in the source of this page or the Basic Page Template.
<div class="u-bg-lightest-gray u-pad">
<a href="#" class="cgu-logo--large"></a>
</div>
<!-- ^^^ a faux site masthead -->
<header class="page-header">
<div class="breadcrumbs breadcrumbs--white">
<div class="u-container">
<span><a href="#" class="breadcrumbs__link">Home</a></span> ›
<span><a href="#" class="breadcrumbs__link">Parent Page</a></span> ›
<span>Current Page</span>
</div>
</div>
<!--
Since .page-header spans the width of the browser,
we wrap the inner contents in .u-container to limit
them to the width of the page.
-->
<div class="u-container">
<h1 class="page-title u-color-white">Page Title</h1>
<!-- An <h2> must follow an <h1> for accessibility, but we can style it with the .h3 class -->
<h2 class="page-subtitle u-color-white h3">Page Subtitle</h2>
</div>
</header>
<section class="page-section">
<div class="u-container">
<p>page content...</p>
</div>
</section>