CTA band

CTA band

The band at the bottom of every page in these docs is a CTA band. It has a small label, a title, one line of text, one button and a text link back. Everything sits on the brand surface. The text uses the on-brand roles, the button is the on-brand primary button, and the link is the on-brand text link.

<section class="docs-next" aria-labelledby="demo-next-h">
  <div class="docs-next__text">
    <p class="docs-next__kicker type-label">Up next</p>
    <h2 class="docs-next__title type-h2" id="demo-next-h">Page title</h2>
    <p class="docs-next__desc type-lead">One short line about the page.</p>
  </div>
  <div class="docs-next__actions">
    <a class="button type-button button--primary button--on-brand button--icon-trailing" href="#">
      <span class="button__label">Continue to Page title</span>
      <!-- icon: arrow_forward -->
    </a>
    <p class="docs-next__back">
      <a class="link link--on-brand" href="#">
        <span class="link__text">Back to Previous page</span>
      </a>
    </p>
  </div>
</section>

Layout

From 1024px up, the text is on the left and the button and link are on the right, with the link under the button. Below 1024px everything stacks. The title uses the H2 style and the text uses the Lead style.

Size

The type sizes come from the Label, H2 and Lead styles, which already step at the same breakpoints.

What the design file adds

The design file describes the same band for the close of a case study. It also has a plain tone, a second button, and a show-or-hide choice for the label and the body text. These are in the design file only. The code on this site builds the next-page band shown above, and not the plain tone or the second button. In the design file, a case study gets one CTA, and the plain tone is used when the page already has a blue-band quote.

• Brand tone: a full-width band on the brand surface. The heading is white, not yellow.
• Plain tone: the page surface, with a 2px rule above the text and buttons, inside the band's padding.

Using the CTA band

Accessibility

• The band is a <section> named by its heading (aria-labelledby).
• The buttons and the link are real links, so they take the keyboard and show the on-brand focus ring.
• The on-brand text colors are checked against the brand surface at 4.5:1 in every mode when the site is built.

The HTML

<section class="docs-next" aria-labelledby="next-h">
  <div class="docs-next__text">
    <p class="docs-next__kicker type-label">Up next</p>
    <h2 class="docs-next__title type-h2" id="next-h">Page title</h2>
    <p class="docs-next__desc type-lead">One short line about the page.</p>
  </div>
  <div class="docs-next__actions">
    <a class="button type-button button--primary button--on-brand button--icon-trailing" href="/next/">…</a>
    <p class="docs-next__back"><a class="link link--on-brand" href="/previous/"><span class="link__text">Back to Previous page</span></a></p>
  </div>
</section>