Welcome at TUM Campus Heilbronn
Since fall 2018 the renowned Technical University of Munich is present at the Bildungscampus Heilbronn and offers a wide variety of services to its more than 500 students in five programs. The state-of-the-art campus of the Dieter Schwarz Foundation and the excellence in research and teaching are now an integral part of one of the most innovative regions in Germany.
Markup: templates/output/06-components/stage/stage-home.html
<div class="c-stage-home">
<picture class="c-stage-home__image">
<source srcset="https://placeholder.in2code.de/2560x800" media="(min-width: 1920px)" type="image/webp"/>
<source srcset="https://placeholder.in2code.de/1920x800" media="(min-width: 768px)" type="image/webp"/>
<source srcset="https://placeholder.in2code.de/768x800" type="image/webp"/><img loading="eager" src="https://placeholder.in2code.de/2560x800" width="2560" height="1080" alt=""/>
</picture>
<div class="c-stage-home__content">
<div class="container">
<header class="frame__header">
<h1>Welcome at TUM Campus Heilbronn</h1>
</header>
<p>Since fall 2018 the renowned<a href="https://www.tum.de/en/" target="_blank" rel="noreferrer">
<u>Technical University of Munich</u></a> is present at the Bildungscampus Heilbronn and offers a wide variety of services to its more than 500 students in five programs. The state-of-the-art campus of the Dieter Schwarz Foundation and the excellence in research and teaching are now an integral part of one of the most innovative regions in Germany.</p>
</div>
</div>
</div>
<div class="c-stage-cards container">
<div class="c-stage-card c-stage-card--grey">
<div class="c-stage-card__image"><img src="https://placeholder.in2code.de/200x113" width="200" height="113" alt=""/></div>
<div class="c-stage-card__content">
<p>dfgdfg</p><a class="btn btn--icon" href="/"><span>dfgfdg</span>
<svg width="18" height="18" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
<use xlink:href="Images/svg/sprite.symbol.svg#icon-arrow-right"></use>
</svg></a>
</div>
</div>
<div class="c-stage-card c-stage-card--orange">
<div class="c-stage-card__image"><img src="https://placeholder.in2code.de/200x113" width="200" height="113" alt=""/></div>
<div class="c-stage-card__content">
<p>fdgdfg</p><a class="btn btn--icon" href="/"><span>dfgdfg</span>
<svg width="18" height="18" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
<use xlink:href="Images/svg/sprite.symbol.svg#icon-arrow-right"></use>
</svg></a>
</div>
</div>
<div class="c-stage-card c-stage-card--purple">
<div class="c-stage-card__image"><img src="https://placeholder.in2code.de/200x113" width="200" height="113" alt=""/></div>
<div class="c-stage-card__content">
<p>rferf</p><a class="btn btn--icon" href="/"><span>dfgdfg</span>
<svg width="18" height="18" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
<use xlink:href="Images/svg/sprite.symbol.svg#icon-arrow-right"></use>
</svg></a>
</div>
</div>
</div>
<div class="c-stage-cards-slider container">
<div class="glide__track" data-glide-el="track">
<ul class="glide__slides">
<li class="glide__slide">
<div class="c-stage-card c-stage-card--grey c-stage-card--slider">
<div class="c-stage-card__image"><img src="https://placeholder.in2code.de/200x113" width="200" height="113" alt=""/></div>
<div class="c-stage-card__content">
<p>dfgdfg</p><a class="btn btn--icon" href="/"><span>dfgfdg</span>
<svg width="18" height="18" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
<use xlink:href="Images/svg/sprite.symbol.svg#icon-arrow-right"></use>
</svg></a>
</div>
</div>
</li>
<li class="glide__slide">
<div class="c-stage-card c-stage-card--orange c-stage-card--slider">
<div class="c-stage-card__image"><img src="https://placeholder.in2code.de/200x113" width="200" height="113" alt=""/></div>
<div class="c-stage-card__content">
<p>fdgdfg</p><a class="btn btn--icon" href="/"><span>dfgdfg</span>
<svg width="18" height="18" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
<use xlink:href="Images/svg/sprite.symbol.svg#icon-arrow-right"></use>
</svg></a>
</div>
</div>
</li>
<li class="glide__slide">
<div class="c-stage-card c-stage-card--purple c-stage-card--slider">
<div class="c-stage-card__image"><img src="https://placeholder.in2code.de/200x113" width="200" height="113" alt=""/></div>
<div class="c-stage-card__content">
<p>rferf</p><a class="btn btn--icon" href="/"><span>dfgdfg</span>
<svg width="18" height="18" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
<use xlink:href="Images/svg/sprite.symbol.svg#icon-arrow-right"></use>
</svg></a>
</div>
</div>
</li>
</ul>
</div>
<div class="glide__nav">
<div data-glide-el="controls">
<button class="btn glide__arrow glide__arrow--prev" type="button" data-glide-dir="<">
<svg width="24" height="24" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
<use xlink:href="Images/svg/sprite.symbol.svg#icon-chevron-left"></use>
</svg><span class="u-visually-hidden">Vorheriger Slide</span>
</button>
</div>
<div class="glide__counter glide__counter--current">01</div>
<div class="glide__bullets" data-glide-el="controls[nav]">
<button class="btn glide__bullet glide__bullet--active" type="button" data-glide-dir="=0"><span class="u-visually-hidden">Slide 1</span></button>
<button class="btn glide__bullet" type="button" data-glide-dir="=1"><span class="u-visually-hidden">Slide 2</span></button>
<button class="btn glide__bullet" type="button" data-glide-dir="=2"><span class="u-visually-hidden">Slide 3</span></button>
</div>
<div class="glide__counter glide__counter--total">03</div>
<div data-glide-el="controls">
<button class="btn glide__arrow glide__arrow--right" type="button" data-glide-dir=">">
<svg width="24" height="24" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
<use xlink:href="Images/svg/sprite.symbol.svg#icon-chevron-right"></use>
</svg><span class="u-visually-hidden">Nächster Slide</span>
</button>
</div>
</div>
</div>
Source:
assets/sass/06-components/stage/_components.stage-home.scss
, line 11