Die Teaser Stage wird in erster Linie als prominenter Einstieg am Anfang einer Seite eingesetzt. Sie eignet sich besonders, um Inhalte visuell stark und aufmerksamkeitsstark einzuleiten. Mit Headline, unterstützenden Assets und (optionalem) Call-to-Action-Button schafft die Teaser Stage einen deutlichen Fokus auf eben diese Inhalte.
Im Gegensatz zu den meisten anderen Komponenten ist sie nicht an einen Structure Container gebunden. Dadurch kann sie über die gesamte Breite der Seite dargestellt werden, beispielsweise als großformatiges Bild.
In bestimmten Fällen kann die Teaser Stage auch weiter unten auf der Seite eingesetzt werden, um gezielt inhaltliche Akzente zu setzen. Aufgrund ihrer Größe und Wirkung sollte der Einsatz jedoch sorgfältig geprüft werden. Entscheidend ist, dass sie sich stimmig in das Gesamtlayout der Seite einfügt.
Der Teaser ist eine kompakte Komponente für weiterführende Inhalte. Teaser sind flexibel einsetzbar und eignen sich vor allem, um mehrere Themen, Kampagnen, Angebote gleichwertig darzustellen.
Die Teaser Stage dient dazu Content prominent in einem gut sichtbaren Bereich der Seite zu platzieren, mit großflächigem Bild, auffälliger Headline und optionalem Call-to-Action-Button. Die Teaser Stage ist der "große Bruder" zur Teaser-Komponente und dient als starkes Einstiegselement. Sie eignet sich daher vor allem für Kampagnen, Highlights oder für Einstiege zu speziellen Seiten oder Landing Pages.
Unter Asset wird das Bild für den Teaser ausgewählt. Ein Teaserbild ist optional. Je nach gewünschtem Ziel des Teasers aber empfehlenswert.
Folgende Felder stehen zur Verfügung:
Ein Link ist technisch nicht zwingend vorgeschrieben. Die Teaser Stage kann auch ohne Verlinkung mit Asset und Text erstellt werden und somit als visuelle Abgrenzung oder Informationshinweis dienen.
In den Eingabefeldern für Titel, Beschreibung und Button-Text besteht keine technische Begrenzung.
Das Textfeld in der Teaser Stage wächst mit der Länge des Textes. Ab einer gewissen Textlänge, wächst die Teaser Stage nach unten hin weiter.
Damit die Darstellung jedoch auf möglichst vielen Geräten und Bildschirmgrößen übersichtlich bleibt, gelten folgende redaktionelle Empfehlungen (inklusive Leerzeichen):
Diese Richtwerte helfen dabei, ein ausgewogenes Layout zu sichern und verhindern, dass Inhalte abgeschnitten oder unübersichtlich dargestellt werden.
Die Teaser Stage passt sich in der Breite der Breite des Browserfensters an. Dadurch hat das Hintergrundbild keine feste Bildformatvorgabe (Aspect Ratio).
Die Content Box innerhalb der Stage befindet sich im Container-Element. Die Höhe dieser Content Box passt sich automatisch an die Menge des enthaltenen Textes an. Wird der Text länger, bricht er in mehrere Zeilen um, wodurch die Box größer wird und zusätzliches Innenabstand (Padding) erhält. Dadurch überlagert der Text das Hintergrundbild stärker.
Das Einbinden von Videos in der Teaser Stage ist derzeit nicht möglich. Als Alternative lassen sich Bilder als Asset-Quelle auswählen und das Video kann per CTA-Button extern verlinkt sein.