Die Teaserliste ist ein visuelles Bild-Text-Element, das sich ideal eignet, um weitere Inhalte anzuteasern und weiterzuverlinken.
Die Komponente kann enthalten:
eine Headline (ein- oder ausblendbar)
eine Subheadline (ein- oder ausblendbar)
mehrere Teaser-Items
Jedes Item besteht in der Regel aus:
einem Bild oder Video
einem optionalen Datum (ein- oder ausblendbar)
einer Headline
einer Verlinkung
Alle üblichen Verlinkungsoptionen stehen zur Verfügung.
Darstellung & Layout
Die Teaser-Items können angezeigt werden als:
Grid
Karussell
Im Grid-Layout erfolgt ab einer bestimmten Anzahl ein automatischer Umbruch in neue Reihen (in der Regel nach vier Elementen pro Reihe).
Im Karussell werden die Items horizontal durchgeklickt.
Für die visuelle Darstellung stehen zwei Varianten zur Verfügung:
Bild über der Headline
Bild als Hintergrund, wobei die Headline direkt auf dem Bild dargestellt wird
Bei der Hintergrund-Variante sollte besonders auf die Lesbarkeit der Typografie geachtet werden.
Medien & Anpassung
Innerhalb der Items kannst du:
Bilder aus dem Medienarchiv auswählen
den Bildausschnitt anpassen und den Fokus setzen
Videos aus dem Medienarchiv oder Webvideos einbinden
einen Dark Overlay oder Dark Gradient aktivieren, um die Lesbarkeit der Schrift zu verbessern
Dark overlay vs dark Gradient
Datum und Headline können optional ausgeblendet werden, sodass das Item ausschließlich als visuelles Linkelement dient.
Das Farbschema der Komponente kann angepasst werden, wobei insbesondere bei Text auf Bild auf ausreichenden Kontrast geachtet werden sollte.
Tipps & Tricks
Es können beliebig viele Items angelegt werden.
Im Grid erfolgt der automatische Umbruch abhängig von der Anzahl der Elemente (in der Regel nach vier pro Reihe).
Achte bei Hintergrundbildern besonders auf ausreichenden Kontrast und gute Lesbarkeit der Typografie.
Nutze Dark Overlay oder Dark Gradient gezielt, wenn Text direkt auf einem Bild liegt.