Coop
Standorte
Impressum
044 123 45 67
Kontakt

CBK-001 Teaser Variationsseite

Auf dieser Seite wird verdeutlicht, wie die Komponente in den unterschiedlichen Konfigurationen dargestellt wird. Zur vereinfachten Darstellung ist der benutzte Text ein standardisierter Platzhalter-Text.

Übersicht Teaser-Typen

Per Klick direkt auf das jeweilige Beispiel springen. Es sind noch weitere Kombinationen des Karussells möglich, die Liste gibt die gängigen Einstellungen wieder.

Typen

Text und Asset Darstellung allgemein

    Darstellungsbeispiel:

    • Zwei Buttons (primär und sekundär) zu zwei unterschiedlichen internen Seiten
    • Nur die definierten CTAs sind klickbar, die weiteren Bestandteile im Teaser bleiben unverlinkt.
    • Hover-Effekt auf CTA-Buttons zur visuellen Verdeutlichung der Klickbarkeit
    Dialogfeld Links der Teaser-Komponente mit zwei angelegten CTA-Pfaden, Link-Pfad Feld darüber ist leer

    Linked Teaser

    Darstellungsbeispiel:

    • Gesamter Teaser ist klickbar und spiegelt den Link-Pfad wieder
    • Hover-Effekt zur visuellen Verdeutlichung der Klickbarkeit
    • Keine weiteren CTA-Buttons
    Dialogfeld Links der Teaser-Komponente mit ausgefülltem Link-Pfad

    Kombi: Action und Linked Teaser

    Darstellungsbeispiel:

    • Headline ist klickbar und spiegelt den Link-Pfad wieder
    • Zwei Buttons (primär und sekundär) zu zwei unterschiedlichen internen Seiten
    • Hover-Effekt auf CTA-Buttons und Headline zur visuellen Verdeutlichung der Klickbarkeit
    Dialogfeld Links der Teaser-Komponente mit ausgefülltem Link-Pfad und zwei angelegten CTA-Pfaden

    Teaser ohne Asset

    Für Teaser ohne Bilder muss im Tab Assets folgendes umgestellt werden:

    • Haken entfernen in der Checkbox 'Inherit featured image from page'
    • Haken setzen in Checkbox 'Don't provide an alternative text'

    Die Varianten unter Styles sind entsprechend obsolet. Links und Text sind weiterhin möglich.

    Stylingvarianten

    Darstellung:

    • Das Asset erhält ein helles Overlay
    • Hover-Effekt bei Verlinkung
    • Die Schriftfarbe im Teaser bietet ausreichend Kontrast für die Lesbarkeit und Barrierefreiheit.

    Darstellung:

    • Das Asset erhält ein dunkles Overlay
    • Hover-Effekt bei Verlinkung
    • Die Schriftfarbe im Teaser bietet ausreichend Kontrast für die Lesbarkeit und Barrierefreiheit.

    Darstellung:

    • Das ausgewählte Asset erscheint oberhalb der weiteren Komponenten wie Title, Text, Button

    Darstellung:

    • Das ausgewählte Asset erscheint unterhalb der weiteren Komponenten wie Title, Text, Button

    Darstellung:

    • Das Asset erscheint auf der linken Seite, die weiteren Komponenten wie Title, Text, Button auf der rechten Seite.

    Darstellung:

    • Das Asset erscheint auf der rechten Seite, die weiteren Komponenten wie Title, Text, Button auf der linken Seite.

    Darstellung:

    • Die Textausrichtung ist oben, hier beispielhaft sichtbar mit Einstellung Image on top.

    Darstellung:

    • Die Textausrichtung ist mittig, hier beispielhaft sichtbar mit Einstellung Image on top.

    Darstellung:

    • Die Textausrichtung ist unten, hier beispielhaft sichtbar mit Einstellung Image on top.