Skip to main content
WireKit

CTA Sections

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

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

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?

Join thousands of developers building faster with WireKit. 

<x-wirekit::cta variant="accent">
    <x-slot:title>Ready to get started?</x-slot:title>
    <x-slot:description>Join thousands of developers building faster with WireKit.</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 variant="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>

Newsletter CTA

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. 

<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 variant="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>
        </x-wirekit::stack>
    </x-wirekit::container>
</x-wirekit::section>