Vue call-to-action sections

A call-to-action section repeats the main offer at a point where the reader has enough context to act, usually near the end of a page. These Vue 3 CTA sections include centered banners, split image layouts and inline signup blocks.

Each is a Tailwind CSS 4 single-file component with typed props for the heading, text and actions, plus class-based dark mode. Use it as-is or remix it in the Vueplay Studio.

1 component

Preview of CTA BannerFree

Component · Call to action

CTA Banner

Vue 3 call-to-action banner in three layouts (glowing panel, split card and slim band) with primary and secondary buttons. Tailwind CSS, dark mode.

by Vueplay

Good to know

Building call to action that hold up

One primary action
Give the section a single primary button and at most one secondary link. Two equally weighted buttons make people hesitate.
Write specific button labels
Labels like "Start free trial" or "Book a demo" tell people what happens next better than "Submit" or "Learn more".
Check contrast on colored backgrounds
CTA sections often use a brand-colored background. Check that both the text and the button meet WCAG contrast in light and dark mode, since dark: variants can change the pairing.

FAQ

Questions

Can I add an email form to a CTA section?

Yes. Several sections include an inline email field that emits the value on submit, so you can send it to your own API or mailing list provider.

Do these sections work without a router?

Yes. Actions are plain links by default, and you can swap them for RouterLink or NuxtLink in the component source if you need client-side navigation.

More component categories

Pro feature

Upgrade to Pro

Upgrade to unlock more of Vueplay. Cancel any time.

  • Custom domains with HTTPS
  • Private projects
  • No "Made with Vueplay" badge
  • GitHub sync

$120/year

Compare plansBilling settings