Design System
Playground Zur Vorlage

Sektionen · RahmenSticky-CTA

Sektion · 6 Varianten

Sticky-CTA

sections/StickyCta.astro

Leiste am unteren Rand für Mobil: Satz und Primary small, invers, zwei Aktionen, Preis als Proof, schließbar, Desktop-Variante.

Notizen

  • Bestand: nichts. z nav 50, Haarlinie oben, opak.
  • Nur lg:hidden; Desktop-Variante zum Vergleich.

Props

Name Typ Default Notiz
variant "leiste" | "invers" | "zwei" | "preis" | "schliessbar" | "desktop" "leiste" 01–06.
surface "nacht" | "paper" "nacht" Pflicht-Paar.
<StickyCta variant="leiste" surface="nacht" />

01 · Leiste

Satz, Primary small

CTA. lg:hidden.

Nacht

Nächster Slot: Oktober.

Nur unter lg sichtbar. Desktop zeigt die Leiste nicht.

Paper

Nächster Slot: Oktober.

Nur unter lg sichtbar. Desktop zeigt die Leiste nicht.

02 · Invers

Deckel-Optik

Ebenen. —

Nacht

Nächster Slot: Oktober.

Nur unter lg sichtbar. Desktop zeigt die Leiste nicht.

Paper

Nächster Slot: Oktober.

Nur unter lg sichtbar. Desktop zeigt die Leiste nicht.

03 · Zwei

Ghost Anrufen, Primary

CTA-Gruppe. —

Nacht

Nächster Slot: Oktober.

Nur unter lg sichtbar. Desktop zeigt die Leiste nicht.

Paper

Nächster Slot: Oktober.

Nur unter lg sichtbar. Desktop zeigt die Leiste nicht.

04 · Preis

ab 4.900 als Proof

Pricing. —

Nacht

Nur unter lg sichtbar. Desktop zeigt die Leiste nicht.

Paper

Nur unter lg sichtbar. Desktop zeigt die Leiste nicht.

05 · Schließbar

× rechts

Toast. —

Nacht

Nächster Slot: Oktober.

Nur unter lg sichtbar. Desktop zeigt die Leiste nicht.

Paper

Nächster Slot: Oktober.

Nur unter lg sichtbar. Desktop zeigt die Leiste nicht.

06 · Desktop

Auch über lg

Anfrage. Zum Prüfen.

Nacht

Nächster Slot: Oktober.

Paper

Nächster Slot: Oktober.