Skip to main content

Carousel Component

Present content in a full-width slider format and link visual teasers to deeper pages.

Updated over 2 weeks ago

The Carousel Component spans the full width of the page and always displays two elements at the same time. A narrow space in the background color separates the two elements visually.

Additional elements are accessed exclusively through manual navigation using the arrow controls.

There is no automatic slide transition.


Basic Principle

Each element consists of:

  • a background visual (image, video from the Media Archive, or web video)

  • an optional headline

  • an optional date

The entire element functions as a link.

The image proportions are fixed. Optionally, a 16:9 format can be activated for the entire component.


What Really Matters

Headline Length

There is no technical character limit for the headline. However, since it is placed directly on the background visual, it should be kept deliberately short. Overly long headlines can cover large portions of the image, significantly reduce its visual impact, and affect readability. A concise and clearly formulated headline ensures that both text and image retain their intended effect.


Overlay & Gradient

Because the text is positioned directly on the visual, you can activate:

  • dark overlay

  • dark gradient

These should be used intentionally to ensure sufficient contrast and readability, especially when working with bright or detailed images.


Image Cropping

The focus and cropping of the image significantly influence the overall visual impact.

Since two elements are always displayed side by side, the crop should be chosen carefully to prevent important visual content from being cut off.


Color Scheme

A dedicated color scheme can be applied to the entire component. It affects both the typography and the background area between the two visible elements. The selection should be made deliberately to ensure sufficient contrast between the headline and the visual and to improve text readability.


Tips & Tricks

  • Use visually calm images with a clear focal point.

  • Keep headlines short.

  • Test overlay settings in combination with image focus.

  • Maintain a consistent visual style across multiple elements.

Did this answer your question?