# Page head

> The soft opening band of a conversion or utility page: eyebrow, ruled H1, lead, optional action row.

- Block class: `.hs-page-head`
- CSS: `components/page-head.css` (also inside https://brand.honorsociety.org/brand.css)
- JS: none
- Status: decided
- Decision record: https://brand.honorsociety.org/decisions/components-round-1.html
- Variants: With actions (Visitor), Without actions, With breadcrumb
- HTML page: https://brand.honorsociety.org/components/page-head/

## 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](/components/hero/).
- One award page: use the [Award hero](/components/award-hero/).
- A member page: open with the [Plate](/components/plate/).
- “On this page” links: put the [Anchor nav](/components/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](/components/breadcrumb/) or [Back link](/components/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](/components/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.

```html
<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.

```html
<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"`.

```html
<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>
```