Die Teaser Komponente ermöglicht es Texte und/oder Bilder aufmerksamkeitsstark auf einer Webseite zu platzieren. Ein Teaser wird in der Regel angewendet, um z.B. Produktseiten, redaktionelle Artikel, Kampagnen kurz "anzuteasern" und auf eine entsprechende weiterführende Seite verlinken. Teaser werden zum einen in der Hauptnavigation unter den einzelnen Unterpunkten eines Menüpunkts dargestellt. Zum Anderen stehen sie meist am Ende der Seite.
Standard-Teaser - 50/50 am Ende der Seite
Einfach alles auf die eine Karte setzen – und gewinnen
Die passende Mastercard. Für jede:n
Die passende Mastercard. Für jede:n
Standard-Teaser - 30/30/30 am Ende der Seite
Einfach alles auf die eine Karte setzen – und gewinnen
Die passende Mastercard. Für jede:n
Die passende Mastercard. Für jede:n
Einfach alles auf die eine Karte setzen – und gewinnen
Die passende Mastercard. Für jede:n
Die passende Mastercard. Für jede:n
Standard-Teaser - 100% am Ende der Seite
Einfach alles auf die eine Karte setzen – und gewinnen
Die passende Mastercard. Für jede:n
Die passende Mastercard. Für jede:n
Standard-Teaser - 100% am Ende der Seite
Lorem Ipsum dolor
In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium.
In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium.
3 Teaser nebeneinander auf Hintergrund
Hier wird ein Defect sichtbar: Sobald die Teaser in einer Column-Control auf Hintergrund stehen stimmt der Abstand zwischen text und CTA nicht mehr. Dieses müsste momentan mit einem zusätzlichem Absatz im Text korrigiert werden. Wichtig: Dies ist nur eine optische korrektur, der zusätzliche unnötige Absatz ist suboptimal. Außerdem geht dieses Vorgehen nicht bei Teasern die als XF angelegt sind und noch auf anderen Seiten ohne Hintergrund verwendet werden.
Einfach alles auf die eine Karte setzen – und gewinnen
Die passende Mastercard. Für jede:n
Die passende Mastercard. Für jede:n
Einfach alles auf die eine Karte setzen – und gewinnen
Die passende Mastercard. Für jede:n
Die passende Mastercard. Für jede:n
Ein Teaser 100% - Herausstellung Produkt
Lorem ipsum dolor sit amet
- Lorem ipsum dolor sit amet
- Consectetuer adipiscing elit.
- Aenean commodo ligula eget dolor.
- Aenean massa.
- Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
- 2 Teaser über die gesamte Breite
- Option 50/50 aktiviert um den Text und dem Bildbereich jeweils gleichgroß zu gestalten
- Der untere Teaser mit Option "Show Text first" um die Reihenfolge von Bild und Text zu tauschen
Test Headline
- Lorem ipsum dolor sit amet.
- Consectetuer adipiscing elit.
- Aenean commodo ligula eget dolor.
- Aenean massa.
- Lorem ipsum dolor sit amet.
- Consectetuer adipiscing elit.
- Aenean commodo ligula eget dolor.
- Aenean massa.
- Lorem ipsum dolor sit amet.
- Consectetuer adipiscing elit.
- Aenean commodo ligula eget dolor.
- Aenean massa.
- Lorem ipsum dolor sit amet.
- Consectetuer adipiscing elit.
- Aenean commodo ligula eget dolor.
- Aenean massa.
TEST TEASER
Ich bin ein Teaser Content Text
Ich bin ein Teaser Content Text
