HTML-Prototype der OTH-Regensburg

<div class="c-teaserbox-slider c-teaserbox-slider--news">
  <div class="o-grid o-grid-1-1@desktop">
    <h2 class="c-teaserbox-slider__headline">News</h2>
    <div class="o-flex-line o-flex-line--items-end o-flex-line--end">
      <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>
  <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 c-teaserbox--news o-grid o-grid-1-1 o-grid--nogutter">
            <div class="c-teaserbox__image-wrap">
              <picture class="c-teaserbox__image">
                <source srcset="https://picsum.photos/id/1070/640/320" media="(min-width:640px)"/>
                <source srcset="https://picsum.photos/id/1070/320/160" media="(min-width:0)"/><img class="image__default" src="https://picsum.photos/id/1070/640/320" alt="Lorem ipsum dolor sit amet." width="640" height="320"/>
              </picture>
            </div>
            <div class="c-teaserbox__content-wrap">
              <div class="c-teaserbox__text-wrap">
                <h3 class="c-teaserbox__title">News Headline Donec pede justo, fringilla vel, aliquet nec</h3>
                <div class="c-teaserbox__text">
                  <p class="u-line-clamp-3"><strong class="u-text-gull-gray u-mr-tiny">12.03.2022</strong><span>In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.  Nullam dictum felis eu pede mollis pretium.</span></p>
                </div>
                <p class="c-teaserbox__keywords">
                  <svg class="u-mr-tiny" viewBox="0 0 36 36" role="img" aria-hidden="true" focusable="false">
                    <use xlink:href="Images/svg/sprite.symbol.svg#icon-tag"></use>
                  </svg><span>Lehre und Didaktik, OTH Regensburg</span>
                </p>
              </div>
              <div>
                <div class="c-teaserbox__button btn btn--readmore"><span class="btn__text">weiterlesen</span>
                  <svg viewBox="0 0 36 36.111" role="img" aria-hidden="true" focusable="false">
                    <use xlink:href="Images/svg/sprite.symbol.svg#icon-arrow-right"></use>
                  </svg>
                </div>
              </div>
            </div>
          </div></a>
      </div>
      <div class="c-teaserbox-slider__slide"><a class="c-teaserbox__link" href="#">
          <div class="c-teaserbox c-teaserbox--news o-grid o-grid-1-1 o-grid--nogutter">
            <div class="c-teaserbox__image-wrap">
              <picture class="c-teaserbox__image">
                <source srcset="https://picsum.photos/id/1071/640/320" media="(min-width:640px)"/>
                <source srcset="https://picsum.photos/id/1071/320/160" media="(min-width:0)"/><img class="image__default" src="https://picsum.photos/id/1071/640/320" alt="Lorem ipsum dolor sit amet." width="640" height="320"/>
              </picture>
            </div>
            <div class="c-teaserbox__content-wrap">
              <div class="c-teaserbox__text-wrap">
                <h3 class="c-teaserbox__title">Zwei flinke Boxer jagen die quirlige Eva</h3>
                <div class="c-teaserbox__text">
                  <p class="u-line-clamp-3"><strong class="u-text-gull-gray u-mr-tiny">12.03.2022</strong><span>Zwei flinke Boxer jagen die quirlige Eva und ihren Mops durch Sylt. Franz jagt im komplett verwahrlosten Taxi quer durch Bayern.</span></p>
                </div>
                <p class="c-teaserbox__keywords">
                  <svg class="u-mr-tiny" viewBox="0 0 36 36" role="img" aria-hidden="true" focusable="false">
                    <use xlink:href="Images/svg/sprite.symbol.svg#icon-tag"></use>
                  </svg><span>Lehre und Didaktik, OTH Regensburg</span>
                </p>
              </div>
              <div>
                <div class="c-teaserbox__button btn btn--readmore"><span class="btn__text">weiterlesen</span>
                  <svg viewBox="0 0 36 36.111" role="img" aria-hidden="true" focusable="false">
                    <use xlink:href="Images/svg/sprite.symbol.svg#icon-arrow-right"></use>
                  </svg>
                </div>
              </div>
            </div>
          </div></a>
      </div>
      <div class="c-teaserbox-slider__slide"><a class="c-teaserbox__link" href="#">
          <div class="c-teaserbox c-teaserbox--news o-grid o-grid-1-1 o-grid--nogutter">
            <div class="c-teaserbox__image-wrap">
              <picture class="c-teaserbox__image">
                <source srcset="https://picsum.photos/id/1072/640/320" media="(min-width:640px)"/>
                <source srcset="https://picsum.photos/id/1072/320/160" media="(min-width:0)"/><img class="image__default" src="https://picsum.photos/id/1072/640/320" alt="Lorem ipsum dolor sit amet." width="640" height="320"/>
              </picture>
            </div>
            <div class="c-teaserbox__content-wrap">
              <div class="c-teaserbox__text-wrap">
                <h3 class="c-teaserbox__title">Zwölf Boxkämpfer jagen Viktor quer über den großen Sylter Deich</h3>
                <div class="c-teaserbox__text">
                  <p class="u-line-clamp-3"><strong class="u-text-gull-gray u-mr-tiny">12.03.2022</strong><span>Zwölf Boxkämpfer jagen Viktor quer über den großen Sylter Deich. Vogel Quax zwickt Johnys Pferd Bim.</span></p>
                </div>
                <p class="c-teaserbox__keywords">
                  <svg class="u-mr-tiny" viewBox="0 0 36 36" role="img" aria-hidden="true" focusable="false">
                    <use xlink:href="Images/svg/sprite.symbol.svg#icon-tag"></use>
                  </svg><span>Lehre und Didaktik, OTH Regensburg</span>
                </p>
              </div>
              <div>
                <div class="c-teaserbox__button btn btn--readmore"><span class="btn__text">weiterlesen</span>
                  <svg viewBox="0 0 36 36.111" role="img" aria-hidden="true" focusable="false">
                    <use xlink:href="Images/svg/sprite.symbol.svg#icon-arrow-right"></use>
                  </svg>
                </div>
              </div>
            </div>
          </div></a>
      </div>
      <div class="c-teaserbox-slider__slide"><a class="c-teaserbox__link" href="#">
          <div class="c-teaserbox c-teaserbox--news o-grid o-grid-1-1 o-grid--nogutter">
            <div class="c-teaserbox__image-wrap">
              <picture class="c-teaserbox__image">
                <source srcset="https://picsum.photos/id/1073/640/320" media="(min-width:640px)"/>
                <source srcset="https://picsum.photos/id/1073/320/160" media="(min-width:0)"/><img class="image__default" src="https://picsum.photos/id/1073/640/320" alt="Lorem ipsum dolor sit amet." width="640" height="320"/>
              </picture>
            </div>
            <div class="c-teaserbox__content-wrap">
              <div class="c-teaserbox__text-wrap">
                <h3 class="c-teaserbox__title">News Headline Donec pede justo</h3>
                <div class="c-teaserbox__text">
                  <p class="u-line-clamp-3"><strong class="u-text-gull-gray u-mr-tiny">12.03.2022</strong><span>In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.  Nullam dictum felis eu pede mollis pretium.</span></p>
                </div>
                <p class="c-teaserbox__keywords">
                  <svg class="u-mr-tiny" viewBox="0 0 36 36" role="img" aria-hidden="true" focusable="false">
                    <use xlink:href="Images/svg/sprite.symbol.svg#icon-tag"></use>
                  </svg><span>Lehre und Didaktik, OTH Regensburg</span>
                </p>
              </div>
              <div>
                <div class="c-teaserbox__button btn btn--readmore"><span class="btn__text">weiterlesen</span>
                  <svg viewBox="0 0 36 36.111" role="img" aria-hidden="true" focusable="false">
                    <use xlink:href="Images/svg/sprite.symbol.svg#icon-arrow-right"></use>
                  </svg>
                </div>
              </div>
            </div>
          </div></a>
      </div>
    </div>
  </div>
</div>