Skip to main content
Copy for LLM

CTA

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

Basic Usage

Default CTA

Ready to get started?

Free, MIT-licensed, and installed with Composer. 
<x-wirekit::cta>
    <x-slot:title>Ready to get started?</x-slot:title>
    <x-slot:description>Free, MIT-licensed, and installed with Composer.</x-slot:description>
    <x-slot:actions>
        <x-wirekit::button>Read the docs</x-wirekit::button>
    </x-slot:actions>
</x-wirekit::cta>

Dark Variant

Dark CTA section

Start building today.

Free and open source. 
<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

Accent CTA

Try WireKit now. 

<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:

CTA with replayable bounce reveal

Ready to get started?

Hit the replay icon above to bounce me back in. 
<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

Prop Type Default Description
level int 2 Heading level for the title, 1–6. The default is what it has always rendered — a section of its own — so nothing moves unless you set it. Set it to match the surrounding outline: a skipped level is what heading-order reports, and that rule sits in axe's best-practice tag rather than the WCAG tags most suites run, so it is invisible to an axe sweep and visible in Lighthouse.
variant string 'default' Visual variant: default, dark, accent
animateIn string|null null Entrance-reveal preset (e.g. 'fade', 'slide-up'). Wires reveal semantics inline.
size sm | md | lg md Vertical-rhythm tier. Reads --space-wk-section-{size} tokens. Mobile viewport (< sm breakpoint) automatically drops one tier so the section never overshoots a small viewport. See hero docs for the full breakpoint table — cta follows the same shape.
scope string|null null Scoped personalization name

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 Dark Variant above, which explains why) — the default intent="primary" button shares its background color with the accent / dark CTA surface and visually vanishes.

CTA size — sm / md / lg

Tight CTA

Balanced CTA

Roomy CTA 

<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

Slot Description
title CTA heading (h2)
description Supporting text
actions CTA buttons

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

Token Used for
--space-wk-section-md Vertical padding
--font-wk-heading-weight Title weight
--color-wk-bg-muted Default background
--color-wk-bg Dark variant background, read inside the band's own dark scope
--color-wk-accent Accent variant background

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.

Updated in WireKit v2.65.0 (2026-10-05)

Was this page helpful?

Thank you for your feedback!

Voting requires cookies or local storage. What we store