Skip to:
;Resize=(240,200))
Teaser component examples
The teaser component contains a full-width image, which is pulled from the asset bank (TAB). This component can be used to present full-width images anywhere on the page but is usually positioned at the top below the main header navigation.
Note: Check the various style options such as padding are available within the component or by clicking paintbrush.
Variant 1
The image banner has a title, pre-title in green and with an optional description
Rendition type: Landscape Desktop & Mobile
The image will be displayed in landscape for both desktop & mobile
Rendition type: Landscape Desktop & Square Mobile
The image will be displayed in landscape for desktop and as a square in mobile
Please change the view to mobile to see the rendition. A mobile asset can be configured within the component.
Rendition type: Landscape Desktop & Portrait Mobile
The image will be displayed in landscape for desktop and as a portrait in mobile
A different mobile asset has been used for this example, please change the view to mobile to see the rendition.
Variant 2.a
Image as a background banner and live text on top with CTA
Variant 2.b
Preheading used in this variant
Variant 3
Image as a background but text is filled with green overlay and white font.
Prerequisits
- Disable lazy loading should be checked if the image is above the fold for any page.
- Upload original image for desktop 2880x1200 px in Tiff format. By default, the same image is used on mobile.
- Enable mobile asset to use a different image for mobile view. In this case provide an additional TAB id (recommended dimension: 1000x1000 px)
- When transparency is not needed, always use the jpg image on the page as it’s better for site speed. Only when transparency is needed, then use pngs.