HTML-Prototype von Hochschule RheinMain

<div class="c-slider c-slider--teaser">
  <section class="splide c-slider__section" aria-label="Teaser">
    <div class="c-slider__buttons splide__arrows container">
      <button class="c-slider__button c-slider__arrow c-slider__button--prev splide__arrow splide__arrow--prev" type="button">
              <svg class="c-slider__icon" viewBox="0 0 16 16" aria-hidden="true" focusable="false" style="pointer-events: none;" width="24px" height="24px">
                <use xlink:href="/Images/svg/sprite.symbol.svg#chevron-left"></use>
              </svg>
      </button>
      <button class="splide__toggle c-slider__button--toggle c-slider__button" type="button">
              <svg class="c-slider__icon splide__toggle__play" viewBox="0 0 16 16" aria-hidden="true" focusable="false" style="pointer-events: none;" width="24px" height="24px">
                <use xlink:href="/Images/svg/sprite.symbol.svg#play"></use>
              </svg>
              <svg class="c-slider__icon splide__toggle__pause" viewBox="0 0 16 16" aria-hidden="true" focusable="false" style="pointer-events: none;" width="24px" height="24px">
                <use xlink:href="/Images/svg/sprite.symbol.svg#pause"></use>
              </svg>
      </button>
      <div class="c-slider__pagination splide__pagination"></div>
      <button class="c-slider__button c-slider__arrow c-slider__button--next splide__arrow splide__arrow--next" type="button">
              <svg class="c-slider__icon" viewBox="0 0 16 16" aria-hidden="true" focusable="false" style="pointer-events: none;" width="24px" height="24px">
                <use xlink:href="/Images/svg/sprite.symbol.svg#chevron-right"></use>
              </svg>
      </button>
    </div>
    <div class="c-slider__track splide__track">
      <ul class="c-slider__list splide__list">
        <li class="c-slider__slide splide__slide">
          <div class="c-teaser">
            <div class="container c-teaser__container">
              <div class="c-teaser__media-wrapper">
                <picture>
                  <source srcset="https://placeholder.in2code.de/1200x675" media="(min-width:800px)"/>
                  <source srcset="https://placeholder.in2code.de/8004500" media="(min-width:0)"/><img class="c-teaser__media" src="https://placeholder.in2code.de/1200x675" alt="Alt Text"/>
                </picture>
              </div>
              <div class="c-teaser__content">
                <div class="c-teaser__heading">Teaser with <span class="u-highlight">image</span> aligned <span class="u-highlight">right</span> in slider
                </div>
                <p class="c-teaser__text">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat?</p><a class="btn btn--primary btn--right-link c-teaser__button" href="#">mehr erfahren</a>
              </div>
            </div>
          </div>
        </li>
        <li class="c-slider__slide splide__slide">
          <div class="c-teaser">
            <div class="container c-teaser__container">
              <div class="c-teaser__media-wrapper">
                <picture>
                  <source srcset="https://placeholder.in2code.de/1200x675" media="(min-width:800px)"/>
                  <source srcset="https://placeholder.in2code.de/8004500" media="(min-width:0)"/><img class="c-teaser__media" src="https://placeholder.in2code.de/1200x675" alt="Alt Text"/>
                </picture>
              </div>
              <div class="c-teaser__content">
                <div class="c-teaser__heading">Teaser with <span class="u-highlight">more text</span>
                </div>
                <p class="c-teaser__text">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.</p><a class="btn btn--primary btn--right-link c-teaser__button" href="#">mehr erfahren</a>
              </div>
            </div>
          </div>
        </li>
        <li class="c-slider__slide splide__slide">
          <div class="c-teaser">
            <div class="container c-teaser__container">
              <div class="c-teaser__media-wrapper">
                <picture>
                  <source srcset="https://placeholder.in2code.de/1200x675" media="(min-width:800px)"/>
                  <source srcset="https://placeholder.in2code.de/8004500" media="(min-width:0)"/><img class="c-teaser__media" src="https://placeholder.in2code.de/1200x675" alt="Alt Text"/>
                </picture>
              </div>
              <div class="c-teaser__content">
                <div class="c-teaser__heading">Teaser Slide with <span class="u-highlight">short text</span>
                </div>
                <p class="c-teaser__text">Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</p><a class="btn btn--primary btn--right-link c-teaser__button" href="#">mehr erfahren</a>
              </div>
            </div>
          </div>
        </li>
      </ul>
    </div>
  </section>
</div>