The component can include:
a headline (can be shown or hidden)
a subheadline (can be shown or hidden)
multiple teaser items
Each item typically consists of:
an image or video
an optional date (can be shown or hidden)
a headline
a link
All standard linking options are available.
Display & Layout
Teaser items can be displayed as:
Grid
Carousel
In grid layout, items automatically wrap into new rows once a certain number is reached (typically after four items per row).
In carousel layout, items can be navigated horizontally.
Two visual display options are available:
Image above the headline
Image as background, with the headline displayed directly on top of the image
When using the background option, special attention should be paid to typography readability.
Media & Customization
Within each item, you can:
select images from the media library
adjust the image crop and set the focal point
embed videos from the media library or web videos
enable a Dark Overlay or Dark Gradient to improve text readability
Dark overlay vs dark Gradient
Date and headline can optionally be hidden, allowing the item to function purely as a visual link element.
The component’s color scheme can be adjusted. When placing text on images, ensure sufficient contrast for readability.
Tips & Tricks
You can create an unlimited number of items.
In grid layout, items automatically wrap depending on the number of elements (typically four per row).
Pay close attention to contrast and typography readability when using background images.
Use Dark Overlay or Dark Gradient strategically when text is placed directly on an image.