Die Key Visual Komponente ist eine vollflächige Media-Komponente, die immer über die gesamte Seitenbreite dargestellt wird. Sie eignet sich besonders für visuell dominante Einstiege, Call-to-Action-Bereiche oder als strukturierendes Element innerhalb einer Seite.
Im Gegensatz zu anderen Komponenten ist sie grundsätzlich Full Width. Es gibt keine Default- oder Wide-Option. Auch die Höhe der Komponente ist fest definiert und kann nicht angepasst werden.
Das Visual liegt vollständig hinter der Typografie. Daher sollte bei der Auswahl besonders auf Kontrast und Lesbarkeit geachtet werden.
Aufbau der Komponente
Die Key Visual Komponente kann enthalten:
ein Bild, Video oder Webvideo
ein optionales Datum
eine Headline
eine Subline
einen Badge
einen Button
Alle Elemente lassen sich flexibel ein- oder ausblenden.
Visual-Einstellungen
Unter „Visual“ kann definiert werden, ob ein Bild, Video aus dem Media Archive oder Webvideo verwendet wird.
Bei Bildern können Zuschnitt und Fokus angepasst werden. Die Höhe der Komponente bleibt dabei unverändert, da diese systemseitig fest definiert ist.
Bei Videos stehen die bekannten Wiedergabeoptionen zur Verfügung:
Autoplay
Controls
Loop
Deaktivierung des Play-Buttons
Poster-Bild (bei Videos aus dem Media Archive)
Zusätzlich kann ein dunkler Overlay oder ein dunkler Verlauf aktiviert werden, um die Lesbarkeit der Typografie zu verbessern. Diese Funktion verhält sich identisch wie in der Carousel- oder Seitenheader-Komponente.
Textausrichtung
Die Positionierung aller Textelemente kann wie folgt gewählt werden:
zentriert
oben links
unten links
Die gewählte Position beeinflusst maßgeblich die visuelle Wirkung und sollte in Kombination mit dem gewählten Visual bedacht werden.
Badge
Der Badge kann ein- oder ausgeblendet und mit den üblichen Verlinkungsoptionen versehen werden.
Wichtig: Die Farbe des Badges wird automatisch aus der Hintergrundfarbe der Hauptfarben des Colored-Farbschemas übernommen und kann nicht separat definiert werden.
Button
Die Komponente enthält einen einzelnen Button, der ein- oder ausgeblendet werden kann. Der Button kann mit allen üblichen Verlinkungsoptionen versehen werden, und der Buttontext ist frei definierbar.
Datum, Headline & Subline
Datum, Headline und Subline lassen sich jeweils ein- oder ausblenden.
Farbschema
Für die gesamte Key Visual Komponente kann ein Farbschema angewendet werden. Dieses beeinflusst:
die Typografie
die Button-Darstellung
die Hintergrundwirkung
Die Badge-Farbe ist hiervon ausgenommen und richtet sich automatisch nach dem Colored-Farbschema.
Tipps & Tricks
Wähle ruhige, kontrastreiche Visuals, da Text direkt auf dem Bild liegt.
Nutze Overlay oder Verlauf gezielt, um Lesbarkeit zu sichern.
Halte Headline und Buttontext prägnant.
Setze die Komponente bewusst ein, da sie durch ihre Full-Width-Darstellung sehr dominant wirkt.