HTML-Prototype der OTH-Regensburg

Markup: templates/output/06-components/teaserbox-slider/teaserbox-slider.html

<div class="c-teaserbox-slider">
  <div class="c-teaserbox-slider__header o-flex-line o-flex-line--between o-flex-line--items-center">
    <h2 class="c-teaserbox-slider__headline">Aktuelle Themen</h2>
    <div class="c-slider-controls o-flex-line">
      <button class="btn btn--arrow btn--arrow-left c-slider-controls__button c-slider-controls__button--prev" title="Previous slide">
        <svg viewBox="0 0 13.455 24.081" role="img" aria-hidden="true" focusable="false">
          <use xlink:href="Images/svg/sprite.symbol.svg#icon-chevron-left"></use>
        </svg>
      </button>
      <button class="btn btn--arrow btn--arrow-right c-slider-controls__button c-slider-controls__button--next" title="Next slide">
        <svg viewBox="0 0 13.455 24.081" role="img" aria-hidden="true" focusable="false">
          <use xlink:href="Images/svg/sprite.symbol.svg#icon-chevron-right"></use>
        </svg>
      </button>
    </div>
  </div>
  <div class="c-teaserbox-slider__slides-container">
    <div class="c-teaserbox-slider__slides">
      <div class="c-teaserbox-slider__slide">
        <a class="c-teaserbox__link" href="#">
          <div class="c-teaserbox">
            <div class="c-teaserbox__content-wrap">
              <div class="c-teaserbox__text-wrap">
                <h3 class="c-teaserbox__title">Unser Ziel: 100% Präsenzvorlesungen</h3>
                <div class="c-teaserbox__text">
                  <p>Warum OTH? Regional und doch urban. Top Professoren und Spaß am Studium.</p>
                </div>
              </div>
              <div class="c-teaserbox__button"><span class="btn btn--icon-left">
                  <svg viewBox="0 0 36 36.111" role="img" aria-hidden="true" focusable="false">
                    <use xlink:href="Images/svg/sprite.symbol.svg#icon-idea"></use>
                  </svg><span class="btn__text">Mehr erfahren</span></span></div>
            </div>
          </div>
        </a>
      </div>
      <div class="c-teaserbox-slider__slide">
        <a class="c-teaserbox__link" href="#">
          <div class="c-teaserbox">
            <div class="c-teaserbox__content-wrap">
              <div class="c-teaserbox__text-wrap">
                <h3 class="c-teaserbox__title">Bayerns Top-Geeks</h3>
                <div class="c-teaserbox__text">
                  <p>Unsere Fakultät Informatik und Mathematik belegt im CHE Ranking 2022 erneut Platz 1 in Bayern.</p>
                </div>
              </div>
              <div class="c-teaserbox__button"><span class="btn btn--icon-left">
                  <svg viewBox="0 0 36 36.111" role="img" aria-hidden="true" focusable="false">
                    <use xlink:href="Images/svg/sprite.symbol.svg#icon-idea"></use>
                  </svg><span class="btn__text">Mehr erfahren</span></span></div>
            </div>
          </div>
        </a>
      </div>
      <div class="c-teaserbox-slider__slide">
        <a class="c-teaserbox__link" href="#">
          <div class="c-teaserbox">
            <div class="c-teaserbox__content-wrap">
              <div class="c-teaserbox__text-wrap">
                <h3 class="c-teaserbox__title">Dies ist ein Typoblindtext. An ihm kann man sehen</h3>
                <div class="c-teaserbox__text">
                  <p>Dies ist ein Typoblindtext. An ihm kann man sehen, ob alle Buchstaben da sind und wie sie aussehen. Manchmal benutzt man</p>
                </div>
              </div>
              <div class="c-teaserbox__button"><span class="btn btn--icon-left">
                  <svg viewBox="0 0 36 36.111" role="img" aria-hidden="true" focusable="false">
                    <use xlink:href="Images/svg/sprite.symbol.svg#icon-idea"></use>
                  </svg><span class="btn__text">Mehr erfahren</span></span></div>
            </div>
          </div>
        </a>
      </div>
      <div class="c-teaserbox-slider__slide">
        <a class="c-teaserbox__link" href="#">
          <div class="c-teaserbox">
            <div class="c-teaserbox__content-wrap">
              <div class="c-teaserbox__text-wrap">
                <h3 class="c-teaserbox__title">Überall dieselbe alte Leier. Das Layout</h3>
                <div class="c-teaserbox__text">
                  <p>Überall dieselbe alte Leier. Das Layout ist fertig, der Text lässt auf sich warten. Damit das Layout nun nicht nackt im.</p>
                </div>
              </div>
              <div class="c-teaserbox__button"><span class="btn btn--icon-left">
                  <svg viewBox="0 0 36 36.111" role="img" aria-hidden="true" focusable="false">
                    <use xlink:href="Images/svg/sprite.symbol.svg#icon-idea"></use>
                  </svg><span class="btn__text">Mehr erfahren</span></span></div>
            </div>
          </div>
        </a>
      </div>
      <div class="c-teaserbox-slider__slide">
        <a class="c-teaserbox__link" href="#">
          <div class="c-teaserbox">
            <div class="c-teaserbox__content-wrap">
              <div class="c-teaserbox__text-wrap">
                <h3 class="c-teaserbox__title">Li Europan lingues es membres del sam familie. Lor separat existentie es un</h3>
                <div class="c-teaserbox__text">
                  <p>aäb cde fgh ijk lmn oöp qrsß tuü vwx yz AÄBC DEF GHI JKL MNO ÖPQ RST</p>
                </div>
              </div>
              <div class="c-teaserbox__button"><span class="btn btn--icon-left">
                  <svg viewBox="0 0 36 36.111" role="img" aria-hidden="true" focusable="false">
                    <use xlink:href="Images/svg/sprite.symbol.svg#icon-idea"></use>
                  </svg><span class="btn__text">Mehr erfahren</span></span></div>
            </div>
          </div>
        </a>
      </div>
    </div>
  </div>
</div>
Source: assets/sass/06-components/teaserbox/_components.teaserbox-slider.scss, line 7