Teaser Promo

Overview

When to use

t.b.d

When to consider an alternative

t.b.d

Background image Sizes

In most cases the dimension of the teaser promo is given by it's parent element. The following table shows wich aspect ration for the background image fits in the diffenrent breakpoint of the possible parent element.

Parent Element	brp-0	brp-1	brp-2	brp-3	brp-4
In Element-Listing default width Background	1:1 480px	1:1 767px	1:1 480px	1:1 600px	- -
With modifier `.teaser-promo--size-full`width background	1:1 480px	1:1 767px	21:9 900px	21:9 1180px	- -

Component

Default squared aspect-ratio for Element-Listing col2 or col3

Default state to feature all types of contents and functions, which are not a product or productseries.

Featured Image

This type should be used to feature a product or productseries. In this case a packshot of the product is displayed as the featured image.

Cobrand Image

Size full

Invert

Size XL

cover

Properties

TeaserPromo

Property	Type	Required	Default
href	String	false	-
sizeXl	Bool	false	-
sizeFull	Bool	false	-
invert	Bool	false	-
featuredImage	String	false	-
utilClassNames	Node	false	-

TeaserPromo.Image

Property	Type	Required	Default
children	Node	false	-
utilClassNames	String	false	-

TeaserPromo.Header

Property	Type	Required	Default
children	Node	false	-
utilClassNames	String	false	-

TeaserPromo.Wrapper

Property	Type	Required	Default
children	Node	false	-
utilClassNames	String	false	-

TeaserPromo.Body

Property	Type	Required	Default
children	Node	false	-
utilClassNames	String	false	-

TeaserPromo.Description

Property	Type	Required	Default
children	Node	false	-
utilClassNames	String	false	-

TeaserPromo.FeaturedImage

Property	Type	Required	Default
children	Node	false	-
utilClassNames	String	false	-