Stage Stable

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.

Usage Code

Stage containing a keyvisual and an editorial slide

Shaping the future of healthcare

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magn

Welcome to the MedMuseum

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magn

<div class="carousel stage js-stage" data-carousel-config='{"arrows":false,"dots":true,"autoplay":false,"autoplaySpeed":7500}'>
    <div class="stage-item">
      <a class="stage-slide " href="#">
        <div class="container stage-slide__image-container">
          <div class="row">
              <div class="stage-slide__image col offset-lg-6 offset-xl-5 aspect--cover-fallback aspect-4x3 aspect-md-16x9" style="background-image: url( /ui-marcom/version/2.2//assets/img/keyvisuals/keyvisual_ld.jpg)">
                <img src="/ui-marcom/version/2.2//assets/img/keyvisuals/keyvisual_ld.jpg" alt="" />
              </div>
          </div>
        </div>
        <div class="stage-slide__content">
          <div class="container">
            <div class="row">
              <div class="col-9 offset-3 col-lg-4 offset-lg-1 col-xl-3 offset-xl-1">
                <div class="stage-slide__pulse">
                   <div class="dot-pulse">
                    <div class="dot-pulse__item"></div>
                    <div class="dot-pulse__item"></div>
                    <div class="dot-pulse__item"></div>
                    <div class="dot-pulse__item"></div>
                    <div class="dot-pulse__item"></div>
                    <div class="dot-pulse__item"></div>
                    <div class="dot-pulse__item"></div>
                  </div>                </div>
              </div>
            </div>
            <div class="row">
              <div class="col-12 col-lg-5 col-xl-4 offset-xl-0">
                <h1 class="stage-slide__title">Shaping the future of healthcare</h1>
                <p class="stage-slide__description h6">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magn</p>
                <button class="button button--primary stage-slide__button">Button text</button>
              </div>
            </div>
          </div>
        </div>
      </a>
    </div>
    <div class="stage-item">
      <a class="stage-slide stage-slide--white" href="#">
        <div class="container stage-slide__image-container">
          <div class="row">
              <div class="stage-slide__image col offset-lg-6 offset-xl-5 aspect--cover-fallback aspect-4x3 aspect-md-16x9" style="background-image: url( /ui-marcom/version/2.2//assets/img/aspect-ratios/stage02-21x9.jpg)">
                <img src="/ui-marcom/version/2.2//assets/img/aspect-ratios/stage02-21x9.jpg" alt="" />
              </div>
          </div>
        </div>
        <div class="stage-slide__content">
          <div class="container">
            <div class="row">
              <div class="col-9 offset-3 col-lg-4 offset-lg-1 col-xl-3 offset-xl-1">
                <div class="stage-slide__pulse">
                   <div class="dot-pulse">
                    <div class="dot-pulse__item"></div>
                    <div class="dot-pulse__item"></div>
                    <div class="dot-pulse__item"></div>
                    <div class="dot-pulse__item"></div>
                    <div class="dot-pulse__item"></div>
                    <div class="dot-pulse__item"></div>
                    <div class="dot-pulse__item"></div>
                  </div>                </div>
              </div>
            </div>
            <div class="row">
              <div class="col-12 col-lg-5 col-xl-4 offset-xl-0">
                <h1 class="stage-slide__title">Welcome to the MedMuseum</h1>
                <p class="stage-slide__description h6">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magn</p>
                <button class="button button--primary stage-slide__button">Button text</button>
              </div>
            </div>
          </div>
        </div>
      </a>
    </div>
</div>