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 Element | brp-0 | brp-1 | brp-2 | brp-3 | brp-4 |
|---|---|---|---|---|---|
| Stage Background | 1:1 | 3:2 | 21:9 | 21:9 | 21:9 |
| Max. Height | 480px | 520px | 430px | 520px | 700px |
| Featured Image Max. Height | 200px | 250px | 350px | 420px | 480px |
Component
Default
1024px
375px768px1400px
Featured Image
1024px
375px768px1400px
Invert
1024px
375px768px1400px
Cobrand-Image
1024px
375px768px1400px
Properties
Stage
| Property | Type | Required | Default |
|---|---|---|---|
| inGrid | Bool | false | - |
| invert | Bool | false | - |
| utilClassNames | String | false | - |
| children | Union 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
| Property | Type | Required | Default |
|---|---|---|---|
| children | Node | false | - |
Stage.Header Props
| Property | Type | Required | Default |
|---|---|---|---|
| children | Node | false | - |
Stage.Image Props
| Property | Type | Required | Default |
|---|---|---|---|
| children | Node | false | - |
Stage.Tagline Props
| Property | Type | Required | Default |
|---|---|---|---|
| children | Node | false | - |
Stage.FeaturedImage Props
| Property | Type | Required | Default |
|---|---|---|---|
| children | Node | false | - |
Stage.CobrandImage Props
| Property | Type | Required | Default |
|---|---|---|---|
| children | Node | false | - |