Call-to-action banner

How to use it

Use as a full-width band near the end of a page, after people have read enough to decide. Do not put two competing actions in it (use the hero section for a primary and secondary pair) or use it for system messages (use the alert). Change the heading, the sentence and the link to your real offer and destination.

Accessibility

A <section> labelled by its heading with exactly one link, so there is a single, unambiguous next step for keyboard and screen-reader users alike. The link shows a 2px white focus-visible outline that stays visible on the dark band. White heading text on #1e3a8a is 10.36:1, the supporting text #dbeafe on #1e3a8a 8.49:1, and the link #1e3a8a on white (#dbeafe hovered) 10.36:1 (8.49:1).

Source (copy-ready)

Copy code

<section class="dcl-cta" aria-labelledby="dcl-cta-title">
  <div class="dcl-cta__copy">
    <h2 id="dcl-cta-title" class="dcl-cta__title">Ready to plan next week in half the time?</h2>
    <p class="dcl-cta__text">Set up your first board in under five minutes. No card needed for the 14-day trial.</p>
  </div>
  <a href="../index.html" class="dcl-cta__action">Start your free trial</a>
</section>
<style>
.dcl-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.25rem 2rem; padding: 2rem 1.5rem; border-radius: 0.75rem; font: inherit; color: #ffffff; background-color: #1e3a8a; }
.dcl-cta__copy { flex: 1 1 18rem; min-width: 0; }
.dcl-cta__title { margin: 0 0 0.4rem; font-size: 1.5rem; color: #ffffff; background-color: #1e3a8a; }
.dcl-cta__text { margin: 0; color: #dbeafe; background-color: #1e3a8a; }
.dcl-cta__action { flex: none; padding: 0.75rem 1.4rem; border-radius: 6px; font-weight: 700; text-decoration: none; color: #1e3a8a; background-color: #ffffff; }
.dcl-cta__action:hover { color: #1e3a8a; background-color: #dbeafe; }
.dcl-cta__action:focus-visible { outline: 2px solid #ffffff; outline-offset: 3px; }
</style>