The Key Visual Component is a full-width media component that always spans the entire width of the page. It is particularly suitable for visually dominant page entries, call-to-action areas, or as a structural element within a page.
Unlike other components, it is always displayed in Full Width. There are no Default or Wide options. The height of the component is fixed and cannot be adjusted.
The visual is placed entirely behind the typography. Therefore, special attention should be paid to contrast and readability when selecting the visual.
Structure of the Component
The Key Visual Component can include:
an image, video, or web video
an optional date
a headline
a subline
a badge
a button
All elements can be flexibly shown or hidden.
Visual Settings
Under “Visual,” you define whether an image, a video from the Media Archive, or a web video is used.
For images, cropping and focus can be adjusted. The height of the component remains unchanged, as it is system-defined.
For videos, the following playback options are available:
Autoplay
Controls
Loop
Disable Play button
Poster image (for videos from the Media Archive)
Additionally, a dark overlay or dark gradient can be activated to improve typography readability. This function behaves identically to the Carousel or Page Header components.
Text Alignment
The positioning of all text elements can be set to:
centered
top left
bottom left
The chosen position significantly affects the visual impact and should be considered in combination with the selected visual.
Badge
The badge can be shown or hidden and assigned the usual linking options.
Important: The badge color is automatically derived from the background color of the primary colors in the Colored color scheme and cannot be defined separately.
Button
The component contains a single button that can be shown or hidden. The button supports all standard linking options, and the button text can be defined freely.
Date, Headline & Subline
The date, headline, and subline can each be shown or hidden.
Color Scheme
A color scheme can be applied to the entire Key Visual Component. This affects:
typography
button appearance
The badge color is excluded from this and automatically follows the Colored color scheme.
Tips & Tricks
Choose calm, high-contrast visuals, as text is placed directly on the image.
Use overlay or gradient deliberately to ensure readability.
Keep the headline and button text concise.
Use the component intentionally, as its full-width display makes it very visually dominant.