Call to Action Sections

Die Einladung zum nächsten Schritt, von der ruhigen Zeile bis zum leuchtenden Panel.

11 Variants

Kategorie wechseln

Die letzte Einladung auf der Seite

Eine Call to Action Section schließt eine Seite mit einem klaren nächsten Schritt. Die elf Varianten hier reichen von einer ruhigen Zeile bis zum leuchtenden Panel, und jede nimmt Headline, Text und Buttons über Props, die Worte bleiben also deine.

„Mittig“ und „Minimal“ beenden eine lange Seite ruhig. „Geteilt mit Bild“ und „Bild im Hintergrund“ ergänzen ein Bild, wenn das Angebot ein Ort oder eine Person ist. Die Karte mit Lichtkante und das Verlaufspanel ziehen auf dunklen Seiten den Blick. „Mit E-Mail-Feld“ sammelt Anmeldungen direkt, „Mit App-Knöpfen“ führt in die Stores, „Mit Ansprechperson“ stellt ein Gesicht neben die Anfrage, „Mit Zahlen“ wiederholt die Belege.

Wiederhole hier die Hauptaktion aus dem Hero, mit denselben Worten, damit Besucher sie wiedererkennen. Ein Button wirkt besser als zwei. Setz die Section hinter die Inhalte, die Zweifel ausräumen, etwa Kundenstimmen oder FAQ, nicht zwischen zwei Informationsblöcke.

Mittig

Ein großes Statement auf einer Achse, dahinter Punkte und Licht.

Im Studio öffnen

Installv1.0.0

aiw add @ai-website/cta

Bringt mit utils, kit, button, icon, reveal, number-ticker, motion

Usage

<Cta variant="centered" title="…" primaryAction={{ label, href }} notes={[…]} />

Source

Geteilt mit Bild

Text und Bild in einer gerahmten Fläche. Auf dem Telefon folgt das Bild dem Text.

Im Studio öffnen

Installv1.0.0

aiw add @ai-website/cta

Bringt mit utils, kit, button, icon, reveal, number-ticker, motion

Usage

<Cta variant="split" title="…" media={<img … />} />

Source

Karte mit Lichtkante

Eine erhobene Karte mit umlaufendem Licht auf der Kante und Lichtkegel unter dem Zeiger.

Im Studio öffnen

Installv1.0.0

aiw add @ai-website/cta

Bringt mit utils, kit, button, icon, reveal, number-ticker, motion

Usage

<Cta variant="card" icon="rocket" title="…" primaryAction={…} />

Source

Bandstreifen

Ein schmales Band in der Akzentfarbe zwischen zwei Abschnitten.

Im Studio öffnen

Mit E-Mail-Feld

Überschrift und E-Mail-Feld mit Fehler- und Erfolgszustand.

Im Studio öffnen

Installv1.0.0

aiw add @ai-website/cta

Bringt mit utils, kit, button, icon, reveal, number-ticker, motion

Usage

<Cta variant="with-form" title="…" onSubmit={async (email) => …} />

Source

Mit App-Knöpfen

Neutrale Store-Knöpfe ohne fremde Logos, ein QR-Code und die App auf dem Telefon.

Im Studio öffnen

Installv1.0.0

aiw add @ai-website/cta

Bringt mit utils, kit, button, icon, reveal, number-ticker, motion

Usage

<Cta variant="with-app-badges" apps={{ ios, android, qr }} media={<PhoneFrame>…</PhoneFrame>} />

Source

Verlaufspanel

Ein von innen beleuchtetes Panel in der Akzentfarbe, Knöpfe invertiert.

Im Studio öffnen

Installv1.0.0

aiw add @ai-website/cta

Bringt mit utils, kit, button, icon, reveal, number-ticker, motion

Usage

<Cta variant="gradient-panel" title="…" primaryAction={…} />

Source

Mit Ansprechperson

Eine echte Person mit persönlicher Zeile, Erreichbarkeit und direkten Wegen.

Im Studio öffnen

Installv1.0.0

aiw add @ai-website/cta

Bringt mit utils, kit, button, icon, reveal, number-ticker, motion

Usage

<Cta variant="with-contact-person" title="…" person={{ name, role, avatar, note, status, contacts }} />

Source

Minimal

Ein Satz und ein runder Pfeil zwischen zwei Haarlinien.

Im Studio öffnen

Installv1.0.0

aiw add @ai-website/cta

Bringt mit utils, kit, button, icon, reveal, number-ticker, motion

Usage

<Cta variant="minimal" title="…" description="…" primaryAction={…} />

Source

Bild im Hintergrund

Ein Bild über die volle Breite mit weichem Schleier, der Text bleibt in beiden Modi lesbar.

Im Studio öffnen

Installv1.0.0

aiw add @ai-website/cta

Bringt mit utils, kit, button, icon, reveal, number-ticker, motion

Usage

<Cta variant="image-background" title="…" media={<img … />} />

Source

Mit Zahlen

Die Einladung neben vier Zahlen, die sie belegen.

Im Studio öffnen

Installv1.0.0

aiw add @ai-website/cta

Bringt mit utils, kit, button, icon, reveal, number-ticker, motion

Usage

<Cta variant="with-stats" title="…" stats={[{ value: "4.9", label: "…" }]} primaryAction={…} />

Source

Details

Was Aufruf mitbringt, aus Registry und Quellcode gelesen.

Bereich: Marketing
Variants: 11
Version: 1.0.0 · seit 1.0.0
Datei: components/ui/cta.tsx
Bringt mit: utilskitbutton iconrevealnumber-tickermotion
npm-Pakete: Keine
Sprachen: Englisch und Deutsch, 13 eigene Texte
Studio: Alle 11 Variants bearbeitbar
Mit KI bauen: Per MCP in Claude, Cursor, Copilot und Codex

Props

Die Schnittstelle CtaProps aus components/ui/cta.tsx. Beschreibungen stammen aus den Kommentaren im Code und sind auf Englisch.

variantoptional
CtaVariant
centeredsplitcardbanner-stripwith-formwith-app-badgesgradient-panelwith-contact-personminimalimage-backgroundwith-stats
eyebrowoptional
React.ReactNode
titlePflicht
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

Eingebaute Texte

Diese Texte schreibt Aufruf selbst. Die Sprache folgt dem KitProvider, über die Prop labels ersetzt du einzelne.

Alle 13 Texte anzeigen

Schlüssel	Englisch	Deutsch
email	Englisch Work email	Deutsch Geschäftliche E-Mail
placeholder	Englisch you@company.com	Deutsch du@firma.de
submit	Englisch Get started	Deutsch Jetzt starten
sending	Englisch Sending	Deutsch Wird gesendet
invalid	Englisch Please enter a full email address, like name@company.com.	Deutsch Bitte gib eine vollständige E-Mail-Adresse ein, etwa name@firma.de.
failed	Englisch That did not go through. Please try again in a moment.	Deutsch Das hat nicht geklappt. Bitte versuch es gleich noch einmal.
success	Englisch Check your inbox. The link to your account is on its way.	Deutsch Schau in dein Postfach. Der Link zu deinem Konto ist unterwegs.
iosSmall	Englisch Download for	Deutsch Laden für
ios	Englisch iPhone and iPad	Deutsch iPhone und iPad
androidSmall	Englisch Get it for	Deutsch Holen für
android	Englisch Android	Deutsch Android
scan	Englisch Scan with your phone camera	Deutsch Mit der Handykamera scannen
typing	Englisch is typing	Deutsch schreibt gerade

Aus dem Quellcode der Component abgeleitet.

Setzt aria-describedby und aria-invalid, damit Screenreader Zweck und Zustand ansagen.
Nutzt die Rollen alert und status.
Meldet Änderungen über eine Live-Region, ohne den Fokus zu verschieben.
Jedes Feld hat ein Label, sichtbar oder für Screenreader.
Ergänzt Text für Screenreader, wo Icons und Grafiken allein stehen.
Zeigt bei Bedienung mit der Tastatur einen sichtbaren Fokusring.
Der Server rendert den Startzustand vollständig, JavaScript ergänzt nur die Interaktion.

Bewegung

Erscheint beim ersten Sichtkontakt mit einem kurzen Auftritt (kit-rise, useInView).
Bringt eigene Animationen mit, ruhig getaktet und ohne Wackeln.
Bei reduzierter Bewegung (prefers-reduced-motion) bleibt sie ruhig. 13 Stellen im Code schalten Bewegung dann ab.

Häufige Fragen

Wie installiere ich Aufruf?

Mit aiw add @ai-website/cta. Der Befehl legt die Datei components/ui/cta.tsx in dein Projekt, der Code gehört danach dir. Mit dabei sind button, icon, reveal, number-ticker und motion. Weitere npm-Pakete braucht sie nicht.

Welche Varianten hat Aufruf?

11 Varianten, Mittig, Geteilt mit Bild, Karte mit Lichtkante, Bandstreifen, Mit E-Mail-Feld, Mit App-Knöpfen, Verlaufspanel, Mit Ansprechperson, Minimal, Bild im Hintergrund und Mit Zahlen. Du wählst sie mit der Prop variant, zum Beispiel variant="split".

Kann ich die Texte von Aufruf übersetzen?

Ja. Aufruf bringt 13 eigene Texte auf Deutsch und Englisch mit, etwa „Geschäftliche E-Mail“, „du@firma.de“ und „Jetzt starten“. Die Sprache folgt dem KitProvider, einzelne Texte ersetzt du über die Prop labels.

Kann ein KI-Assistent Aufruf einbauen?

Ja. Über den MCP-Server der aiw CLI finden Claude, Cursor, GitHub Copilot, Windsurf, Codex und Gemini Aufruf mit aiw_components und installieren sie mit aiw_add @ai-website/cta. Nenn im Prompt die Variante, etwa variant="centered", dann schreibt der Assistent deine Inhalte direkt in die Props.

Kann ich Aufruf ohne Code anpassen?

Ja, im Studio. Alle 11 Varianten lassen sich dort bearbeiten, Texte, Listen und Schalter. Das Studio schreibt den passenden Cta-Code zum Kopieren.

Wird oft kombiniert mit

Sections, die auf einer Seite meist neben Call to Action stehen.

Die letzte Einladung auf der Seite

Aufruf

Mittig

Geteilt mit Bild

Karte mit Lichtkante

Bandstreifen

Mit E-Mail-Feld

Mit App-Knöpfen

Verlaufspanel

Mit Ansprechperson

Minimal

Bild im Hintergrund

Mit Zahlen

Details

Props

Eingebaute Texte

Barrierefreiheit

Bewegung

Häufige Fragen

Ähnliche Components, Wird oft kombiniert mit

Ähnliche Components

Wird oft kombiniert mit