What it is

The light opening band of every page except the homepage. Compose it on a soft band. Eyebrow, H1 with the gold rule, lead, then an optional action row. No image, no split, no trust strip.

When to use

• The opening band of a conversion or utility page: benefits, membership tiers, certificate and frames, FAQs.
• An article page, with the byline (.hs-page-head__byline) in place of the lead.
• A page head inside a Drupal page column, with hs-band--bleed added.

When not to use

• The homepage or a landing page: use the Hero.
• One award page: use the Award hero.
• A member page: open with the Plate.
• “On this page” links: put the Anchor nav in its own band under the page head.

Rules

• Compose it as class="hs-band hs-band--soft hs-page-head" with data-section="hero". Load page-head.css after band.css.
• A page built from the body alone starts with this band. Copy the snippet whole, with the breadcrumb when the page sits three or more steps deep. It holds the page’s only h1; every other band opens with h2.
• Keep this order: an optional Breadcrumb or Back link, the eyebrow, .hs-heading--h1.hs-heading--rule, .hs-lead.hs-page-head__lead, an optional .hs-actions.hs-page-head__actions.
• A catalog page (a directory, site search) puts one .hs-search.hs-search--large after the lead in place of the action row. Its button is the band's one gold button. The site header's Join button is chrome and does not count. See Search.
• Put nothing else in it: no image, no split, no trust strip, no free/paid note. The H1 and the lead take the full container width; an empty right side on desktop is intended.
• The action row holds one gold button and, for a Visitor, a Member sign in text link. Each route carries data-ph-capture-attribute-cta-loc="hero".
• The button follows the viewer state (Visitor, Free Member, Paid Member). A state with nothing to offer gets no action row.
• In Drupal the theme hook is hs_core_page_head; keep the hs-page-head class. When the page head carries the membership button, add the page to the membership banner’s suppression list.

Accessibility

• The H1 is the page’s main heading. The gold rule is an ::after and is not read.
• The eyebrow and the lead are slate on soft: 5.9:1.
• The button and the link use the shared focus ring.
• It is CSS only, so it works without JavaScript.

Variants

With actions (Visitor)

The button follows the viewer state; a state with nothing to offer gets no action row.

<section class="hs-band hs-band--soft hs-page-head" data-section="hero">
  <div class="hs-container">
    <p class="hs-eyebrow">Participation tiers</p>
    <h1 class="hs-heading hs-heading--h1 hs-heading--rule">Honor Society&reg; Membership Tiers</h1>
    <p class="hs-lead hs-page-head__lead">Eligible members join as Basic Members at no cost. Bronze, Silver, Gold, and Signature are optional paid tiers with added benefits, discounts, and priority services.</p>
    <div class="hs-actions hs-page-head__actions">
      <a class="hs-button" href="/join" data-ph-capture-attribute-cta="join" data-ph-capture-attribute-cta-loc="hero">Start Free Membership</a>
      <a class="hs-link" href="/user/login" data-ph-capture-attribute-cta="sign-in" data-ph-capture-attribute-cta-loc="hero">Member sign in</a>
    </div>
  </div>
</section>

Without actions

A member who already holds what the page offers.

<section class="hs-band hs-band--soft hs-page-head" data-section="hero">
  <div class="hs-container">
    <p class="hs-eyebrow">Member recognition</p>
    <h1 class="hs-heading hs-heading--h1 hs-heading--rule">Honor Society&reg; Certificate &amp; Frames</h1>
    <p class="hs-lead hs-page-head__lead">Display your membership with an official certificate, then choose a diploma-quality frame or engraved keepsake to showcase it.</p>
  </div>
</section>

With breadcrumb

A page three steps deep, built from the body alone. The breadcrumb comes first; its links carry the PostHog attributes with cta-loc="hero".

<section class="hs-band hs-band--soft hs-page-head" data-section="hero">
  <div class="hs-container">
    <nav class="hs-breadcrumb" aria-label="Breadcrumb">
      <ol class="hs-breadcrumb__list">
        <li class="hs-breadcrumb__item"><a class="hs-breadcrumb__link" href="/" data-ph-capture-attribute-cta="home" data-ph-capture-attribute-cta-loc="hero">Home</a></li>
        <li class="hs-breadcrumb__item"><a class="hs-breadcrumb__link" href="/scholarships" data-ph-capture-attribute-cta="scholarships" data-ph-capture-attribute-cta-loc="hero">Scholarships</a></li>
        <li class="hs-breadcrumb__item" aria-current="page">Scholarship Directory</li>
      </ol>
    </nav>
    <p class="hs-eyebrow">Honor Society&reg; scholarships</p>
    <h1 class="hs-heading hs-heading--h1 hs-heading--rule">Scholarship Directory</h1>
    <p class="hs-lead hs-page-head__lead">Scholarships from other providers, each with its own eligibility, deadline and application.</p>
  </div>
</section>