CTA

Call to action section patterns for landing pages and marketing sites. Centered banners, split layouts, and background image CTAs.

Overview

Call to Action (CTA) sections are critical conversion points on marketing pages. They typically appear after feature sections or at the bottom of landing pages, prompting users to take the next step. These patterns use data-layout="cover" for vertical centering and data-layout="center" for horizontal alignment.

Key features:

  • Vertical centering with data-layout="cover"
  • Multiple layout variants (centered, split, full-width)
  • Background image support with overlays
  • Inline form integration for lead capture
  • Button groups with data-layout="cluster"
  • Responsive without media queries

Centered CTA

The most common CTA pattern: centered headline, supporting text, and action buttons. Perfect for page endings and conversion sections.

 <section class="cta" data-layout="cover" data-layout-min="50vh" data-layout-padding="xl"> <div class="cta-content" data-layout="center" data-layout-max="normal" data-layout-gap="l"> <h2>Ready to get started?</h2> <p class="lead"> Join thousands of developers building better interfaces with Vanilla Breeze. Start your free trial today, no credit card required. </p> <nav> <ul data-layout="cluster" data-layout-justify="center" data-layout-gap="m"> <li><a href="/signup/" class="button large">Start Free Trial</a></li> <li><a href="/contact/" class="button large secondary">Talk to Sales</a></li> </ul> </nav> </div> </section>

Split CTA with Form

Text on one side, form or image on the other. Uses data-layout="sidebar" for a flexible two-column layout that stacks on narrow viewports. Great for newsletter signups and lead capture.

 <section class="cta" data-layout="cover" data-layout-min="50vh" data-layout-padding="xl"> <div data-layout="center" data-layout-max="wide"> <div data-layout="sidebar" data-layout-gap="2xl" data-layout-sidebar-width="wide" data-layout-content-min="50"> <div data-layout="stack" data-layout-gap="l"> <h2>Get notified when we launch</h2> <p class="lead"> Be the first to know when new features are released. Sign up for early access and exclusive updates. </p> <form class="inline-form" action="/subscribe" method="POST"> <form-field> <input type="email" name="email" required autocomplete="email" placeholder="Enter your email" aria-label="Email address" /> </form-field> <button type="submit">Notify Me</button> </form> <p class="text-sm text-muted"> We respect your privacy. Unsubscribe at any time. </p> </div> <img src="/images/cta-illustration.png" alt="Product illustration" width="500" height="375" loading="lazy" /> </div> </div> </section>

Inline Form Styles

Add these styles for the inline email form:

 .inline-form { display: flex; gap: var(--size-s); flex-wrap: wrap; } .inline-form input { flex: 1; min-width: 200px; }

With Background Image

Full-width background image with a dark overlay for text readability. The overlay uses --color-overlay-strong from design tokens. Great for creating visual impact.

 <section class="cta cta-with-bg" data-layout="cover" data-layout-min="50vh" data-layout-padding="xl"> <div class="cta-content" data-layout="center" data-layout-max="normal" data-layout-gap="l"> <h2>Transform your workflow today</h2> <p class="lead"> Stop struggling with complex toolchains. Vanilla Breeze gives you everything you need to build beautiful, responsive interfaces. </p> <nav> <ul data-layout="cluster" data-layout-justify="center" data-layout-gap="m"> <li><a href="/signup/" class="button large">Get Started Free</a></li> <li><a href="/pricing/" class="button large ghost">See Pricing</a></li> </ul> </nav> </div> </section>

Required CSS

Add these styles to support background images with overlay:

 .cta-with-bg { background-image: url('/images/cta-bg.jpg'); background-size: cover; background-position: center; position: relative; } .cta-with-bg::before { content: ""; position: absolute; inset: 0; background: var(--color-overlay-strong); } .cta-with-bg > * { position: relative; color: var(--color-white); }

For buttons over dark backgrounds, add these ghost button overrides:

 .cta-with-bg .button.ghost { color: var(--color-white); border-color: var(--color-white); } .cta-with-bg .button.ghost:hover { background: rgba(255, 255, 255, 0.1); }

Layout Configuration

Common data attributes for CTA sections:
Layout Attribute Values Description
data-layout="cover" data-layout-min CSS length (e.g., 50vh, 300px) Minimum height of the CTA section.
data-layout="cover" data-layout-padding none s m l xl Padding inside the cover.
data-layout="center" data-layout-max narrow normal wide prose Maximum content width.
data-layout="sidebar" data-layout-sidebar-width narrow normal wide Width of the sidebar column.
data-layout="cluster" data-layout-justify start center end between Horizontal alignment of buttons.

Usage Notes

  • Placement: CTAs work best after feature sections, testimonials, or at the bottom of landing pages. Avoid placing multiple CTAs too close together.
  • Button text: Use action-oriented language that clearly states the benefit (e.g., "Start Free Trial" instead of "Submit").
  • Primary vs secondary: Use one primary button for the main action and a secondary/ghost button for alternative actions.
  • Contrast: Ensure sufficient color contrast between text and background, especially with background images. Use --color-overlay-strong for dark overlays.
  • Height: Use 50vh or less for CTAs to differentiate from full-height hero sections.
  • Forms: Keep inline forms simple with one or two fields. Use full forms in split layouts for more complex signups.
  • Mobile: Split layouts stack automatically on narrow viewports thanks to data-layout="sidebar".

Related

Hero Patterns

Above-the-fold hero sections

Layout Cover

Cover layout element documentation

Layout Center

Center layout element documentation

Buttons

Button component documentation