Stage Stable New variant Dark theme
A stage is used for a conspicuous entrance, for example on the website. It is recommended for displaying one or more campaign visuals and claims on top of the content.
<uimc-stage>
<uimc-stage-item
headline=""
description=""
>
<img src="/ui-marcom/version/3.1" alt="">
</uimc-stage-item>
</uimc-stage>Stage
| Attribute | Description | Values | Default |
|---|---|---|---|
| config | Slider configuration options | JSON Object | {type: 'carousel', perView: 1, startAt: '0', keyboard: true} |
| Slot | Slotted content |
|---|---|
| default | Slot a <uimc-stage-item> for each slide |
Stage item
| Attribute | Description | Values | Default |
|---|---|---|---|
| headline | Text of the big headline | – | |
| description | Text below the headline | – | |
| button-label | Label on the call-to-action button | – | |
| url | Sets the link for the call-to-action button | valid URL | – |
| theme | Optionally choose white background color | dark, light | dark |
| covered | Apply covered style with a gradient on the image | – | – |
| Slot | Slotted content |
|---|---|
| default | The slot is solely intended for an <img> |
Stage containing a keyvisual and an editorial slide
<uimc-stage>
<uimc-stage-item
headline="Shaping the future"
description="Lorem ipsum, dolor sit amet consectetur adipisicing elit."
button-label="Label"
url="#"
>
<img src="/ui-marcom/version/3.1/assets/img/keyvisuals/keyvisual_ld.jpg" alt="">
</uimc-stage-item>
<uimc-stage-item
headline="Welcome to the MedMuseum"
description="Lorem ipsum, dolor sit amet consectetur adipisicing elit."
button-label="Label"
url="#"
theme="light"
>
<img src="/ui-marcom/version/3.1/assets/img/aspect-ratios/stage02-21x9.jpg" alt="">
</uimc-stage-item>
</uimc-stage>Covered Stage
<uimc-stage>
<uimc-stage-item
headline="Shaping the future"
description="Lorem ipsum, dolor sit amet consectetur adipisicing elit."
button-label="Label"
url="#"
covered
>
<img src="/ui-marcom/version/3.1/assets/img/aspect-ratios/covered-stage-4x3.jpg" alt="">
</uimc-stage-item>
</uimc-stage>White Covered Stage
<uimc-stage>
<uimc-stage-item
headline="Shaping the future"
description="Lorem ipsum, dolor sit amet consectetur adipisicing elit."
button-label="Label"
url="#"
theme="light"
covered
>
<img src="/ui-marcom/version/3.1/assets/img/aspect-ratios/stage02-21x9.jpg" alt="">
</uimc-stage-item>
</uimc-stage>