--- title: "CTA band design: anatomy, variants and examples | Kombai" description: "A CTA band is a full-width strip near the end of a page with one headline and one action, so people who read this far know what to do next." canonical_url: https://kombai.com/glossary/cta-band/ author: "The Kombai Team" --- # CTA band A CTA band is a full-width strip near the end of a page with one headline and one action, so people who read this far know what to do next. - Also called: call to action section - Platforms: Web, Mobile - In the Kombai gallery: [167 web designs](https://kombai.com/gallery/web/cta-band/), [38 mobile designs](https://kombai.com/gallery/mobile/cta-band/) - [Solvern](https://kombai.com/gallery/inspirations/cta-band-web-6/) (Web) - [Fluxline CTA](https://kombai.com/gallery/inspirations/cta-band-ios-10/) (Mobile) - [Ebbline](https://kombai.com/gallery/inspirations/cta-band-web-28/) (Web) ## What is a CTA band? A CTA band, short for call-to-action band, is a strip that asks for the action one more time after people have read the page. It has a short headline, a line that removes a doubt and one main button, often with a quieter second option. It usually sits just above the footer. - One headline and one primary action, with nothing else competing for attention. - A contrasting background sets it apart from the sections around it. ## When to use cta band - **End of a long page.** People who scrolled to the bottom are ready and need one clear next step. - **After proof.** Right after testimonials, stats or an FAQ has answered the last doubts. - **Between big sections.** A mid-page band on very long pages, so the action is never far away. ## When not to use one - **Short pages.** If the hero button is still on screen, a second ask is noise. - **Several different asks.** Pick one. Three buttons in a band make people choose none. - **Inside a task.** Mid-checkout or in settings, a promo band gets in the way. ## Anatomy 1. **Headline**: The outcome, in a few words 2. **Supporting line**: Removes the last doubt 3. **Primary action**: One button, or a field and a button 4. **Secondary action**: A quieter alternative 5. **Background**: Sets the band apart 6. **States**: Default, focus, error, success ## Variants We sorted every CTA band design in the Kombai gallery and found six patterns. ### 1. Centered band The default. A headline, one line and one or two buttons, centered on a tinted or gradient strip. - [Freshet](https://kombai.com/gallery/inspirations/cta-band-web-30/) (Web) - [Balancewheel](https://kombai.com/gallery/inspirations/cta-band-web-42/) (Web) - [Kilnfield](https://kombai.com/gallery/inspirations/cta-band-web-77/) (Web) ### 2. Split with a product shot Copy and the button on one side, a screenshot or product panel on the other, often bleeding off the edge. - [Skepwell](https://kombai.com/gallery/inspirations/cta-band-web-104/) (Web) - [Marverwell for business](https://kombai.com/gallery/inspirations/cta-band-web-26/) (Web) - [Scarpwell](https://kombai.com/gallery/inspirations/cta-band-web-54/) (Web) ### 3. Full-bleed photo A photograph fills the band with the headline and a light button on top, behind a dark scrim. - [Frondwell](https://kombai.com/gallery/inspirations/cta-band-web-93/) (Web) - [Kettlescar Coffee](https://kombai.com/gallery/inspirations/cta-band-web-60/) (Web) - [Burinfield](https://kombai.com/gallery/inspirations/cta-band-web-46/) (Web) ### 4. Email capture An email field and a button replace the plain button, for trials, waitlists and newsletters. - [Foredeck](https://kombai.com/gallery/inspirations/cta-band-web-74/) (Web) - [Drift](https://kombai.com/gallery/inspirations/cta-band-ios-6/) (Mobile) - [Patternpost](https://kombai.com/gallery/inspirations/cta-band-web-11/) (Web) ### 5. Two paths Two cards side by side, one per audience or action, like book a demo or call us. - [Waypoint CTA](https://kombai.com/gallery/inspirations/cta-band-web-12/) (Web) - [Aretemark](https://kombai.com/gallery/inspirations/cta-band-web-45/) (Web) - [Kestrix](https://kombai.com/gallery/inspirations/cta-band-web-66/) (Web) ### 6. Closing mobile screen On phones the band becomes a whole screen, with the buttons pinned to the bottom. - [Ordo](https://kombai.com/gallery/inspirations/cta-band-ios-2/) (Mobile) - [Inkforge](https://kombai.com/gallery/inspirations/cta-band-ios-8/) (Mobile) - [Lumo CTA](https://kombai.com/gallery/inspirations/cta-band-ios-5/) (Mobile) ## Where cta bands show up ### Above the footer The last thing on a landing page, sitting right on top of the footer links. - [Hurdleway](https://kombai.com/gallery/inspirations/cta-band-web-157/) (Web) - [Moulinwork](https://kombai.com/gallery/inspirations/cta-band-web-118/) (Web) - [Cupelbrook](https://kombai.com/gallery/inspirations/cta-band-web-162/) (Web) ### Careers pages A short line about the team and one button to the open roles. - [Cullet](https://kombai.com/gallery/inspirations/cta-band-web-78/) (Web) - [Westmark](https://kombai.com/gallery/inspirations/cta-band-ios-22/) (Mobile) - [Shrikewing](https://kombai.com/gallery/inspirations/cta-band-web-65/) (Web) ### Partner programs An invitation to apply, often with the commission or discount in the headline. - [Temperline Guild](https://kombai.com/gallery/inspirations/cta-band-web-34/) (Web) - [Thornbury](https://kombai.com/gallery/inspirations/cta-band-ios-26/) (Mobile) - [Bourdonwell](https://kombai.com/gallery/inspirations/cta-band-web-111/) (Web) ### Trials and offers A free trial, a discount or a signup bonus, stated plainly next to the button. - [Fernway CTA](https://kombai.com/gallery/inspirations/cta-band-ios-4/) (Mobile) - [Corbelwright](https://kombai.com/gallery/inspirations/cta-band-web-120/) (Web) - [Sablefox](https://kombai.com/gallery/inspirations/cta-band-ios-13/) (Mobile) ## CTA band vs similar components | | [CTA band](https://kombai.com/glossary/cta-band/) | [Hero section](https://kombai.com/glossary/hero-section/) | [Newsletter signup](https://kombai.com/glossary/newsletter-signup/) | [Announcement banner](https://kombai.com/glossary/announcement-banner/) | |---|---|---|---|---| | Sits | Near the end | At the top | Anywhere, often the footer | A thin strip at the very top | | Asks for | The main action, again | The main action, first | An email address | A click on one piece of news | | Best for | Closing a long page | Opening the page | Growing a mailing list | Releases, sales and events | ## Build notes - Use a
with a heading, so the band shows up in the page outline. - Name the button by its outcome, like "Start free trial", not "Submit". - Keep 4.5:1 contrast for the copy and button text, even over gradients and photos. - Give an email field a label, type="email" and autocomplete="email". - Describe errors in text next to the field and link them with aria-describedby. - Repeat the hero's main action. A new ask at the bottom splits attention. ## FAQ ### What is the difference between a CTA band and a hero section? A hero opens the page and makes the pitch. A CTA band closes it and repeats the ask for people who read everything. They usually share the same primary action, and the band is shorter. ### How many buttons should a CTA band have? One primary button. A second, quieter option works when there are two real paths, like Start free and Talk to sales. More than two turns the band into a menu. ### What should a CTA band headline say? The outcome people get, not the product name. "Close the month in an afternoon" beats "Try our app today". The line under it should answer the last objection: price, a card requirement or setup time. ### Should a CTA band repeat on every page? On marketing pages, yes, usually as the last block above the footer. Leave it out of docs, help articles and anywhere people are in the middle of a task. ## Related terms - [Hero section](https://kombai.com/glossary/hero-section/) - [Newsletter signup](https://kombai.com/glossary/newsletter-signup/) - [Footer](https://kombai.com/glossary/footer/) - [Button](https://kombai.com/glossary/button/) ## References - [MDN: The section element](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/section) - [MDN: The autocomplete attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes/autocomplete) - [WCAG 2.2: Understanding contrast (minimum)](https://www.w3.org/WAI/WCAG22/Understanding/contrast-minimum.html) - [WCAG 2.2: Understanding error identification](https://www.w3.org/WAI/WCAG22/Understanding/error-identification.html)