Skip to content

Call to Action

Sections that prompt users to take the next step.

2 component(s)

Split CTA with Email Capture – Bootstrap 5 call to action preview

Split CTA with Email Capture

Bootstrap 5 split call-to-action with newsletter pitch on the left and a validated email signup form with consent checkbox on the right.

Bootstrap 5 Call to Action
Call to Action Banner – Tailwind CSS call to action preview

Call to Action Banner

Bold full-width Tailwind CSS call-to-action band with a gradient background, two buttons and reassurance points.

Tailwind CSS Call to Action

What is a call to action section?

A call to action (CTA) section is a focused block that asks the visitor to do one specific thing: start a trial, book a demo, download an app or get in touch. It typically contains a short, direct headline, one supporting sentence and one or two buttons. CTA sections appear at the end of landing pages, between content blocks, at the bottom of blog posts and just above the footer.

When to use a CTA section

Add one wherever a visitor has just received enough information to decide. On a long page, repeating the same call to action two or three times is normal, as long as each instance has a clear purpose and does not compete with other offers.

Best practices

  • Offer one primary action. A secondary link (for example "Contact sales") should look visibly less prominent.
  • Write button labels that describe the result, such as "Start free trial", rather than "Click here".
  • Use a real <a> for navigation and a <button> only for actions on the page.
  • Make sure text and buttons keep at least 4.5:1 contrast on coloured or image backgrounds; add an overlay when using photos.
  • Keep focus styles visible and large enough touch targets on mobile.
  • Stack the text and buttons vertically on small screens and give buttons full width if space is tight.

Bootstrap, Tailwind CSS and pure CSS versions

You will find call to action examples for Bootstrap 6, Bootstrap 5, Tailwind CSS and pure CSS. Bootstrap 6 versions use the theme-* colour roles for backgrounds and buttons, which makes them easy to match to your brand; Bootstrap 5 versions use the familiar bg-* and btn-* classes. Tailwind CSS snippets are utility-only, and the pure CSS variants keep colours in custom properties. Filter by framework, check banners, split layouts and boxed CTAs in the live preview, then copy the HTML and CSS from the code tabs or download them. Swap the headline and link targets and the section is ready to drop into your page.