Markup: templates/output/06-components/slider/slider-media-tiles.html
<!-- Grid/ Element container-->
<div class="frame frame-type-" id="c41106" data-scrollspysection="1">
<div class="container ">
<div class="c-slider c-slider--media-tiles">
<section class="splide c-slider__section" aria-label="Media Slider">
<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">
<!-- Grid/ Element container-->
<div class="frame frame-type-tile_link" id="c41101" data-scrollspysection="1">
<div class="container container--small "><a class="c-media-tile" href="#">
<div class="c-media-tile__content">
<div class="h2">Download Tile</div>
<p>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. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. </p>
<svg class="c-media-tile__icon c-media-tile__icon-download" viewBox="0 0 16 16" aria-hidden="true" focusable="false" style="pointer-events: none;" height="126px" width="126px">
<use xlink:href="/Images/svg/sprite.symbol.svg#download"></use>
</svg>
</div></a>
</div>
</div>
</li>
<li class="c-slider__slide splide__slide">
<!-- Grid/ Element container-->
<div class="frame frame-type-tile_media" id="c41102" data-scrollspysection="1">
<div class="container container--small "><a class="c-media-tile c-media-tile--highlight" href="#">
<div class="c-media-tile__image-wrapper"><img class="c-media-tile__image" src="https://placeholder.in2code.de/374x561" title="" alt=""/></div>
<div class="c-media-tile__content">
<div class="h2">Image Tile</div>
<p>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. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. </p>
</div></a>
</div>
</div>
</li>
<li class="c-slider__slide splide__slide">
<!-- Grid/ Element container-->
<div class="frame frame-type-tile_link" id="c41103" data-scrollspysection="1">
<div class="container container--small "><a class="c-media-tile" href="#">
<div class="c-media-tile__content">
<div class="h2">Link Tile</div>
<p>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. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. </p>
<svg class="c-media-tile__icon c-media-tile__icon-external" viewBox="0 0 16 16" aria-hidden="true" focusable="false" style="pointer-events: none;" height="126px" width="126px">
<use xlink:href="/Images/svg/sprite.symbol.svg#external"></use>
</svg>
</div></a>
</div>
</div>
</li>
<li class="c-slider__slide splide__slide">
<!-- Grid/ Element container-->
<div class="frame frame-type-tile_quote" id="c41104" data-scrollspysection="1">
<div class="container container--small "><a class="c-media-tile" href="#">
<div class="c-media-tile__image-wrapper"><img class="c-media-tile__image" src="https://placeholder.in2code.de/450x450" title="" alt=""/></div>
<div class="c-media-tile__content">
<div class="h2">Quote Tile</div>
<p>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. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. </p>
<svg class="c-media-tile__icon c-media-tile__icon-quote" viewBox="0 0 323 287" aria-hidden="true" focusable="false" style="pointer-events: none;" height="126px" width="auto">
<use xlink:href="/Images/svg/sprite.symbol.svg#quote"></use>
</svg>
</div></a>
</div>
</div>
</li>
<li class="c-slider__slide splide__slide">
<!-- Grid/ Element container-->
<div class="frame frame-type-tile_media" id="c41105" data-scrollspysection="1">
<div class="container container--small "><a class="c-media-tile lightbox lightbox-video" href="https://player.vimeo.com/video/15209448" data-type="iframe" data-group="iframe-youtube" data-width="1120px" data-height="630px">
<div class="c-media-tile__image-wrapper">
<div class="c-media-tile__image-wrapper"><img class="c-media-tile__image" src="https://placeholder.in2code.de/374x561" title="" alt=""/></div>
</div>
<div class="c-media-tile__content">
<div class="h2">Video Tile (Youtube/Vimeo)</div>
<p>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. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. </p>
</div></a>
</div>
</div>
</li>
<li class="c-slider__slide splide__slide">
<!-- Grid/ Element container-->
<div class="frame frame-type-tile_media" id="c41105" data-scrollspysection="1">
<div class="container container--small ">
<video class="video-embed-item lightbox-video-element" width="1200" controls="" id="selector_video">
<source src="https://sample-videos.com/video321/mp4/720/big_buck_bunny_720p_1mb.mp4" type="video/mp4"/>
</video><a class="c-media-tile lightbox lightbox-video" href="#" data-type="html" data-target="#selector_video" data-group="inline_video">
<div class="c-media-tile__image-wrapper">
<div class="c-media-tile__image-wrapper"><img class="c-media-tile__image" src="https://placeholder.in2code.de/650x235" title="" alt=""/></div>
</div>
<div class="c-media-tile__content">
<div class="h2">Video Tile (Inline Video)</div>
<p>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. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. </p>
</div></a>
</div>
</div>
</li>
</ul>
</div>
</section>
</div>
</div>
</div>
Source:
assets/sass/06-components/_components.slider.scss, line 28