HTML-Prototype von TUM Campus Heilbronn

<div class="page">
  <main class="page__content">
    <!-- Grid/ Element container-->
    <div class="frame frame-type- frame-space-before-none frame--full frame--background frame--grey-medium" id="c000001">
      <!-- Grid/ Element container-->
      <div class="frame frame-type-frame frame--small" id="c">
        <!-- Grid/ Element header-->
        <header class="frame__header">
          <h2>Logo Slider in small width container</h2>
        </header>
        <div class="c-slider c-logo-slider">
          <section class="splide c-slider__section" aria-label="Logos">
            <div class="c-slider__track splide__track">
              <ul class="c-slider__list splide__list">
                <li class="c-slider__slide splide__slide">
                  <div class="c-logo-slide"><a href="#" title="Title"><img src="https://placeholder.in2code.de/159x71" alt="Logo" title="Logo"/></a></div>
                </li>
                <li class="c-slider__slide splide__slide">
                  <div class="c-logo-slide"><a href="#" title="Title"><img src="https://placeholder.in2code.de/197x32" alt="Logo" title="Logo"/></a></div>
                </li>
                <li class="c-slider__slide splide__slide">
                  <div class="c-logo-slide"><a href="#" title="Title"><img src="https://placeholder.in2code.de/176x78" alt="Logo" title="Logo"/></a></div>
                </li>
                <li class="c-slider__slide splide__slide">
                  <div class="c-logo-slide"><a href="#" title="Title"><img src="https://placeholder.in2code.de/213x72" alt="Logo" title="Logo"/></a></div>
                </li>
                <li class="c-slider__slide splide__slide">
                  <div class="c-logo-slide"><a href="#" title="Title"><img src="https://placeholder.in2code.de/197x70" alt="Logo" title="Logo"/></a></div>
                </li>
                <li class="c-slider__slide splide__slide">
                  <div class="c-logo-slide"><a href="#" title="Title"><img src="https://placeholder.in2code.de/197x93" alt="Logo" title="Logo"/></a></div>
                </li>
                <li class="c-slider__slide splide__slide">
                  <div class="c-logo-slide"><a href="#" title="Title"><img src="https://placeholder.in2code.de/157x72" alt="Logo" title="Logo"/></a></div>
                </li>
                <li class="c-slider__slide splide__slide">
                  <div class="c-logo-slide"><a href="#" title="Title"><img src="https://placeholder.in2code.de/152x72" alt="Logo" title="Logo"/></a></div>
                </li>
              </ul>
            </div>
            <div class="c-slider__arrows splide__arrows">
              <button class="c-slider__button c-slider__arrow c-slider__arrow--prev splide__arrow splide__arrow--prev" type="button">
                <svg width="26px" height="26px" viewBox="0 0 16 16" aria-hidden="true" focusable="false">
                  <use xlink:href="Images/svg/sprite.symbol.svg#icon-chevron-left"></use>
                </svg>
              </button>
              <div class="c-slider__pagination splide__pagination"></div>
              <button class="c-slider__button c-slider__arrow c-slider__arrow--next splide__arrow splide__arrow--next" type="button">
                <svg width="26px" height="26px" viewBox="0 0 16 16" aria-hidden="true" focusable="false">
                  <use xlink:href="Images/svg/sprite.symbol.svg#icon-chevron-right"></use>
                </svg>
              </button>
              <button class="c-slider__autoplay-button" type="button" aria-pressed="false" aria-label="Play video" data-play="Play video" data-pause="Pause video"></button>
            </div>
          </section>
        </div>
      </div>
    </div>
  </main>
</div>