Skip to content
Honor Society®Brand system

v0.6.4

Page structure

Hero

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

Block
.hs-hero
CSS
components/hero.css (in /brand.css)
JS
None
Status
Decided
Decided in
Components round 1
Markdown
/components/hero.md

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

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.

Full-width preview: the snippet sets its own ground

Honor Society® is where achievement becomes opportunity.

Join free to build your recognition profile and access scholarship opportunities, member benefits, mentorship, career resources and official graduation regalia. Professional Track™ is available when you want additional tools and benefits.

Start Free Membership Member sign in 
<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>