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 Elementbrp-0brp-1brp-2brp-3brp-4
    In Element-Listing default Max. Height Background2:1 225px21:9 316px3:2 280px2:1 280px3:2 385px
    In Element-Listing three columns Max. Height Background2:1 225px21:9 316px3:2 280px2:1 250px1:1 385px
    Default in Element-Listing masonry Max. Height Background3:2 300px21:9 316px21:9 400px21:9 250px21:9 250px
    With modifier .teaser-promo--size-full Max. Height Background Max. Height Featured Image3:2 300px 190px21:9 316px 240px21:9 400px 280px21:9 480px 345px21:9 530px 380px
    With modifier .teaser-promo--size-xl in Element-Listing masonry Max. Height Background Max. Height Featured Image3:2 300px 190px21:9 316px 240px21:9 400px 280px1:1 550px 295px1:1 550px 320px
    In Slider for Series and Productlisting Max. Height Background Max. Height Featured Image3:2 300px 190px21:9 316px 240px21:9 400px 240px1:1 560px 220px1:1 560px 210px

    Component

    Default

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

    1024px
    375px768px1400px

    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.

    1024px
    375px768px1400px

    Cobrand Image

    1024px
    375px768px1400px

    Size full

    1024px
    375px768px1400px

    Invert

    1024px
    375px768px1400px

    Size XL

    1024px
    375px768px1400px

    Properties

    TeaserPromo

    PropertyTypeRequiredDefault
    sizeXlBoolfalse-
    sizeFullBoolfalse-
    invertBoolfalse-
    utilClassNamesStringfalse-
    childrenUnion
    Class(TeaserPromo.Header) │ Class(TeaserPromo.Image) │ Class(TeaserPromo.Body) │ Class(TeaserPromo.Wrapper) │ Class(TeaserPromo.Description) │ Class(TeaserPromo.FeaturedImage) │ Class(TeaserPromo.CobrandImage) │ Array<Class(TeaserPromo.Header) │ Class(TeaserPromo.Image) │ Class(TeaserPromo.Body) │ Class(TeaserPromo.Wrapper) │ Class(TeaserPromo.Description) │ Class(TeaserPromo.FeaturedImage) │ Class(TeaserPromo.CobrandImage)>
    false-

    TeaserPromo.Image

    PropertyTypeRequiredDefault
    childrenNodefalse-

    TeaserPromo.Header

    PropertyTypeRequiredDefault
    childrenNodefalse-

    TeaserPromo.Wrapper

    PropertyTypeRequiredDefault
    childrenNodefalse-

    TeaserPromo.Body

    PropertyTypeRequiredDefault
    childrenNodefalse-

    TeaserPromo.Description

    PropertyTypeRequiredDefault
    childrenNodefalse-

    TeaserPromo.FeaturedImage

    PropertyTypeRequiredDefault
    childrenNodefalse-