SiteHeader | Quail Pages

Style Guide

SiteHeader rendering surfaces.

Kind

Layout

Documentation

Root

qp-site-header

Site header root.

Children

qp-site-header__inner

Site header content region.

qp-site-header__section

Section rendered within the site header.

Structural HTML Example

HTML

<header class="qp-site-header" data-qp-header> <div class="qp-site-header__inner"> <section id="site-header" class="qp-section qp-site-header__section"> <header class="qp-section__header"> <h2 class="qp-section__title qp-sr-only">...</h2> </header> <div class="qp-section__body"> ... </div> </section> </div> </header>

Canonical class structure. Not renderer output.