UI MarCom

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

AttributeDescriptionValuesDefault
configSlider configuration optionsJSON Object{type: 'carousel', perView: 1, startAt: '0', keyboard: true}

SlotSlotted content
defaultSlot a <uimc-stage-item> for each slide

Stage item

AttributeDescriptionValuesDefault
headlineText of the big headline
descriptionText below the headline
button-labelLabel on the call-to-action button
urlSets the link for the call-to-action buttonvalid URL
themeOptionally choose white background colordark, lightdark
coveredApply covered style with a gradient on the image

SlotSlotted content
defaultThe 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>