Stage

    Overview

    When to use

    The stage can be used to promote different topics, products or productlines. Typically it is at the top of a page. It contains a background image, a hedaline, a text and a button. To promote a product or a productline a packshot (featured image) and the diagonal as a design element can be displayed.

    When to consider an alternative

    t.b.d

    Image sizes

    Parent Elementbrp-0brp-1brp-2brp-3brp-4
    Stage Background1:13:221:921:921:9
    Max. Height480px520px430px520px700px
    Featured Image Max. Height200px250px350px420px480px

    Component

    Default

    1024px
    375px768px1400px
    1024px
    375px768px1400px

    Invert

    1024px
    375px768px1400px

    Cobrand-Image

    1024px
    375px768px1400px

    Properties

    Stage

    PropertyTypeRequiredDefault
    inGridBoolfalse-
    invertBoolfalse-
    utilClassNamesStringfalse-
    childrenUnion
    Class(Stage.Header) │ Class(Stage.Body) │ Class(Stage.Tagline) │ Class(Stage.FeaturedImage) │ Class(Stage.CobrandImage) │ Array<Class(Stage.Header) │ Class(Stage.Body) │ Class(Stage.Tagline) │ Class(Stage.FeaturedImage) │ Class(Stage.CobrandImage)>
    false-

    Stage.Body Props

    PropertyTypeRequiredDefault
    childrenNodefalse-

    Stage.Header Props

    PropertyTypeRequiredDefault
    childrenNodefalse-

    Stage.Image Props

    PropertyTypeRequiredDefault
    childrenNodefalse-

    Stage.Tagline Props

    PropertyTypeRequiredDefault
    childrenNodefalse-

    Stage.FeaturedImage Props

    PropertyTypeRequiredDefault
    childrenNodefalse-

    Stage.CobrandImage Props

    PropertyTypeRequiredDefault
    childrenNodefalse-