Skip to content
UI Kit
Accent color

Call to action sections

The invitation to the next step, from a quiet line to a lit panel.

11 variants
Switch category

The last invitation on the page

A call to action section closes a page with one clear next step. The eleven variants here range from a quiet line to a lit panel, and each one takes its headline, text and buttons through props, so the wording stays yours.

Centered and Minimal end a long page calmly. Split with image and Image background add a picture when the offer is a place or a person. Card with beam and Gradient panel draw the eye on a dark page. With email form collects signups in place, With app buttons sends people to the stores, With contact person puts a face next to the request, With numbers repeats the proof once more.

Repeat the main action of the hero here, with the same words, so visitors recognize it. One button is better than two. Place the section after the content that removes doubt, such as testimonials or the FAQ, not between two information blocks.

Call to action

Centered

A large statement on one axis, dots and light behind it.

Open in Studio

Split with image

Text and picture in one framed surface. On phones the picture follows the text.

Open in Studio

Card with beam

A raised card with a running light on its border and a spotlight under the pointer.

Open in Studio

Banner strip

A slim band in the accent color between two sections.

Open in Studio

With email form

Headline and an email field with error and success states.

Open in Studio

With app buttons

Neutral store buttons without third-party logos, a QR code and the app on a phone.

Open in Studio

Gradient panel

A panel lit from inside in the accent color, buttons inverted.

Open in Studio

With contact person

A real person with a personal line, availability and direct contacts.

Open in Studio

Minimal

One sentence and a round arrow between two hairlines.

Open in Studio

Image background

A full-width picture with a soft veil, the text stays readable in both themes.

Open in Studio

With numbers

The invitation next to four numbers that back it up.

Open in Studio

Details

What Call to action brings along, read from the registry and the source.

Area
Marketing
Variants
11
Version
1.0.0 · since 1.0.0
File
components/ui/cta.tsx
Brings along
utilskitbuttoniconrevealnumber-tickermotion
npm packages
None
Languages
English and German, 13 texts of its own
Studio
All 11 variants editable
Build with AI
Over MCP in Claude, Cursor, Copilot and Codex

Props

The CtaProps interface from components/ui/cta.tsx, with the comments from the code.

  • variantoptional
    CtaVariant

    centeredsplitcardbanner-stripwith-formwith-app-badgesgradient-panelwith-contact-personminimalimage-backgroundwith-stats

  • eyebrowoptional
    React.ReactNode
  • titlerequired
    React.ReactNode
  • descriptionoptional
    React.ReactNode
  • primaryActionoptional
    CtaAction
  • secondaryActionoptional
    CtaAction
  • notesoptional
    string[]

    Short reassurances with a check mark

  • mediaoptional
    React.ReactNode

    split, image-background: the picture. with-app-badges: the phone.

  • personoptional
    CtaPerson

    with-contact-person

  • formActionoptional
    string

    with-form: where the form posts. Without onSubmit the browser submits it.

  • onSubmitoptional
    (email: string) => void | Promise<void>

    with-form: called with the email. Resolve to show success, throw to show the error.

  • appsoptional
    { ios?: string; android?: string; qr?: React.ReactNode }

    with-app-badges: links to both stores, and an optional QR code node

  • statsoptional
    { value: string; label: string }[]

    with-stats: numbers that back the invitation

  • iconoptional
    IconName

    card: icon in the badge above the title

Built-in texts

Call to action writes these texts itself. The language follows the KitProvider, the labels prop replaces single ones.

Show all 13 texts
emailEnglish Work emailGerman Geschäftliche E-Mail
placeholderEnglish you@company.comGerman du@firma.de
submitEnglish Get startedGerman Jetzt starten
sendingEnglish SendingGerman Wird gesendet
invalidEnglish Please enter a full email address, like name@company.com.German Bitte gib eine vollständige E-Mail-Adresse ein, etwa name@firma.de.
failedEnglish That did not go through. Please try again in a moment.German Das hat nicht geklappt. Bitte versuch es gleich noch einmal.
successEnglish Check your inbox. The link to your account is on its way.German Schau in dein Postfach. Der Link zu deinem Konto ist unterwegs.
iosSmallEnglish Download forGerman Laden für
iosEnglish iPhone and iPadGerman iPhone und iPad
androidSmallEnglish Get it forGerman Holen für
androidEnglish AndroidGerman Android
scanEnglish Scan with your phone cameraGerman Mit der Handykamera scannen
typingEnglish is typingGerman schreibt gerade

Accessibility

Read from the source of the component.

  • Sets aria-describedby and aria-invalid, so screen readers announce purpose and state.
  • Uses the roles alert and status.
  • Announces changes through a live region without moving focus.
  • Every field has a label, visible or for screen readers.
  • Adds text for screen readers where icons and graphics stand alone.
  • Shows a visible focus ring when used with the keyboard.
  • The server renders the starting state in full, JavaScript only adds the interaction.

Motion

  • Rises in briefly the first time it comes into view (kit-rise, useInView).
  • Brings animations of its own, calmly timed and without wobble.
  • With reduced motion (prefers-reduced-motion) it stays still. 13 places in the code switch motion off then.

Frequent questions

How do I install Call to action?

With aiw add @ai-website/cta. The command puts components/ui/cta.tsx into your project, the code is yours from then on. It brings along button, icon, reveal, number-ticker and motion. It needs no further npm packages.

Which variants does Call to action have?

11 variants, Centered, Split with image, Card with beam, Banner strip, With email form, With app buttons, Gradient panel, With contact person, Minimal, Image background and With numbers. You pick one with the variant prop, for example variant="split".

Can I translate the texts of Call to action?

Yes. Call to action carries 13 texts of its own in English and German, such as “Work email”, “you@company.com” and “Get started”. The language follows the KitProvider, single texts change through the labels prop.

Can an AI assistant build with Call to action?

Yes. Through the MCP server of the aiw CLI, Claude, Cursor, GitHub Copilot, Windsurf, Codex and Gemini find Call to action with aiw_components and install it with aiw_add @ai-website/cta. Name the variant in your prompt, for example variant="centered", and the assistant writes your content straight into the props.

Can I adjust Call to action without code?

Yes, in the Studio. All 11 variants are editable there, texts, lists and switches. The Studio writes the matching Cta code to copy.

Similar components

More from Marketing, the same area of the kit.

Often combined with

Sections that usually sit next to Call to action on a page.

Often searched

Jump to

Copied to the clipboard