HTML-Prototype von TUM Campus Heilbronn

<insert-markup>4.17-</insert-markup>
  • EXZELLENTE <br> KARRIERE <br> CHANCEN

    EXZELLENTE
    KARRIERE
    CHANCEN

    Dein Studium am TUM Campus Heilbronn

  • FORSCHUNG
    MEETS
    MITTELSTAND

    Exzellente Forschung und praxisnahe Lösungen für nachhaltige Innovation

  • NEWS &<br> HIGHLIGHTS

    NEWS &
    HIGHLIGHTS

    Aktuelles vom TUM Campus Heilbronn

  • SPITZEN-<br>FORSCHUNG,<br> DIE <br> BEGEISTERT

    SPITZEN-
    FORSCHUNG,
    DIE
    BEGEISTERT

    Exzellenz in Forschung und Lehre

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

<div class="page">
  <main class="page__content">
    <!-- Grid/ Element container-->
    <div class="frame frame-type-" id="c000001">
      <div class="c-slider c-hero-slider">
        <section class="splide c-slider__section" aria-label="Teaser">
          <div class="c-slider__track splide__track">
            <ul class="c-slider__list splide__list">
              <li class="c-slider__slide splide__slide">
                <div class="c-hero-slide">
                  <picture class="c-hero-slide__media">
                    <source srcset="https://placeholder2.in2code.de/images/work/1/2560/1707" media="(min-width: 1920px)" type="image/webp"/>
                    <source srcset="https://placeholder2.in2code.de/images/work/1/1920/1280" media="(min-width: 768px)" type="image/webp"/>
                    <source srcset="https://placeholder2.in2code.de/images/work/1/768/512" type="image/webp"/><img loading="eager" fetchpriority="high" src="https://placeholder2.in2code.de/images/work/1/2560/1707" width="980" height="654" alt="EXZELLENTE &lt;br&gt; KARRIERE &lt;br&gt; CHANCEN" title="EXZELLENTE &lt;br&gt; KARRIERE &lt;br&gt; CHANCEN"/>
                  </picture>
                  <div class="c-hero-slide__content">
                    <div class="container container--small">
                      <!-- Grid/ Element header-->
                      <header class="frame__header">
                        <h1>EXZELLENTE <br> KARRIERE <br> CHANCEN</h1>
                      </header>
                      <div class="c-textmedia__bodytext">
                        <p>Dein Studium am TUM Campus Heilbronn</p>
                      </div>
                    </div>
                  </div>
                </div>
              </li>
              <li class="c-slider__slide splide__slide">
                <div class="c-hero-slide">
                  <div class="c-hero-slide__media">
                    <video muted="muted" loop="loop" playsinline="playsinline" poster="/images/video.png">
                      <source src="/images/video.mp4" type="video/mp4"/>
                    </video>
                  </div>
                  <button class="c-hero-slide__button" type="button" aria-pressed="false" aria-label="Play video" data-play="Play video" data-pause="Pause video"></button>
                  <div class="c-hero-slide__content">
                    <div class="container container--small">
                      <!-- Grid/ Element header-->
                      <header class="frame__header">
                        <h1>FORSCHUNG <br> MEETS <br> MITTELSTAND</h1>
                      </header>
                      <div class="c-textmedia__bodytext">
                        <p>Exzellente Forschung und praxisnahe Lösungen für nachhaltige Innovation</p>
                      </div>
                    </div>
                  </div>
                </div>
              </li>
              <li class="c-slider__slide splide__slide">
                <div class="c-hero-slide">
                  <picture class="c-hero-slide__media">
                    <source srcset="https://placeholder2.in2code.de/images/work/3/2560/1707" media="(min-width: 1920px)" type="image/webp"/>
                    <source srcset="https://placeholder2.in2code.de/images/work/3/1920/1280" media="(min-width: 768px)" type="image/webp"/>
                    <source srcset="https://placeholder2.in2code.de/images/work/3/768/512" type="image/webp"/><img loading="eager" fetchpriority="high" src="https://placeholder2.in2code.de/images/work/3/2560/1707" width="980" height="654" alt="NEWS &amp;&lt;br&gt; HIGHLIGHTS" title="NEWS &amp;&lt;br&gt; HIGHLIGHTS"/>
                  </picture>
                  <div class="c-hero-slide__content">
                    <div class="container container--small">
                      <!-- Grid/ Element header-->
                      <header class="frame__header">
                        <h1>NEWS &<br> HIGHLIGHTS</h1>
                      </header>
                      <div class="c-textmedia__bodytext">
                        <p>Aktuelles vom TUM Campus Heilbronn</p>
                      </div>
                    </div>
                  </div>
                </div>
              </li>
              <li class="c-slider__slide splide__slide">
                <div class="c-hero-slide">
                  <picture class="c-hero-slide__media">
                    <source srcset="https://placeholder2.in2code.de/images/work/4/2560/1707" media="(min-width: 1920px)" type="image/webp"/>
                    <source srcset="https://placeholder2.in2code.de/images/work/4/1920/1280" media="(min-width: 768px)" type="image/webp"/>
                    <source srcset="https://placeholder2.in2code.de/images/work/4/768/512" type="image/webp"/><img loading="eager" fetchpriority="high" src="https://placeholder2.in2code.de/images/work/4/2560/1707" width="980" height="654" alt="SPITZEN-&lt;br&gt;FORSCHUNG,&lt;br&gt; DIE &lt;br&gt; BEGEISTERT" title="SPITZEN-&lt;br&gt;FORSCHUNG,&lt;br&gt; DIE &lt;br&gt; BEGEISTERT"/>
                  </picture>
                  <div class="c-hero-slide__content">
                    <div class="container container--small">
                      <!-- Grid/ Element header-->
                      <header class="frame__header">
                        <h1>SPITZEN-<br>FORSCHUNG,<br> DIE <br> BEGEISTERT</h1>
                      </header>
                      <div class="c-textmedia__bodytext">
                        <p>Exzellenz in Forschung und Lehre</p>
                      </div>
                    </div>
                  </div>
                </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>
  </main>
</div>
Source: assets/sass/06-components/slider/_components.slider-hero.scss, line 1