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-strongfor dark overlays. - Height: Use
50vhor 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