PageHeader
PageHeader
Contained page heading with an explicit full-bleed hero presentation.
Root
qp-page-header
Page-level heading aligned to the standard content grid.
Children
qp-page-header__content
PageHeader text content layer.
qp-page-header__media
Hero media region.
qp-page-header__panel
Page heading text panel.
qp-page-header__subtitle
Supporting page heading text.
qp-page-header__title
Visible page heading.
Modifiers
qp-page-header--hero
Selects the full-bleed PageHeader media presentation while retaining an independently constrained content panel.
Structural HTML Example
HTML
<section class="qp-page-header qp-page-header--hero">
<div class="qp-page-header__media">...</div>
<div class="qp-page-header__content">
<div class="qp-page-header__panel">
<h1 class="qp-page-header__title">...</h1>
<p class="qp-page-header__subtitle">...</p>
</div>
</div>
</section>
Canonical class structure. Not renderer output.