CTA

A call-to-action banner section for landing pages and marketing content.

Basic Usage

<x-wirekit::cta>
    <x-slot:title>Ready to get started?</x-slot:title>
    <x-slot:description>Join thousands of developers building with WireKit.</x-slot:description>
    <x-slot:actions>
        <x-wirekit::button>Sign Up Free</x-wirekit::button>
    </x-slot:actions>
</x-wirekit::cta>

Dark Variant

<x-wirekit::cta variant="dark">
    <x-slot:title>Start building today.</x-slot:title>
    <x-slot:description>Free and open source.</x-slot:description>
    <x-slot:actions>
        <x-wirekit::button intent="neutral">Get Started</x-wirekit::button>
    </x-slot:actions>
</x-wirekit::cta>

The default intent="primary" button uses the theme's accent color, which on the stock light theme resolves to a near-black (oklch(20.5% 0 0)) and washes out on the dark CTA's near-black background. Inside variant="dark", prefer intent="neutral" (light surface) — the same pattern the variant="accent" example below uses to break out of its background color.

Accent Variant

<x-wirekit::cta variant="accent">
    <x-slot:title>Try WireKit now.</x-slot:title>
    <x-slot:actions>
        <x-wirekit::button intent="neutral">Install</x-wirekit::button>
    </x-slot:actions>
</x-wirekit::cta>

Entrance Animation

Wire a viewport-triggered reveal directly on the section without an extra wrapper. The preview below uses a manual-trigger reveal so the docs site's preview-frame replay icon (top-right) re-fires the bounce on demand:

<x-wirekit::reveal preset="bounce" trigger="manual" :once="false" duration="slow" x-init="$nextTick(() => window.dispatchEvent(new CustomEvent('wirekit:reveal')))">
    <x-wirekit::cta>
        <x-slot:title>Ready to get started?</x-slot:title>
        <x-slot:description>Hit the replay icon above to bounce me back in.</x-slot:description>
        <x-slot:actions>
            <x-wirekit::button>Sign Up Free</x-wirekit::button>
        </x-slot:actions>
    </x-wirekit::cta>
</x-wirekit::reveal>

For the typical scroll-into-view case, use the animateIn prop directly on the CTA — equivalent to wrapping the component in <x-wirekit::reveal trigger="viewport"> but skips the wrapper element:

<x-wirekit::cta animateIn="slide-up">
    <x-slot:title>Ready to get started?</x-slot:title>
    <x-slot:actions>
        <x-wirekit::button>Sign Up Free</x-wirekit::button>
    </x-slot:actions>
</x-wirekit::cta>

The animateIn prop accepts any of the 11 base presets (fade, slide-up, slide-down, slide-left, slide-right, scale, zoom, flip, rotate, bounce, spring). It is equivalent to wrapping the component in <x-wirekit::reveal> but skips the wrapper element. Respects prefers-reduced-motion: reduce.

Props

The three size tiers:

The demo below uses variant="default" so the size differences are observable; on variant="accent" or variant="dark" CTAs, use intent="neutral" on the button (see "Contrast on accent / dark CTAs" above) — the default intent="primary" button shares its background color with the accent / dark CTA surface and visually vanishes.

<x-wirekit::cta size="sm">
    <x-slot:title>Tight CTA</x-slot:title>
    <x-slot:actions>
        <x-wirekit::button>Get started</x-wirekit::button>
    </x-slot:actions>
</x-wirekit::cta>

<x-wirekit::cta size="md">
    <x-slot:title>Balanced CTA</x-slot:title>
    <x-slot:actions>
        <x-wirekit::button>Get started</x-wirekit::button>
    </x-slot:actions>
</x-wirekit::cta>

<x-wirekit::cta size="lg">
    <x-slot:title>Roomy CTA</x-slot:title>
    <x-slot:actions>
        <x-wirekit::button>Get started</x-wirekit::button>
    </x-slot:actions>
</x-wirekit::cta>

Slots

Keyboard Interaction

This component is a layout wrapper. Keyboard interaction is delegated to its children.

Pitfalls

• Don't hardcode text-white on the accent variant. Use text-[var(--color-wk-accent-fg)] so the foreground auto-switches with the accent in dark mode (CTA-class WCAG 1.4.3 fix shipped 2026-04-21).

Design Tokens

Usage & Conventions

Prop conventions — this component uses one or more of the shared semantic prop names (intent / variant / tone / surface). See Prop naming conventions for the canonical vocabulary, alias matrix, and decision tree.