# Band and container

> A full-width section with one ground and one idea; a page is a stack of bands.

- Block class: `.hs-band`
- CSS: `components/band.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: White, Soft, Navy (treatment B), Plate, Bleed, Anchor nav in a compact band
- HTML page: https://brand.honorsociety.org/components/band/

## 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](/components/card/) or a [Callout](/components/callout/).
- The opening band: compose the [Page head](/components/page-head/), the [Hero](/components/hero/) or the [Award hero](/components/award-hero/) on a band.
- The closing band: use the [CTA band](/components/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.

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

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

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

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

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

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