Story-Module @story-module
Default @story-module
<div class="story-module story-module--mocca story-module--primary">
<div class="story-module__inner">
<div class="story-module__content-wrap">
<div class="story-module__slider">
<div class="teaser-slider">
<div class="teaser-slider__inner">
<div class="teaser-slider__block">
<div class="teaser-slider__items">
<div class="teaser-slider__item">
<article class="teaser">
<div class="teaser__content">
<div class="teaser__media">
<div class="image loading" style="padding-top: 66.66666666666666%;"><noscript><img class="image__fallback" alt="Teaser Thumb" height="400" src="https://bildermangel.de/600x400/F5F5F5/28281a.png?text=600x400" width="600" /></noscript><img class="image__img js-lazyload" data-src="https://bildermangel.de/600x400/F5F5F5/28281a.png?text=600x400" width="600" height="400" alt="Teaser Thumb" /></div>
</div><a class="teaser__content-headline js-overlay-link" href="#" data-overlay-target="teaser__content">
<h3 class="headline headline--5"><span class="f-w-normal">Slide 1. C. Dahl – GF BW Stiftung</span><span class="u-hidden-visually">:</span><br />Der Mikrokosmos Schwabstrasse</h3>
</a>
</div>
</article>
</div>
<div class="teaser-slider__item">
<article class="teaser">
<div class="teaser__content">
<div class="teaser__media">
<div class="image loading" style="padding-top: 66.66666666666666%;"><noscript><img class="image__fallback" alt="Teaser Thumb" height="400" src="https://bildermangel.de/600x400/F5F5F5/28281a.png?text=600x400" width="600" /></noscript><img class="image__img js-lazyload" data-src="https://bildermangel.de/600x400/F5F5F5/28281a.png?text=600x400" width="600" height="400" alt="Teaser Thumb" /></div>
</div><a class="teaser__content-headline js-overlay-link" href="#" data-overlay-target="teaser__content">
<h3 class="headline headline--5"><span class="f-w-normal">Slide 2. C. Dahl – GF BW Stiftung</span><span class="u-hidden-visually">:</span><br />Der Mikrokosmos Schwabstrasse</h3>
</a>
</div>
</article>
</div>
<div class="teaser-slider__item">
<article class="teaser">
<div class="teaser__content">
<div class="teaser__media">
<div class="image loading" style="padding-top: 66.66666666666666%;"><noscript><img class="image__fallback" alt="Teaser Thumb" height="400" src="https://bildermangel.de/600x400/F5F5F5/28281a.png?text=600x400" width="600" /></noscript><img class="image__img js-lazyload" data-src="https://bildermangel.de/600x400/F5F5F5/28281a.png?text=600x400" width="600" height="400" alt="Teaser Thumb" /></div>
</div><a class="teaser__content-headline js-overlay-link" href="#" data-overlay-target="teaser__content">
<h3 class="headline headline--5"><span class="f-w-normal">Slide 3. C. Dahl – GF BW Stiftung</span><span class="u-hidden-visually">:</span><br />Der Mikrokosmos Schwabstrasse</h3>
</a>
</div>
</article>
</div>
<div class="teaser-slider__item">
<article class="teaser">
<div class="teaser__content">
<div class="teaser__media">
<div class="image loading" style="padding-top: 66.66666666666666%;"><noscript><img class="image__fallback" alt="Teaser Thumb" height="400" src="https://bildermangel.de/600x400/F5F5F5/28281a.png?text=600x400" width="600" /></noscript><img class="image__img js-lazyload" data-src="https://bildermangel.de/600x400/F5F5F5/28281a.png?text=600x400" width="600" height="400" alt="Teaser Thumb" /></div>
</div><a class="teaser__content-headline js-overlay-link" href="#" data-overlay-target="teaser__content">
<h3 class="headline headline--5"><span class="f-w-normal">Slide 4. C. Dahl – GF BW Stiftung</span><span class="u-hidden-visually">:</span><br />Der Mikrokosmos Schwabstrasse</h3>
</a>
</div>
</article>
</div>
<div class="teaser-slider__item">
<article class="teaser">
<div class="teaser__content">
<div class="teaser__media">
<div class="image loading" style="padding-top: 66.66666666666666%;"><noscript><img class="image__fallback" alt="Teaser Thumb" height="400" src="https://bildermangel.de/600x400/F5F5F5/28281a.png?text=600x400" width="600" /></noscript><img class="image__img js-lazyload" data-src="https://bildermangel.de/600x400/F5F5F5/28281a.png?text=600x400" width="600" height="400" alt="Teaser Thumb" /></div>
</div><a class="teaser__content-headline js-overlay-link" href="#" data-overlay-target="teaser__content">
<h3 class="headline headline--5"><span class="f-w-normal">Slide 5. C. Dahl – GF BW Stiftung</span><span class="u-hidden-visually">:</span><br />Der Mikrokosmos Schwabstrasse</h3>
</a>
</div>
</article>
</div>
<div class="teaser-slider__item">
<article class="teaser">
<div class="teaser__content">
<div class="teaser__media">
<div class="image loading" style="padding-top: 66.66666666666666%;"><noscript><img class="image__fallback" alt="Teaser Thumb" height="400" src="https://bildermangel.de/600x400/F5F5F5/28281a.png?text=600x400" width="600" /></noscript><img class="image__img js-lazyload" data-src="https://bildermangel.de/600x400/F5F5F5/28281a.png?text=600x400" width="600" height="400" alt="Teaser Thumb" /></div>
</div><a class="teaser__content-headline js-overlay-link" href="#" data-overlay-target="teaser__content">
<h3 class="headline headline--5"><span class="f-w-normal">Slide 6. C. Dahl – GF BW Stiftung</span><span class="u-hidden-visually">:</span><br />Der Mikrokosmos Schwabstrasse</h3>
</a>
</div>
</article>
</div>
<div class="teaser-slider__item">
<article class="teaser">
<div class="teaser__content">
<div class="teaser__media">
<div class="image loading" style="padding-top: 66.66666666666666%;"><noscript><img class="image__fallback" alt="Teaser Thumb" height="400" src="https://bildermangel.de/600x400/F5F5F5/28281a.png?text=600x400" width="600" /></noscript><img class="image__img js-lazyload" data-src="https://bildermangel.de/600x400/F5F5F5/28281a.png?text=600x400" width="600" height="400" alt="Teaser Thumb" /></div>
</div><a class="teaser__content-headline js-overlay-link" href="#" data-overlay-target="teaser__content">
<h3 class="headline headline--5"><span class="f-w-normal">Slide 7. C. Dahl – GF BW Stiftung</span><span class="u-hidden-visually">:</span><br />Der Mikrokosmos Schwabstrasse</h3>
</a>
</div>
</article>
</div>
<div class="teaser-slider__item">
<article class="teaser">
<div class="teaser__content">
<div class="teaser__media">
<div class="image loading" style="padding-top: 66.66666666666666%;"><noscript><img class="image__fallback" alt="Teaser Thumb" height="400" src="https://bildermangel.de/600x400/F5F5F5/28281a.png?text=600x400" width="600" /></noscript><img class="image__img js-lazyload" data-src="https://bildermangel.de/600x400/F5F5F5/28281a.png?text=600x400" width="600" height="400" alt="Teaser Thumb" /></div>
</div><a class="teaser__content-headline js-overlay-link" href="#" data-overlay-target="teaser__content">
<h3 class="headline headline--5"><span class="f-w-normal">Slide 8. C. Dahl – GF BW Stiftung</span><span class="u-hidden-visually">:</span><br />Der Mikrokosmos Schwabstrasse</h3>
</a>
</div>
</article>
</div>
</div>
</div>
<div class="teaser-slider__controls slider__controls"></div>
</div>
</div>
</div>
</div>
</div>
</div>{
"variants": "primary",
"moduleSlider": {
"title": null
}
}
Maximal-Content @story-module--maximal-content
<div class="story-module story-module--mocca story-module--maximal-content">
<div class="story-module__inner">
<div class="story-module__content-wrap">
<div class="story-module__content">
<div class="story-module__headline">
<h2 class="headline headline--1"><span class="f-w-normal">Spitzmarke</span><br />Headline des Moduls</h2>
</div>
<div class="story-module__magazine">
<div class="story-module__magazine-image">
<div class="image loading" style="padding-top: 135.96491228070175%;"><noscript><img class="image__fallback" alt="Magazine Cover" height="155" src="/images/magazine.jpg" width="114" /></noscript><img class="image__img js-lazyload" data-src="/images/magazine.jpg" width="114" height="155" alt="Magazine Cover" /></div>
</div>
<div class="story-module__magazine-content">
<div class="story-module__magazine-text">
<div class="text">
<p>Unser aktuelles Magazin</p><strong>»Perspektive«</strong>
</div>
</div>
</div>
</div>
</div>
<div class="story-module__slider">
<div class="teaser-slider">
<div class="teaser-slider__inner">
<div class="teaser-slider__block">
<div class="teaser-slider__items">
<div class="teaser-slider__item">
<article class="teaser">
<div class="teaser__content">
<div class="teaser__media">
<div class="image loading" style="padding-top: 66.66666666666666%;"><noscript><img class="image__fallback" alt="Teaser Thumb" height="400" src="https://bildermangel.de/600x400/F5F5F5/28281a.png?text=600x400" width="600" /></noscript><img class="image__img js-lazyload" data-src="https://bildermangel.de/600x400/F5F5F5/28281a.png?text=600x400" width="600" height="400" alt="Teaser Thumb" /></div>
</div><a class="teaser__content-headline js-overlay-link" href="#" data-overlay-target="teaser__content">
<h3 class="headline headline--5"><span class="f-w-normal">Slide 1. C. Dahl – GF BW Stiftung</span><span class="u-hidden-visually">:</span><br />Der Mikrokosmos Schwabstrasse</h3>
</a>
</div>
</article>
</div>
<div class="teaser-slider__item">
<article class="teaser">
<div class="teaser__content">
<div class="teaser__media">
<div class="image loading" style="padding-top: 66.66666666666666%;"><noscript><img class="image__fallback" alt="Teaser Thumb" height="400" src="https://bildermangel.de/600x400/F5F5F5/28281a.png?text=600x400" width="600" /></noscript><img class="image__img js-lazyload" data-src="https://bildermangel.de/600x400/F5F5F5/28281a.png?text=600x400" width="600" height="400" alt="Teaser Thumb" /></div>
</div><a class="teaser__content-headline js-overlay-link" href="#" data-overlay-target="teaser__content">
<h3 class="headline headline--5"><span class="f-w-normal">Slide 2. C. Dahl – GF BW Stiftung</span><span class="u-hidden-visually">:</span><br />Der Mikrokosmos Schwabstrasse</h3>
</a>
</div>
</article>
</div>
<div class="teaser-slider__item">
<article class="teaser">
<div class="teaser__content">
<div class="teaser__media">
<div class="image loading" style="padding-top: 66.66666666666666%;"><noscript><img class="image__fallback" alt="Teaser Thumb" height="400" src="https://bildermangel.de/600x400/F5F5F5/28281a.png?text=600x400" width="600" /></noscript><img class="image__img js-lazyload" data-src="https://bildermangel.de/600x400/F5F5F5/28281a.png?text=600x400" width="600" height="400" alt="Teaser Thumb" /></div>
</div><a class="teaser__content-headline js-overlay-link" href="#" data-overlay-target="teaser__content">
<h3 class="headline headline--5"><span class="f-w-normal">Slide 3. C. Dahl – GF BW Stiftung</span><span class="u-hidden-visually">:</span><br />Der Mikrokosmos Schwabstrasse</h3>
</a>
</div>
</article>
</div>
<div class="teaser-slider__item">
<article class="teaser">
<div class="teaser__content">
<div class="teaser__media">
<div class="image loading" style="padding-top: 66.66666666666666%;"><noscript><img class="image__fallback" alt="Teaser Thumb" height="400" src="https://bildermangel.de/600x400/F5F5F5/28281a.png?text=600x400" width="600" /></noscript><img class="image__img js-lazyload" data-src="https://bildermangel.de/600x400/F5F5F5/28281a.png?text=600x400" width="600" height="400" alt="Teaser Thumb" /></div>
</div><a class="teaser__content-headline js-overlay-link" href="#" data-overlay-target="teaser__content">
<h3 class="headline headline--5"><span class="f-w-normal">Slide 4. C. Dahl – GF BW Stiftung</span><span class="u-hidden-visually">:</span><br />Der Mikrokosmos Schwabstrasse</h3>
</a>
</div>
</article>
</div>
<div class="teaser-slider__item">
<article class="teaser">
<div class="teaser__content">
<div class="teaser__media">
<div class="image loading" style="padding-top: 66.66666666666666%;"><noscript><img class="image__fallback" alt="Teaser Thumb" height="400" src="https://bildermangel.de/600x400/F5F5F5/28281a.png?text=600x400" width="600" /></noscript><img class="image__img js-lazyload" data-src="https://bildermangel.de/600x400/F5F5F5/28281a.png?text=600x400" width="600" height="400" alt="Teaser Thumb" /></div>
</div><a class="teaser__content-headline js-overlay-link" href="#" data-overlay-target="teaser__content">
<h3 class="headline headline--5"><span class="f-w-normal">Slide 5. C. Dahl – GF BW Stiftung</span><span class="u-hidden-visually">:</span><br />Der Mikrokosmos Schwabstrasse</h3>
</a>
</div>
</article>
</div>
<div class="teaser-slider__item">
<article class="teaser">
<div class="teaser__content">
<div class="teaser__media">
<div class="image loading" style="padding-top: 66.66666666666666%;"><noscript><img class="image__fallback" alt="Teaser Thumb" height="400" src="https://bildermangel.de/600x400/F5F5F5/28281a.png?text=600x400" width="600" /></noscript><img class="image__img js-lazyload" data-src="https://bildermangel.de/600x400/F5F5F5/28281a.png?text=600x400" width="600" height="400" alt="Teaser Thumb" /></div>
</div><a class="teaser__content-headline js-overlay-link" href="#" data-overlay-target="teaser__content">
<h3 class="headline headline--5"><span class="f-w-normal">Slide 6. C. Dahl – GF BW Stiftung</span><span class="u-hidden-visually">:</span><br />Der Mikrokosmos Schwabstrasse</h3>
</a>
</div>
</article>
</div>
<div class="teaser-slider__item">
<article class="teaser">
<div class="teaser__content">
<div class="teaser__media">
<div class="image loading" style="padding-top: 66.66666666666666%;"><noscript><img class="image__fallback" alt="Teaser Thumb" height="400" src="https://bildermangel.de/600x400/F5F5F5/28281a.png?text=600x400" width="600" /></noscript><img class="image__img js-lazyload" data-src="https://bildermangel.de/600x400/F5F5F5/28281a.png?text=600x400" width="600" height="400" alt="Teaser Thumb" /></div>
</div><a class="teaser__content-headline js-overlay-link" href="#" data-overlay-target="teaser__content">
<h3 class="headline headline--5"><span class="f-w-normal">Slide 7. C. Dahl – GF BW Stiftung</span><span class="u-hidden-visually">:</span><br />Der Mikrokosmos Schwabstrasse</h3>
</a>
</div>
</article>
</div>
<div class="teaser-slider__item">
<article class="teaser">
<div class="teaser__content">
<div class="teaser__media">
<div class="image loading" style="padding-top: 66.66666666666666%;"><noscript><img class="image__fallback" alt="Teaser Thumb" height="400" src="https://bildermangel.de/600x400/F5F5F5/28281a.png?text=600x400" width="600" /></noscript><img class="image__img js-lazyload" data-src="https://bildermangel.de/600x400/F5F5F5/28281a.png?text=600x400" width="600" height="400" alt="Teaser Thumb" /></div>
</div><a class="teaser__content-headline js-overlay-link" href="#" data-overlay-target="teaser__content">
<h3 class="headline headline--5"><span class="f-w-normal">Slide 8. C. Dahl – GF BW Stiftung</span><span class="u-hidden-visually">:</span><br />Der Mikrokosmos Schwabstrasse</h3>
</a>
</div>
</article>
</div>
</div>
</div>
<div class="teaser-slider__controls slider__controls"></div>
</div>
</div>
</div>
<div class="story-module__bottom">
<div class="story-module__link">
<div class="link-list link-list--right">
<div class="text link-list__text">
<p>Ich bin ein Freitext</p>
</div>
<ul class="link-list__list">
<li class="link-list__item"><a class="icon-link icon-link--right" href="#"><span class="icon-link__text">Link 1</span><span class="icon-link__icon"><svg class="icon icon--chevron-right" viewBox="0 0 200 200">
<use xlink:href="#icon-chevron-right"></use>
</svg></span></a></li>
<li class="link-list__item"><a class="icon-link icon-link--right" href="#"><span class="icon-link__text">Link 2</span><span class="icon-link__icon"><svg class="icon icon--chevron-right" viewBox="0 0 200 200">
<use xlink:href="#icon-chevron-right"></use>
</svg></span></a></li>
<li class="link-list__item"><a class="icon-link icon-link--right" href="#" rel="noopener noreferrer" target="_blank"><span class="icon-link__text">Link 3</span><span class="icon-link__icon"><svg class="icon icon--arrow-external" viewBox="0 0 200 200">
<use xlink:href="#icon-arrow-external"></use>
</svg></span></a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>{
"variants": "maximal-content",
"moduleSlider": {
"title": null
},
"backgroundColor": "mocca",
"content": {
"title": "#[span.f-w-normal Spitzmarke]#[br]Headline des Moduls\n",
"magazine": {
"text": {
"content": "p Unser aktuelles Magazin\nstrong »Perspektive«\n"
},
"image": {
"src": "/images/magazine.jpg",
"width": 114,
"height": 155,
"alt": "Magazine Cover"
}
}
},
"contentAction": {
"link": true
}
}
Stories @story-module--stories
<div class="story-module story-module--mocca story-module--stories">
<div class="story-module__inner">
<div class="story-module__content-wrap">
<div class="story-module__content">
<div class="story-module__headline">
<h2 class="headline headline--1"><span class="f-w-normal">Stories</span><br />Aus dem Themenbereich</h2>
</div>
</div>
<div class="story-module__slider">
<div class="teaser-slider">
<div class="teaser-slider__inner">
<div class="teaser-slider__block">
<div class="teaser-slider__items">
<div class="teaser-slider__item">
<article class="teaser">
<div class="teaser__content">
<div class="teaser__media">
<div class="image loading" style="padding-top: 66.66666666666666%;"><noscript><img class="image__fallback" alt="Teaser Thumb" height="400" src="https://bildermangel.de/600x400/F5F5F5/28281a.png?text=600x400" width="600" /></noscript><img class="image__img js-lazyload" data-src="https://bildermangel.de/600x400/F5F5F5/28281a.png?text=600x400" width="600" height="400" alt="Teaser Thumb" /></div>
</div><a class="teaser__content-headline js-overlay-link" href="#" data-overlay-target="teaser__content">
<h3 class="headline headline--5"><span class="f-w-normal">Slide 1. C. Dahl – GF BW Stiftung</span><span class="u-hidden-visually">:</span><br />Der Mikrokosmos Schwabstrasse</h3>
</a>
</div>
</article>
</div>
<div class="teaser-slider__item">
<article class="teaser">
<div class="teaser__content">
<div class="teaser__media">
<div class="image loading" style="padding-top: 66.66666666666666%;"><noscript><img class="image__fallback" alt="Teaser Thumb" height="400" src="https://bildermangel.de/600x400/F5F5F5/28281a.png?text=600x400" width="600" /></noscript><img class="image__img js-lazyload" data-src="https://bildermangel.de/600x400/F5F5F5/28281a.png?text=600x400" width="600" height="400" alt="Teaser Thumb" /></div>
</div><a class="teaser__content-headline js-overlay-link" href="#" data-overlay-target="teaser__content">
<h3 class="headline headline--5"><span class="f-w-normal">Slide 2. C. Dahl – GF BW Stiftung</span><span class="u-hidden-visually">:</span><br />Der Mikrokosmos Schwabstrasse</h3>
</a>
</div>
</article>
</div>
<div class="teaser-slider__item">
<article class="teaser">
<div class="teaser__content">
<div class="teaser__media">
<div class="image loading" style="padding-top: 66.66666666666666%;"><noscript><img class="image__fallback" alt="Teaser Thumb" height="400" src="https://bildermangel.de/600x400/F5F5F5/28281a.png?text=600x400" width="600" /></noscript><img class="image__img js-lazyload" data-src="https://bildermangel.de/600x400/F5F5F5/28281a.png?text=600x400" width="600" height="400" alt="Teaser Thumb" /></div>
</div><a class="teaser__content-headline js-overlay-link" href="#" data-overlay-target="teaser__content">
<h3 class="headline headline--5"><span class="f-w-normal">Slide 3. C. Dahl – GF BW Stiftung</span><span class="u-hidden-visually">:</span><br />Der Mikrokosmos Schwabstrasse</h3>
</a>
</div>
</article>
</div>
<div class="teaser-slider__item">
<article class="teaser">
<div class="teaser__content">
<div class="teaser__media">
<div class="image loading" style="padding-top: 66.66666666666666%;"><noscript><img class="image__fallback" alt="Teaser Thumb" height="400" src="https://bildermangel.de/600x400/F5F5F5/28281a.png?text=600x400" width="600" /></noscript><img class="image__img js-lazyload" data-src="https://bildermangel.de/600x400/F5F5F5/28281a.png?text=600x400" width="600" height="400" alt="Teaser Thumb" /></div>
</div><a class="teaser__content-headline js-overlay-link" href="#" data-overlay-target="teaser__content">
<h3 class="headline headline--5"><span class="f-w-normal">Slide 4. C. Dahl – GF BW Stiftung</span><span class="u-hidden-visually">:</span><br />Der Mikrokosmos Schwabstrasse</h3>
</a>
</div>
</article>
</div>
<div class="teaser-slider__item">
<article class="teaser">
<div class="teaser__content">
<div class="teaser__media">
<div class="image loading" style="padding-top: 66.66666666666666%;"><noscript><img class="image__fallback" alt="Teaser Thumb" height="400" src="https://bildermangel.de/600x400/F5F5F5/28281a.png?text=600x400" width="600" /></noscript><img class="image__img js-lazyload" data-src="https://bildermangel.de/600x400/F5F5F5/28281a.png?text=600x400" width="600" height="400" alt="Teaser Thumb" /></div>
</div><a class="teaser__content-headline js-overlay-link" href="#" data-overlay-target="teaser__content">
<h3 class="headline headline--5"><span class="f-w-normal">Slide 5. C. Dahl – GF BW Stiftung</span><span class="u-hidden-visually">:</span><br />Der Mikrokosmos Schwabstrasse</h3>
</a>
</div>
</article>
</div>
<div class="teaser-slider__item">
<article class="teaser">
<div class="teaser__content">
<div class="teaser__media">
<div class="image loading" style="padding-top: 66.66666666666666%;"><noscript><img class="image__fallback" alt="Teaser Thumb" height="400" src="https://bildermangel.de/600x400/F5F5F5/28281a.png?text=600x400" width="600" /></noscript><img class="image__img js-lazyload" data-src="https://bildermangel.de/600x400/F5F5F5/28281a.png?text=600x400" width="600" height="400" alt="Teaser Thumb" /></div>
</div><a class="teaser__content-headline js-overlay-link" href="#" data-overlay-target="teaser__content">
<h3 class="headline headline--5"><span class="f-w-normal">Slide 6. C. Dahl – GF BW Stiftung</span><span class="u-hidden-visually">:</span><br />Der Mikrokosmos Schwabstrasse</h3>
</a>
</div>
</article>
</div>
<div class="teaser-slider__item">
<article class="teaser">
<div class="teaser__content">
<div class="teaser__media">
<div class="image loading" style="padding-top: 66.66666666666666%;"><noscript><img class="image__fallback" alt="Teaser Thumb" height="400" src="https://bildermangel.de/600x400/F5F5F5/28281a.png?text=600x400" width="600" /></noscript><img class="image__img js-lazyload" data-src="https://bildermangel.de/600x400/F5F5F5/28281a.png?text=600x400" width="600" height="400" alt="Teaser Thumb" /></div>
</div><a class="teaser__content-headline js-overlay-link" href="#" data-overlay-target="teaser__content">
<h3 class="headline headline--5"><span class="f-w-normal">Slide 7. C. Dahl – GF BW Stiftung</span><span class="u-hidden-visually">:</span><br />Der Mikrokosmos Schwabstrasse</h3>
</a>
</div>
</article>
</div>
<div class="teaser-slider__item">
<article class="teaser">
<div class="teaser__content">
<div class="teaser__media">
<div class="image loading" style="padding-top: 66.66666666666666%;"><noscript><img class="image__fallback" alt="Teaser Thumb" height="400" src="https://bildermangel.de/600x400/F5F5F5/28281a.png?text=600x400" width="600" /></noscript><img class="image__img js-lazyload" data-src="https://bildermangel.de/600x400/F5F5F5/28281a.png?text=600x400" width="600" height="400" alt="Teaser Thumb" /></div>
</div><a class="teaser__content-headline js-overlay-link" href="#" data-overlay-target="teaser__content">
<h3 class="headline headline--5"><span class="f-w-normal">Slide 8. C. Dahl – GF BW Stiftung</span><span class="u-hidden-visually">:</span><br />Der Mikrokosmos Schwabstrasse</h3>
</a>
</div>
</article>
</div>
</div>
</div>
<div class="teaser-slider__controls slider__controls"></div>
</div>
</div>
</div>
<div class="story-module__bottom">
<div class="story-module__button"><a class="button button--secondary button--transparent" href="#"><svg class="icon icon--arrow-right button__icon" viewBox="0 0 200 200">
<use xlink:href="#icon-arrow-right"></use>
</svg><span class="button__text">Alle Stories</span></a></div>
</div>
</div>
</div>
</div>{
"variants": "stories",
"moduleSlider": {
"title": null
},
"backgroundColor": "mocca",
"content": {
"title": "#[span.f-w-normal Stories]#[br]Aus dem Themenbereich\n"
},
"contentAction": {
"button": {
"text": "Alle Stories",
"transparent": true
}
}
}
Videos @story-module--videos
<div class="story-module story-module--blue story-module--videos">
<div class="story-module__inner">
<div class="story-module__content-wrap">
<div class="story-module__content">
<div class="story-module__headline">
<h2 class="headline headline--1"><span class="f-w-normal">Videos</span><br />Aus dem Themenbereich</h2>
</div>
</div>
<div class="story-module__slider">
<div class="teaser-slider">
<div class="teaser-slider__inner">
<div class="teaser-slider__block">
<div class="teaser-slider__items">
<div class="teaser-slider__item">
<article class="teaser">
<div class="teaser__content">
<div class="teaser__media">
<figure class="figure" aria-labelledby="figure-a354-label">
<div class="figure__video-wrapper"><iframe class="figure__video" src="https://www.youtube-nocookie.com/embed/5qYSoZSPYdI?rel=0" allow="fullscreen"></iframe></div>
</figure>
</div>
<div class="teaser__content-headline" data-overlay-target="teaser__content">
<h3 class="headline headline--5">Der Mikrokosmos Schwabstrasse</h3>
</div>
</div>
</article>
</div>
<div class="teaser-slider__item">
<article class="teaser">
<div class="teaser__content">
<div class="teaser__media">
<figure class="figure" aria-labelledby="figure-86d7-label">
<div class="figure__video-wrapper"><iframe class="figure__video" src="https://www.youtube-nocookie.com/embed/5qYSoZSPYdI?rel=0" allow="fullscreen"></iframe></div>
</figure>
</div>
<div class="teaser__content-headline" data-overlay-target="teaser__content">
<h3 class="headline headline--5"><span class="f-w-normal">G. Cardascia – Bottega D.G.</span><span class="u-hidden-visually">:</span><br />Alle gemeinsam an einen Tisch</h3>
</div>
</div>
</article>
</div>
<div class="teaser-slider__item">
<article class="teaser">
<div class="teaser__content">
<div class="teaser__media">
<figure class="figure" aria-labelledby="figure-32aa-label">
<div class="figure__video-wrapper"><iframe class="figure__video" src="https://www.youtube-nocookie.com/embed/5qYSoZSPYdI?rel=0" allow="fullscreen"></iframe></div>
</figure>
</div>
<div class="teaser__content-headline" data-overlay-target="teaser__content">
<h3 class="headline headline--5"><span class="f-w-normal">G. Cardascia – Bottega D.G.</span><span class="u-hidden-visually">:</span><br />Alle gemeinsam an einen Tisch</h3>
</div>
</div>
</article>
</div>
<div class="teaser-slider__item">
<article class="teaser">
<div class="teaser__content">
<div class="teaser__media">
<figure class="figure" aria-labelledby="figure-19a4-label">
<div class="figure__video-wrapper"><iframe class="figure__video" src="https://www.youtube-nocookie.com/embed/5qYSoZSPYdI?rel=0" allow="fullscreen"></iframe></div>
</figure>
</div>
<div class="teaser__content-headline" data-overlay-target="teaser__content">
<h3 class="headline headline--5"><span class="f-w-normal">G. Cardascia – Bottega D.G.</span><span class="u-hidden-visually">:</span><br />Alle gemeinsam an einen Tisch</h3>
</div>
</div>
</article>
</div>
<div class="teaser-slider__item">
<article class="teaser">
<div class="teaser__content">
<div class="teaser__media">
<figure class="figure" aria-labelledby="figure-bb87-label">
<div class="figure__video-wrapper"><iframe class="figure__video" src="https://www.youtube-nocookie.com/embed/5qYSoZSPYdI?rel=0" allow="fullscreen"></iframe></div>
</figure>
</div>
<div class="teaser__content-headline" data-overlay-target="teaser__content">
<h3 class="headline headline--5"><span class="f-w-normal">G. Cardascia – Bottega D.G.</span><span class="u-hidden-visually">:</span><br />Alle gemeinsam an einen Tisch</h3>
</div>
</div>
</article>
</div>
<div class="teaser-slider__item">
<article class="teaser">
<div class="teaser__content">
<div class="teaser__media">
<figure class="figure" aria-labelledby="figure-81f3-label">
<div class="figure__video-wrapper"><iframe class="figure__video" src="https://www.youtube-nocookie.com/embed/5qYSoZSPYdI?rel=0" allow="fullscreen"></iframe></div>
</figure>
</div>
<div class="teaser__content-headline" data-overlay-target="teaser__content">
<h3 class="headline headline--5"><span class="f-w-normal">G. Cardascia – Bottega D.G.</span><span class="u-hidden-visually">:</span><br />Alle gemeinsam an einen Tisch</h3>
</div>
</div>
</article>
</div>
<div class="teaser-slider__item">
<article class="teaser">
<div class="teaser__content">
<div class="teaser__media">
<figure class="figure" aria-labelledby="figure-db17-label">
<div class="figure__video-wrapper"><iframe class="figure__video" src="https://www.youtube-nocookie.com/embed/5qYSoZSPYdI?rel=0" allow="fullscreen"></iframe></div>
</figure>
</div>
<div class="teaser__content-headline" data-overlay-target="teaser__content">
<h3 class="headline headline--5"><span class="f-w-normal">G. Cardascia – Bottega D.G.</span><span class="u-hidden-visually">:</span><br />Alle gemeinsam an einen Tisch</h3>
</div>
</div>
</article>
</div>
</div>
</div>
<div class="teaser-slider__controls slider__controls"></div>
</div>
</div>
</div>
<div class="story-module__bottom">
<div class="story-module__button"><a class="button button--secondary button--transparent" href="#"><svg class="icon icon--arrow-right button__icon" viewBox="0 0 200 200">
<use xlink:href="#icon-arrow-right"></use>
</svg><span class="button__text">Alle Videos</span></a></div>
</div>
</div>
</div>
</div>{
"variants": "videos",
"moduleSlider": {
"title": null,
"items": [
{
"use": "teaser--video",
"settings": {
"headline": {
"text": "Der Mikrokosmos Schwabstrasse\n"
}
}
},
{
"use": "teaser--video"
},
{
"use": "teaser--video"
},
{
"use": "teaser--video"
},
{
"use": "teaser--video"
},
{
"use": "teaser--video"
},
{
"use": "teaser--video"
}
]
},
"backgroundColor": "blue",
"content": {
"title": "#[span.f-w-normal Videos]#[br]Aus dem Themenbereich\n"
},
"contentAction": {
"button": {
"text": "Alle Videos",
"transparent": true
}
}
}
full-video @story-module--full-video
<div class="story-module story-module--violet story-module--full-video">
<div class="story-module__inner">
<div class="story-module__content-wrap">
<div class="story-module__content">
<div class="story-module__headline">
<h2 class="headline headline--1"><span class="f-w-normal">Spitzmarke</span><br />Headline des Moduls</h2>
</div>
</div>
<div class="story-module__video">
<figure class="figure" aria-labelledby="figure-cadf-label">
<div class="figure__video-wrapper"><iframe class="figure__video" src="https://www.youtube-nocookie.com/embed/5qYSoZSPYdI?rel=0" allow="fullscreen"></iframe></div>
<figcaption class="figure__caption" id="figure-cadf-label"><b>Titel des Videos</b><br /><span class="u-hidden-visually">Dauer: </span>01:23</figcaption>
</figure>
</div>
</div>
</div>
</div>{
"variants": "full-video",
"moduleSlider": null,
"backgroundColor": "violet",
"content": {
"title": "#[span.f-w-normal Spitzmarke]#[br]Headline des Moduls\n"
},
"video": true
}
Border blue-medium @story-module--border-blue-medium
<div class="story-module story-module--primary story-module--border-blue-medium">
<div class="story-module__inner">
<div class="story-module__content-wrap">
<div class="story-module__slider">
<div class="teaser-slider">
<div class="teaser-slider__inner">
<div class="teaser-slider__block">
<div class="teaser-slider__items">
<div class="teaser-slider__item">
<article class="teaser">
<div class="teaser__content">
<div class="teaser__media">
<div class="image loading" style="padding-top: 66.66666666666666%;"><noscript><img class="image__fallback" alt="Teaser Thumb" height="400" src="https://bildermangel.de/600x400/F5F5F5/28281a.png?text=600x400" width="600" /></noscript><img class="image__img js-lazyload" data-src="https://bildermangel.de/600x400/F5F5F5/28281a.png?text=600x400" width="600" height="400" alt="Teaser Thumb" /></div>
</div><a class="teaser__content-headline js-overlay-link" href="#" data-overlay-target="teaser__content">
<h3 class="headline headline--5"><span class="f-w-normal">Slide 1. C. Dahl – GF BW Stiftung</span><span class="u-hidden-visually">:</span><br />Der Mikrokosmos Schwabstrasse</h3>
</a>
</div>
</article>
</div>
<div class="teaser-slider__item">
<article class="teaser">
<div class="teaser__content">
<div class="teaser__media">
<div class="image loading" style="padding-top: 66.66666666666666%;"><noscript><img class="image__fallback" alt="Teaser Thumb" height="400" src="https://bildermangel.de/600x400/F5F5F5/28281a.png?text=600x400" width="600" /></noscript><img class="image__img js-lazyload" data-src="https://bildermangel.de/600x400/F5F5F5/28281a.png?text=600x400" width="600" height="400" alt="Teaser Thumb" /></div>
</div><a class="teaser__content-headline js-overlay-link" href="#" data-overlay-target="teaser__content">
<h3 class="headline headline--5"><span class="f-w-normal">Slide 2. C. Dahl – GF BW Stiftung</span><span class="u-hidden-visually">:</span><br />Der Mikrokosmos Schwabstrasse</h3>
</a>
</div>
</article>
</div>
<div class="teaser-slider__item">
<article class="teaser">
<div class="teaser__content">
<div class="teaser__media">
<div class="image loading" style="padding-top: 66.66666666666666%;"><noscript><img class="image__fallback" alt="Teaser Thumb" height="400" src="https://bildermangel.de/600x400/F5F5F5/28281a.png?text=600x400" width="600" /></noscript><img class="image__img js-lazyload" data-src="https://bildermangel.de/600x400/F5F5F5/28281a.png?text=600x400" width="600" height="400" alt="Teaser Thumb" /></div>
</div><a class="teaser__content-headline js-overlay-link" href="#" data-overlay-target="teaser__content">
<h3 class="headline headline--5"><span class="f-w-normal">Slide 3. C. Dahl – GF BW Stiftung</span><span class="u-hidden-visually">:</span><br />Der Mikrokosmos Schwabstrasse</h3>
</a>
</div>
</article>
</div>
<div class="teaser-slider__item">
<article class="teaser">
<div class="teaser__content">
<div class="teaser__media">
<div class="image loading" style="padding-top: 66.66666666666666%;"><noscript><img class="image__fallback" alt="Teaser Thumb" height="400" src="https://bildermangel.de/600x400/F5F5F5/28281a.png?text=600x400" width="600" /></noscript><img class="image__img js-lazyload" data-src="https://bildermangel.de/600x400/F5F5F5/28281a.png?text=600x400" width="600" height="400" alt="Teaser Thumb" /></div>
</div><a class="teaser__content-headline js-overlay-link" href="#" data-overlay-target="teaser__content">
<h3 class="headline headline--5"><span class="f-w-normal">Slide 4. C. Dahl – GF BW Stiftung</span><span class="u-hidden-visually">:</span><br />Der Mikrokosmos Schwabstrasse</h3>
</a>
</div>
</article>
</div>
<div class="teaser-slider__item">
<article class="teaser">
<div class="teaser__content">
<div class="teaser__media">
<div class="image loading" style="padding-top: 66.66666666666666%;"><noscript><img class="image__fallback" alt="Teaser Thumb" height="400" src="https://bildermangel.de/600x400/F5F5F5/28281a.png?text=600x400" width="600" /></noscript><img class="image__img js-lazyload" data-src="https://bildermangel.de/600x400/F5F5F5/28281a.png?text=600x400" width="600" height="400" alt="Teaser Thumb" /></div>
</div><a class="teaser__content-headline js-overlay-link" href="#" data-overlay-target="teaser__content">
<h3 class="headline headline--5"><span class="f-w-normal">Slide 5. C. Dahl – GF BW Stiftung</span><span class="u-hidden-visually">:</span><br />Der Mikrokosmos Schwabstrasse</h3>
</a>
</div>
</article>
</div>
<div class="teaser-slider__item">
<article class="teaser">
<div class="teaser__content">
<div class="teaser__media">
<div class="image loading" style="padding-top: 66.66666666666666%;"><noscript><img class="image__fallback" alt="Teaser Thumb" height="400" src="https://bildermangel.de/600x400/F5F5F5/28281a.png?text=600x400" width="600" /></noscript><img class="image__img js-lazyload" data-src="https://bildermangel.de/600x400/F5F5F5/28281a.png?text=600x400" width="600" height="400" alt="Teaser Thumb" /></div>
</div><a class="teaser__content-headline js-overlay-link" href="#" data-overlay-target="teaser__content">
<h3 class="headline headline--5"><span class="f-w-normal">Slide 6. C. Dahl – GF BW Stiftung</span><span class="u-hidden-visually">:</span><br />Der Mikrokosmos Schwabstrasse</h3>
</a>
</div>
</article>
</div>
<div class="teaser-slider__item">
<article class="teaser">
<div class="teaser__content">
<div class="teaser__media">
<div class="image loading" style="padding-top: 66.66666666666666%;"><noscript><img class="image__fallback" alt="Teaser Thumb" height="400" src="https://bildermangel.de/600x400/F5F5F5/28281a.png?text=600x400" width="600" /></noscript><img class="image__img js-lazyload" data-src="https://bildermangel.de/600x400/F5F5F5/28281a.png?text=600x400" width="600" height="400" alt="Teaser Thumb" /></div>
</div><a class="teaser__content-headline js-overlay-link" href="#" data-overlay-target="teaser__content">
<h3 class="headline headline--5"><span class="f-w-normal">Slide 7. C. Dahl – GF BW Stiftung</span><span class="u-hidden-visually">:</span><br />Der Mikrokosmos Schwabstrasse</h3>
</a>
</div>
</article>
</div>
<div class="teaser-slider__item">
<article class="teaser">
<div class="teaser__content">
<div class="teaser__media">
<div class="image loading" style="padding-top: 66.66666666666666%;"><noscript><img class="image__fallback" alt="Teaser Thumb" height="400" src="https://bildermangel.de/600x400/F5F5F5/28281a.png?text=600x400" width="600" /></noscript><img class="image__img js-lazyload" data-src="https://bildermangel.de/600x400/F5F5F5/28281a.png?text=600x400" width="600" height="400" alt="Teaser Thumb" /></div>
</div><a class="teaser__content-headline js-overlay-link" href="#" data-overlay-target="teaser__content">
<h3 class="headline headline--5"><span class="f-w-normal">Slide 8. C. Dahl – GF BW Stiftung</span><span class="u-hidden-visually">:</span><br />Der Mikrokosmos Schwabstrasse</h3>
</a>
</div>
</article>
</div>
</div>
</div>
<div class="teaser-slider__controls slider__controls"></div>
</div>
</div>
</div>
</div>
</div>
</div>{
"variants": "primary",
"moduleSlider": {
"title": null
},
"borderColor": "blue-medium"
}