CTA Sections

Call-to-action blocks that drive conversion. Place them between content sections or at the bottom of a page.

Composed from: button, checkbox, container, cta, heading, input, row, section, stack, text.

Simple Centered CTA

Centered headline + supporting copy + two-button row over the accent surface. The two-button arrangement reads as "primary path + secondary safety net" — the outline button gives readers a low-friction alternative to the primary action.

CTA — Simple Centered

Ready to get started?

Composable Blade components with the accessibility work already done.

<x-wirekit::cta variant="accent">
    <x-slot:title>Ready to get started?</x-slot:title>
    <x-slot:description>Composable Blade components with the accessibility work already done.</x-slot:description>
    <x-slot:actions>
        {{-- `intent="neutral"` on an accent surface, deliberately: a default button
             resolves to the same accent background and would render invisible. --}}
        <x-wirekit::button size="lg" intent="neutral" surface="outline">Start Free Trial</x-wirekit::button>
        <x-wirekit::button size="lg" intent="neutral">View Docs</x-wirekit::button>
    </x-slot:actions>
</x-wirekit::cta>

Split CTA

Text on the left, action buttons on the right. Best between content sections of a long marketing page where a centered CTA would feel too disruptive.

CTA — Split

Start building today

Free and open source. No credit card required.

<x-wirekit::section padding="xl" background="muted">
    <x-wirekit::container max="xl">
        <x-wirekit::row align="center" justify="between" gap="lg" wrap>
            <x-wirekit::stack gap="xs">
                <x-wirekit::heading level="2" size="2xl">Start building today</x-wirekit::heading>
                <x-wirekit::text intent="muted">Free and open source. No credit card required.</x-wirekit::text>
            </x-wirekit::stack>
            <x-wirekit::row gap="sm">
                <x-wirekit::button size="lg">Get Started</x-wirekit::button>
                <x-wirekit::button size="lg" intent="neutral" surface="outline">View Docs</x-wirekit::button>
            </x-wirekit::row>
        </x-wirekit::row>
    </x-wirekit::container>
</x-wirekit::section>

Email signup form for content marketing. The single-row layout keeps the friction low — one field, one button — which converts better than a multi-field signup on cold traffic.

CTA — Newsletter

Stay in the loop

Get notified about new components, updates, and best practices. No spam.

Yes, send me product news by email. I can unsubscribe from any message, and I have read the privacy policy.

We'll send a confirmation link — your subscription starts once you click it.

<x-wirekit::section padding="xl">
    <x-wirekit::container max="md">
        <x-wirekit::stack gap="md" align="center" style="text-align: center;">
            <x-wirekit::heading level="2" size="2xl">Stay in the loop</x-wirekit::heading>
            <x-wirekit::text intent="muted">Get notified about new components, updates, and best practices. No spam.</x-wirekit::text>
            <x-wirekit::row gap="sm" justify="center" style="width: 100%; max-width: 28rem;">
                <x-wirekit::input aria-label="Email address" name="email" type="email" placeholder="Your email address" required style="flex: 1; min-width: 0;" />
                <x-wirekit::button type="submit">Subscribe</x-wirekit::button>
            </x-wirekit::row>
            {{-- Consent, §7 UWG — and it is UNCHECKED, which is the whole point.
                 A pre-ticked box is not consent (ECJ C-673/17, Planet49): the reader has
                 to act, and silence is not an act. It is also the single most common way
                 a signup form gets this wrong, because a ticked box converts better.

                 The privacy link sits INSIDE the consent sentence rather than in the
                 footer: GDPR Art. 13 wants the information available at the point of
                 collection, which is here. --}}
            <x-wirekit::checkbox name="marketing_consent" required style="max-width: 28rem; text-align: left;">
                Yes, send me product news by email. I can unsubscribe from any message, and I have read the <a href="#" style="text-decoration: underline; color: inherit;">privacy policy</a>.
            </x-wirekit::checkbox>
            {{-- Double opt-in is what makes the consent provable later. The confirmation
                 mail, its timestamp and the IP that requested it are the evidence a
                 complaint asks for; the checkbox alone is a claim. --}}
            <x-wirekit::text size="xs" intent="muted">We'll send a confirmation link — your subscription starts once you click it.</x-wirekit::text>
        </x-wirekit::stack>
    </x-wirekit::container>
</x-wirekit::section>

Hero Sections — page headers