Band and container

What it is

A page is a stack of bands. A band is a full-width <section> with one ground and one idea; .hs-container holds the content at Bootstrap widths. A change of ground is the only separator. Every band carries a data-section slug.

.hs-band--compact: 16px top and bottom, 24px from 48rem, for a band that holds one row (the anchor nav). Combine it with a ground modifier.

When to use

• Every section of every page, one idea per band.
• --soft to rotate with white. --navy for the hero, the closing CTA band and support bands. --plate for member identity, the certificate and credentials.
• --bleed for a band inside a narrower page column, such as Drupal #content.
• --compact for a band that holds one row: the anchor nav or a link row.

When not to use

• A border, rule or gold hairline between bands: change the ground instead.
• A light panel inside a band: use a Card or a Callout.
• The opening band: compose the Page head, the Hero or the Award hero on a band.
• The closing band: use the CTA band.

Rules

• Mark up each band as <section class="hs-band"> with a data-section slug that names the idea (hero, what-you-get). The slug is the analytics contract: a rename breaks history. The data-ph-capture-attribute-cta-loc of each route in the band repeats it.
• Put the content in .hs-container. It mirrors the Bootstrap .container widths, so every edge lines up with the header.
• Give a band at most one ground modifier. --compact and --bleed combine with it.
• Open the band with .hs-band__head: an optional eyebrow, one h2, an optional lead.
• Blocks after the band head (card grid, prose, callout, steps, link row) sit 24px apart (--hs-space-5) with no extra class. Do not add margins between them. A container that holds an h1/h2 or eyebrow directly (hero, page head, CTA band, stat) keeps its own spacing.
• Load band.css before page-head.css, hero.css and award-hero.css. They have the same specificity, so source order sets the padding.

Accessibility

• Each ground sets the --hs-ctx-* properties. Headings, eyebrows, links and cards read them, so they keep their contrast on every ground with no modifier.
• On navy, body text is white 86%: 6.4:1 at the gradient’s lightest corner.
• --navy paints the gradient over flat navy. Where a client strips gradients (email, some editors), the text still sits on navy.
• base.css gives every [id] a scroll-margin-top of the header height plus 16px, so an anchor target clears the site header.

Variants

White

The default ground.

<section class="hs-band" data-section="what-you-get">
  <div class="hs-container">
    <div class="hs-band__head">
      <p class="hs-eyebrow">Free to join</p>
      <h2 class="hs-heading hs-heading--h2 hs-heading--rule">Turn your achievement into opportunity.</h2>
    </div>
    <p>Put your achievements, goals and potential in one place.</p>
  </div>
</section>

Soft

#f7f8fb. Rotates with white.

<section class="hs-band hs-band--soft" data-section="why-join">
  <div class="hs-container">
    <div class="hs-band__head">
      <p class="hs-eyebrow">Why members join</p>
      <h2 class="hs-heading hs-heading--h2 hs-heading--rule">Honor Your Ambition&trade;</h2>
    </div>
    <p>Merit, service and study abroad awards, plus a free directory of more than 1,000 partner scholarships.</p>
  </div>
</section>

Navy (treatment B)

Gradient over flat navy (--hs-ground-navy). Sets white headings, gold eyebrow and rule, 86% white text for everything inside.

<section class="hs-band hs-band--navy" data-section="support">
  <div class="hs-container">
    <div class="hs-band__head">
      <p class="hs-eyebrow">Beyond recognition</p>
      <h2 class="hs-heading hs-heading--h2 hs-heading--rule">Support that comes with membership.</h2>
      <p class="hs-lead">Success is built on focus, balance and resilience. Honor Society&reg; encourages a balanced approach to growth, so you stay on track toward your goals.</p>
    </div>
  </div>
</section>

Plate

Recognition grounds only: member identity, certificate, credentials. Gold-ink eyebrow, honor-gold rule.

<section class="hs-band hs-band--plate" data-section="certificate">
  <div class="hs-container">
    <div class="hs-band__head">
      <p class="hs-eyebrow">Member recognition</p>
      <h2 class="hs-heading hs-heading--h2 hs-heading--rule">Display your membership.</h2>
      <p class="hs-lead">Display your membership with an official certificate, then choose a diploma-quality frame or engraved keepsake to showcase it.</p>
    </div>
  </div>
</section>

Bleed

For a band inside a narrower page column (Drupal #content): the ground spans the viewport, the content keeps the column edges. Here the frame clips it.

<div class="hs-container">
  <section class="hs-band hs-band--soft hs-band--bleed" data-section="faq-help">
    <h2 class="hs-heading hs-heading--h2 hs-heading--rule">We&rsquo;re always here to help</h2>
    <p class="hs-lead">Member Services answers questions about membership, benefits, billing and your account.</p>
  </section>
</div>

Anchor nav in a compact band

Under the award hero, .hs-award-hero + .hs-band still pads back the card overhang.

<section class="hs-band hs-band--compact" data-section="on-this-page">
  <div class="hs-container">
    <nav class="hs-anchor-nav" aria-labelledby="on-this-page-compact">
      <p class="hs-anchor-nav__label" id="on-this-page-compact">On this page</p>
      <ul class="hs-anchor-nav__list">
        <li><a class="hs-anchor-nav__link" href="#requirements">Eligibility and materials</a></li>
        <li><a class="hs-anchor-nav__link" href="#process">How to apply</a></li>
        <li><a class="hs-anchor-nav__link" href="#recipients">Recipient stories</a></li>
        <li><a class="hs-anchor-nav__link" href="#faq">FAQs</a></li>
      </ul>
    </nav>
  </div>
</section>