Spotlight teaser component

Compact style

Desktop view

Mobile view

Live example

Created example

Full bleed style - Light mode (default)

Desktop view

Mobile view

Live example

Created example

Full bleed style - Dark mode

Desktop view

Mobile view

Live example

Created example

Full bleed info-block style

Desktop view

Mobile view

Created example

Narrow style

Desktop view

Mobile view

Live example

Created example

How it works

The component supports different style options
- Compact (default)
- Full bleed
- Full bleed info-block
- Narrow
The component displays
- Image
- Section title
- Title
- Text
- Link
- 1 to 4 teasers (only if Full bleed info-block style is selected)
- Statistics (only if Narrow option is selected)

The styles differ for larger screens (M and above) and remains the same for smaller viewports (XS and S).

Compact style

Image height is fixed per viewport
- XS = 150px,
- S = 370px,
- M = 500px,
- L (and larger) = 600px
Image position can be on the left or right
Option to display a video icon in a target link
Background color can be defined

Full bleed style

Image height is fixed per viewport
- XS = 150px,
- S = 370px,
- M = 500px,
- L = 600px,
- XL = 700px,
- XXL( 1920 px) and larger = 930px
Option to display a video icon in a target link
Dark mode
White font color and fixed black background color for XS viewport
Since the text is displayed in front of the image in the desktop view, make sure that it is readable (accessible).

Full bleed info-block style

One to four teasers can be integrated
Image height is fixed per viewport
- XS = 150px,
- S = 370px,
- M = 500px,
- L = 600px,
- XL = 700px,
- XXL( 1920 px) and larger = 930px
Since the text is displayed in front of the image in the desktop view, make sure that it is readable (accessible).

Narrow style

Image height is fixed per viewport
- XS = 150px,
- S = 370px,
- M = 700px,
- L (and larger) = 800px
Image position can be on the left or right
In the narrow style a featured statistics component can be integrated
Option to display a video icon in a target link
Background color can be defined

How to use it

With the large image and the integrated text, a very large attention can be achieved. Therefore, this component should be present only selectively and not several times on a page.