# Hero

> The navy opening band of an acquisition page: thesis H1, lead, one gold button, one text link.

- Block class: `.hs-hero`
- CSS: `components/hero.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: Hero
- HTML page: https://brand.honorsociety.org/components/hero/

## What it is

The navy opening band of an acquisition page. Treatment B ground. The H1 is the thesis and has no rule: the gold button is the accent.

## When to use

- The opening band of the homepage or a landing page.
- A page whose one job is account creation, with `Start Free Membership` as the primary route.

## When not to use

- A conversion or utility page: use the [Page head](/components/page-head/).
- One award page: use the [Award hero](/components/award-hero/).
- The closing band: use the [CTA band](/components/cta-band/).
- A member page: use the [Plate](/components/plate/).

## Rules

- Compose it as `class="hs-band hs-band--navy hs-hero"` with `data-section="hero"`. Load `hero.css` after `band.css`.
- A page built from the body alone starts with this band. Copy the snippet whole. The hero has no breadcrumb: it opens the homepage or a landing page. It holds the page’s only `h1`; every other band opens with `h2`.
- Keep this order: the H1 (`.hs-heading--h1.hs-hero__title`, no `--rule`), `.hs-hero__lead`, then `.hs-actions.hs-hero__actions` with one gold `.hs-button` and at most one `.hs-link`.
- The H1 states the thesis and wraps at 22ch. On the homepage it is “Honor Society® is where achievement becomes opportunity.”
- Make `Start Free Membership` the primary route, never a paid tier. Show no prices and no tier names: Professional Track™ is the only membership name.
- Give each route the PostHog attributes, with `data-ph-capture-attribute-cta-loc="hero"`.
- Put the trust bar directly under the hero.

## Accessibility

- The H1 is the page’s main heading.
- The lead is white 86% on navy: 6.4:1 at the gradient’s lightest corner. The gold button label is 12.4:1.
- The gradient sits over flat navy, so the text keeps its contrast where a client strips gradients.
- It is CSS only, so it works without JavaScript.

## Variants

### Hero

Homepage copy.

```html
<section class="hs-band hs-band--navy hs-hero" data-section="hero">
  <div class="hs-container">
    <h1 class="hs-heading hs-heading--h1 hs-hero__title">Honor Society&reg; is where achievement becomes opportunity.</h1>
    <p class="hs-hero__lead">Join free to build your recognition profile and access scholarship opportunities, member benefits, mentorship, career resources and official graduation regalia. Professional Track&trade; is available when you want additional tools and benefits.</p>
    <div class="hs-actions hs-hero__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>
```