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 or the Page head.
• Legal and participation terms: put them in a Disclosure band before the CTA band.
• A note between content bands: use a 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.

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