# CTA band

> The navy, centred closing band of a page: it names the product and offers one action.

- Block class: `.hs-cta-band`
- CSS: `components/cta-band.css` (also inside https://brand.honorsociety.org/brand.css)
- JS: none
- Status: decided
- Decision record: https://brand.honorsociety.org/decisions/components-round-2a.html
- Variants: CTA band
- HTML page: https://brand.honorsociety.org/components/cta-band/

## What it is

The closing band of a page. Navy, centred, h2 with no rule: the one gold button is the accent. At most one text link, then an optional fine-print note.

## When to use

- The last band of a page, to name the product and offer one action: join, or apply for an award.
- The closing band of a utility page, after the answer and the cautions.

## When not to use

- The opening band: use the [Hero](/components/hero/) or the [Page head](/components/page-head/).
- Legal and participation terms: put them in a [Disclosure](/components/disclosure/) band before the CTA band.
- A note between content bands: use a [Callout](/components/callout/).

## Rules

- Compose it as `class="hs-band hs-band--navy hs-cta-band"` with a `data-section` slug. Wrap the content in `.hs-container.hs-cta-band__inner`.
- Keep this order: the eyebrow, `.hs-heading--h2` with no `--rule`, `.hs-lead`, `.hs-actions.hs-cta-band__actions`, then an optional `.hs-cta-band__note`.
- Put one gold `.hs-button` and at most one `.hs-link` in the action row. Give both the PostHog attributes, with the band’s slug as `data-ph-capture-attribute-cta-loc`.
- Keep the ground navy and the content centred.
- Name the product in the h2. It wraps at 24ch.
- Use the note for fine print only, such as “No purchase or membership payment is required to apply or win.”

## Accessibility

- The heading is an h2: the band never holds the page’s H1.
- The heading is white. The body text and the note are white 86%: 6.4:1 at the gradient’s lightest corner.
- The gradient sits over flat navy, so the text keeps its contrast where a client strips gradients.
- Below 576px the button is full width. From 576px the button and the link sit centred in one row.

## Variants

### CTA band

Names the product and offers one action.

```html
<section class="hs-band hs-band--navy hs-cta-band" data-section="apply">
  <div class="hs-container hs-cta-band__inner">
    <p class="hs-eyebrow">Ready to apply?</p>
    <h2 class="hs-heading hs-heading--h2">Study Abroad Scholarship</h2>
    <p class="hs-lead">Review the requirements, prepare your materials, and share the goals you are working toward.</p>
    <div class="hs-actions hs-cta-band__actions">
      <a class="hs-button" href="/study-abroad-scholarship-0" data-ph-capture-attribute-cta="apply" data-ph-capture-attribute-cta-loc="apply">Apply now</a>
      <a class="hs-link" href="https://support.honorsociety.org/hc/en-us" data-ph-capture-attribute-cta="help-center" data-ph-capture-attribute-cta-loc="apply">Visit the Help Center</a>
    </div>
    <p class="hs-cta-band__note">No purchase or membership payment is required to apply or win.</p>
  </div>
</section>
```