Default @content-carousel
<div class="content-carousel content-carousel--violet">
<div class="content-carousel__inner">
<div class="content-carousel__content-wrap">
<div class="content-carousel__content">
<div class="content-carousel__top">
<h2 class="headline headline--1"><span class="f-w-normal">Unsere Mission</span> <span class="u-hidden-visually">:</span> <br /> <span class="f-w-bold">Den Südwesten als lebenswerte Heimat erhalten</span></h2>
</div>
<div class="content-carousel__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" href="#" data-overlay-target="teaser__content">
<h3 class="headline headline--5"><span class="f-w-normal">Lorem ipsum dolor</span><span class="u-hidden-visually">:</span><br />Stipendium lorem ipsum</h3>
</a>
</div>
<div class="teaser__icon-button">
<div class="quickinfo">
<div class="quickinfo__button-wrap"><button class="icon-button quickinfo__button" type="button" aria-expanded="false" aria-controls="id-c055-content" id="id-c055-title"><svg class="icon icon--list icon-button__icon" viewBox="0 0 200 200" role="img" aria-labelledby="icon-9453-title">
<title id="icon-9453-title">Schnellinfo zu: Name des Programms zeigen</title>
<use xlink:href="#icon-list"></use>
</svg></button></div>
<article class="quickinfo__panel" id="id-c055-content" aria-labelledby="id-c055-title">
<div class="quickinfo__content" tabindex="-1">
<div class="quickinfo__content-inner">
<div class="quickinfo__block" id="block-id-9c8b">
<h2 class="headline headline--3">Headline 3</h2>
</div>
<div class="quickinfo__block" id="block-id-afaa">
<div class="text">
<p><b>Kurzbeschreibung</b> <br />Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
</div>
</div>
<div class="quickinfo__block" id="block-id-fa9a">
<div class="jumpbox jumpbox--condensed">
<div class="jumpbox__text">
<div class="text">
<p>Hinweisbox <a class="link" href="#">mit Link</a></p>
</div>
</div>
</div>
</div>
<div class="quickinfo__block" id="block-id-8f34">
<div class="link-list">
<ul class="link-list__list">
<li class="link-list__item"><a class="icon-link" href="#"><span class="icon-link__icon"><svg class="icon icon--arrow-right" viewBox="0 0 200 200">
<use xlink:href="#icon-arrow-right"></use>
</svg></span><span class="icon-link__text">Kurzfilmwettbewerb „Smart. Ohne Phone startet“</span></a></li>
<li class="link-list__item"><a class="icon-link" href="#"><span class="icon-link__icon"><svg class="icon icon--arrow-right" viewBox="0 0 200 200">
<use xlink:href="#icon-arrow-right"></use>
</svg></span><span class="icon-link__text">Stiftungsprogramm verbessert Integration in Baden-Württemberg</span></a></li>
<li class="link-list__item"><a class="icon-link" href="#"><span class="icon-link__icon"><svg class="icon icon--arrow-right" viewBox="0 0 200 200">
<use xlink:href="#icon-arrow-right"></use>
</svg></span><span class="icon-link__text">Ausschreibung Lehrerpreis der Stiftung der Kinderland</span></a></li>
</ul>
</div>
</div>
<div class="quickinfo__block" id="block-id-6917"><a class="button button--primary" 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">Button</span></a></div><button class="icon-button icon-button--secondary quickinfo__close" type="button"><svg class="icon icon--close icon-button__icon" viewBox="0 0 200 200" role="img" aria-labelledby="icon-5b8d-title">
<title id="icon-5b8d-title">Schnellinfo schließen</title>
<use xlink:href="#icon-close"></use>
</svg></button>
</div>
</div>
</article>
</div>
</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" href="#" data-overlay-target="teaser__content">
<h3 class="headline headline--5"><span class="f-w-normal">Lorem ipsum dolor</span><span class="u-hidden-visually">:</span><br />Stipendium lorem ipsum</h3>
</a>
</div>
<div class="teaser__icon-button">
<div class="quickinfo">
<div class="quickinfo__button-wrap"><button class="icon-button quickinfo__button" type="button" aria-expanded="false" aria-controls="id-08bb-content" id="id-08bb-title"><svg class="icon icon--list icon-button__icon" viewBox="0 0 200 200" role="img" aria-labelledby="icon-6b8b-title">
<title id="icon-6b8b-title">Schnellinfo zu: Name des Programms zeigen</title>
<use xlink:href="#icon-list"></use>
</svg></button></div>
<article class="quickinfo__panel" id="id-08bb-content" aria-labelledby="id-08bb-title">
<div class="quickinfo__content" tabindex="-1">
<div class="quickinfo__content-inner">
<div class="quickinfo__block" id="block-id-3328">
<h2 class="headline headline--3">Headline 3</h2>
</div>
<div class="quickinfo__block" id="block-id-41fd">
<div class="text">
<p><b>Kurzbeschreibung</b> <br />Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
</div>
</div>
<div class="quickinfo__block" id="block-id-19ef">
<div class="jumpbox jumpbox--condensed">
<div class="jumpbox__text">
<div class="text">
<p>Hinweisbox <a class="link" href="#">mit Link</a></p>
</div>
</div>
</div>
</div>
<div class="quickinfo__block" id="block-id-9476">
<div class="link-list">
<ul class="link-list__list">
<li class="link-list__item"><a class="icon-link" href="#"><span class="icon-link__icon"><svg class="icon icon--arrow-right" viewBox="0 0 200 200">
<use xlink:href="#icon-arrow-right"></use>
</svg></span><span class="icon-link__text">Kurzfilmwettbewerb „Smart. Ohne Phone startet“</span></a></li>
<li class="link-list__item"><a class="icon-link" href="#"><span class="icon-link__icon"><svg class="icon icon--arrow-right" viewBox="0 0 200 200">
<use xlink:href="#icon-arrow-right"></use>
</svg></span><span class="icon-link__text">Stiftungsprogramm verbessert Integration in Baden-Württemberg</span></a></li>
<li class="link-list__item"><a class="icon-link" href="#"><span class="icon-link__icon"><svg class="icon icon--arrow-right" viewBox="0 0 200 200">
<use xlink:href="#icon-arrow-right"></use>
</svg></span><span class="icon-link__text">Ausschreibung Lehrerpreis der Stiftung der Kinderland</span></a></li>
</ul>
</div>
</div>
<div class="quickinfo__block" id="block-id-8db8"><a class="button button--primary" 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">Button</span></a></div><button class="icon-button icon-button--secondary quickinfo__close" type="button"><svg class="icon icon--close icon-button__icon" viewBox="0 0 200 200" role="img" aria-labelledby="icon-4ec8-title">
<title id="icon-4ec8-title">Schnellinfo schließen</title>
<use xlink:href="#icon-close"></use>
</svg></button>
</div>
</div>
</article>
</div>
</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" href="#" data-overlay-target="teaser__content">
<h3 class="headline headline--5"><span class="f-w-normal">Lorem ipsum dolor</span><span class="u-hidden-visually">:</span><br />Stipendium lorem ipsum</h3>
</a>
</div>
<div class="teaser__icon-button">
<div class="quickinfo">
<div class="quickinfo__button-wrap"><button class="icon-button quickinfo__button" type="button" aria-expanded="false" aria-controls="id-df58-content" id="id-df58-title"><svg class="icon icon--list icon-button__icon" viewBox="0 0 200 200" role="img" aria-labelledby="icon-4eaa-title">
<title id="icon-4eaa-title">Schnellinfo zu: Name des Programms zeigen</title>
<use xlink:href="#icon-list"></use>
</svg></button></div>
<article class="quickinfo__panel" id="id-df58-content" aria-labelledby="id-df58-title">
<div class="quickinfo__content" tabindex="-1">
<div class="quickinfo__content-inner">
<div class="quickinfo__block" id="block-id-ed47">
<h2 class="headline headline--3">Headline 3</h2>
</div>
<div class="quickinfo__block" id="block-id-d462">
<div class="text">
<p><b>Kurzbeschreibung</b> <br />Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
</div>
</div>
<div class="quickinfo__block" id="block-id-5c22">
<div class="jumpbox jumpbox--condensed">
<div class="jumpbox__text">
<div class="text">
<p>Hinweisbox <a class="link" href="#">mit Link</a></p>
</div>
</div>
</div>
</div>
<div class="quickinfo__block" id="block-id-5649">
<div class="link-list">
<ul class="link-list__list">
<li class="link-list__item"><a class="icon-link" href="#"><span class="icon-link__icon"><svg class="icon icon--arrow-right" viewBox="0 0 200 200">
<use xlink:href="#icon-arrow-right"></use>
</svg></span><span class="icon-link__text">Kurzfilmwettbewerb „Smart. Ohne Phone startet“</span></a></li>
<li class="link-list__item"><a class="icon-link" href="#"><span class="icon-link__icon"><svg class="icon icon--arrow-right" viewBox="0 0 200 200">
<use xlink:href="#icon-arrow-right"></use>
</svg></span><span class="icon-link__text">Stiftungsprogramm verbessert Integration in Baden-Württemberg</span></a></li>
<li class="link-list__item"><a class="icon-link" href="#"><span class="icon-link__icon"><svg class="icon icon--arrow-right" viewBox="0 0 200 200">
<use xlink:href="#icon-arrow-right"></use>
</svg></span><span class="icon-link__text">Ausschreibung Lehrerpreis der Stiftung der Kinderland</span></a></li>
</ul>
</div>
</div>
<div class="quickinfo__block" id="block-id-dac9"><a class="button button--primary" 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">Button</span></a></div><button class="icon-button icon-button--secondary quickinfo__close" type="button"><svg class="icon icon--close icon-button__icon" viewBox="0 0 200 200" role="img" aria-labelledby="icon-868b-title">
<title id="icon-868b-title">Schnellinfo schließen</title>
<use xlink:href="#icon-close"></use>
</svg></button>
</div>
</div>
</article>
</div>
</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" href="#" data-overlay-target="teaser__content">
<h3 class="headline headline--5"><span class="f-w-normal">Lorem ipsum dolor</span><span class="u-hidden-visually">:</span><br />Stipendium lorem ipsum</h3>
</a>
</div>
<div class="teaser__icon-button">
<div class="quickinfo">
<div class="quickinfo__button-wrap"><button class="icon-button quickinfo__button" type="button" aria-expanded="false" aria-controls="id-c79f-content" id="id-c79f-title"><svg class="icon icon--list icon-button__icon" viewBox="0 0 200 200" role="img" aria-labelledby="icon-c726-title">
<title id="icon-c726-title">Schnellinfo zu: Name des Programms zeigen</title>
<use xlink:href="#icon-list"></use>
</svg></button></div>
<article class="quickinfo__panel" id="id-c79f-content" aria-labelledby="id-c79f-title">
<div class="quickinfo__content" tabindex="-1">
<div class="quickinfo__content-inner">
<div class="quickinfo__block" id="block-id-60b4">
<h2 class="headline headline--3">Headline 3</h2>
</div>
<div class="quickinfo__block" id="block-id-8bf5">
<div class="text">
<p><b>Kurzbeschreibung</b> <br />Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
</div>
</div>
<div class="quickinfo__block" id="block-id-c4e9">
<div class="jumpbox jumpbox--condensed">
<div class="jumpbox__text">
<div class="text">
<p>Hinweisbox <a class="link" href="#">mit Link</a></p>
</div>
</div>
</div>
</div>
<div class="quickinfo__block" id="block-id-7a7f">
<div class="link-list">
<ul class="link-list__list">
<li class="link-list__item"><a class="icon-link" href="#"><span class="icon-link__icon"><svg class="icon icon--arrow-right" viewBox="0 0 200 200">
<use xlink:href="#icon-arrow-right"></use>
</svg></span><span class="icon-link__text">Kurzfilmwettbewerb „Smart. Ohne Phone startet“</span></a></li>
<li class="link-list__item"><a class="icon-link" href="#"><span class="icon-link__icon"><svg class="icon icon--arrow-right" viewBox="0 0 200 200">
<use xlink:href="#icon-arrow-right"></use>
</svg></span><span class="icon-link__text">Stiftungsprogramm verbessert Integration in Baden-Württemberg</span></a></li>
<li class="link-list__item"><a class="icon-link" href="#"><span class="icon-link__icon"><svg class="icon icon--arrow-right" viewBox="0 0 200 200">
<use xlink:href="#icon-arrow-right"></use>
</svg></span><span class="icon-link__text">Ausschreibung Lehrerpreis der Stiftung der Kinderland</span></a></li>
</ul>
</div>
</div>
<div class="quickinfo__block" id="block-id-ef42"><a class="button button--primary" 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">Button</span></a></div><button class="icon-button icon-button--secondary quickinfo__close" type="button"><svg class="icon icon--close icon-button__icon" viewBox="0 0 200 200" role="img" aria-labelledby="icon-eae5-title">
<title id="icon-eae5-title">Schnellinfo schließen</title>
<use xlink:href="#icon-close"></use>
</svg></button>
</div>
</div>
</article>
</div>
</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" href="#" data-overlay-target="teaser__content">
<h3 class="headline headline--5"><span class="f-w-normal">Lorem ipsum dolor</span><span class="u-hidden-visually">:</span><br />Stipendium lorem ipsum</h3>
</a>
</div>
<div class="teaser__icon-button">
<div class="quickinfo">
<div class="quickinfo__button-wrap"><button class="icon-button quickinfo__button" type="button" aria-expanded="false" aria-controls="id-6e01-content" id="id-6e01-title"><svg class="icon icon--list icon-button__icon" viewBox="0 0 200 200" role="img" aria-labelledby="icon-f984-title">
<title id="icon-f984-title">Schnellinfo zu: Name des Programms zeigen</title>
<use xlink:href="#icon-list"></use>
</svg></button></div>
<article class="quickinfo__panel" id="id-6e01-content" aria-labelledby="id-6e01-title">
<div class="quickinfo__content" tabindex="-1">
<div class="quickinfo__content-inner">
<div class="quickinfo__block" id="block-id-a4ff">
<h2 class="headline headline--3">Headline 3</h2>
</div>
<div class="quickinfo__block" id="block-id-390e">
<div class="text">
<p><b>Kurzbeschreibung</b> <br />Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
</div>
</div>
<div class="quickinfo__block" id="block-id-9a34">
<div class="jumpbox jumpbox--condensed">
<div class="jumpbox__text">
<div class="text">
<p>Hinweisbox <a class="link" href="#">mit Link</a></p>
</div>
</div>
</div>
</div>
<div class="quickinfo__block" id="block-id-960b">
<div class="link-list">
<ul class="link-list__list">
<li class="link-list__item"><a class="icon-link" href="#"><span class="icon-link__icon"><svg class="icon icon--arrow-right" viewBox="0 0 200 200">
<use xlink:href="#icon-arrow-right"></use>
</svg></span><span class="icon-link__text">Kurzfilmwettbewerb „Smart. Ohne Phone startet“</span></a></li>
<li class="link-list__item"><a class="icon-link" href="#"><span class="icon-link__icon"><svg class="icon icon--arrow-right" viewBox="0 0 200 200">
<use xlink:href="#icon-arrow-right"></use>
</svg></span><span class="icon-link__text">Stiftungsprogramm verbessert Integration in Baden-Württemberg</span></a></li>
<li class="link-list__item"><a class="icon-link" href="#"><span class="icon-link__icon"><svg class="icon icon--arrow-right" viewBox="0 0 200 200">
<use xlink:href="#icon-arrow-right"></use>
</svg></span><span class="icon-link__text">Ausschreibung Lehrerpreis der Stiftung der Kinderland</span></a></li>
</ul>
</div>
</div>
<div class="quickinfo__block" id="block-id-8159"><a class="button button--primary" 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">Button</span></a></div><button class="icon-button icon-button--secondary quickinfo__close" type="button"><svg class="icon icon--close icon-button__icon" viewBox="0 0 200 200" role="img" aria-labelledby="icon-6928-title">
<title id="icon-6928-title">Schnellinfo schließen</title>
<use xlink:href="#icon-close"></use>
</svg></button>
</div>
</div>
</article>
</div>
</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" href="#" data-overlay-target="teaser__content">
<h3 class="headline headline--5"><span class="f-w-normal">Lorem ipsum dolor</span><span class="u-hidden-visually">:</span><br />Stipendium lorem ipsum</h3>
</a>
</div>
<div class="teaser__icon-button">
<div class="quickinfo">
<div class="quickinfo__button-wrap"><button class="icon-button quickinfo__button" type="button" aria-expanded="false" aria-controls="id-fb8b-content" id="id-fb8b-title"><svg class="icon icon--list icon-button__icon" viewBox="0 0 200 200" role="img" aria-labelledby="icon-b162-title">
<title id="icon-b162-title">Schnellinfo zu: Name des Programms zeigen</title>
<use xlink:href="#icon-list"></use>
</svg></button></div>
<article class="quickinfo__panel" id="id-fb8b-content" aria-labelledby="id-fb8b-title">
<div class="quickinfo__content" tabindex="-1">
<div class="quickinfo__content-inner">
<div class="quickinfo__block" id="block-id-44de">
<h2 class="headline headline--3">Headline 3</h2>
</div>
<div class="quickinfo__block" id="block-id-4a1d">
<div class="text">
<p><b>Kurzbeschreibung</b> <br />Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
</div>
</div>
<div class="quickinfo__block" id="block-id-09a2">
<div class="jumpbox jumpbox--condensed">
<div class="jumpbox__text">
<div class="text">
<p>Hinweisbox <a class="link" href="#">mit Link</a></p>
</div>
</div>
</div>
</div>
<div class="quickinfo__block" id="block-id-3a19">
<div class="link-list">
<ul class="link-list__list">
<li class="link-list__item"><a class="icon-link" href="#"><span class="icon-link__icon"><svg class="icon icon--arrow-right" viewBox="0 0 200 200">
<use xlink:href="#icon-arrow-right"></use>
</svg></span><span class="icon-link__text">Kurzfilmwettbewerb „Smart. Ohne Phone startet“</span></a></li>
<li class="link-list__item"><a class="icon-link" href="#"><span class="icon-link__icon"><svg class="icon icon--arrow-right" viewBox="0 0 200 200">
<use xlink:href="#icon-arrow-right"></use>
</svg></span><span class="icon-link__text">Stiftungsprogramm verbessert Integration in Baden-Württemberg</span></a></li>
<li class="link-list__item"><a class="icon-link" href="#"><span class="icon-link__icon"><svg class="icon icon--arrow-right" viewBox="0 0 200 200">
<use xlink:href="#icon-arrow-right"></use>
</svg></span><span class="icon-link__text">Ausschreibung Lehrerpreis der Stiftung der Kinderland</span></a></li>
</ul>
</div>
</div>
<div class="quickinfo__block" id="block-id-62e8"><a class="button button--primary" 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">Button</span></a></div><button class="icon-button icon-button--secondary quickinfo__close" type="button"><svg class="icon icon--close icon-button__icon" viewBox="0 0 200 200" role="img" aria-labelledby="icon-7d87-title">
<title id="icon-7d87-title">Schnellinfo schließen</title>
<use xlink:href="#icon-close"></use>
</svg></button>
</div>
</div>
</article>
</div>
</div>
</article>
</div>
</div>
</div>
<div class="teaser-slider__controls slider__controls"></div>
</div>
</div>
</div>
<div class="content-carousel__bottom">
<div class="link-list link-list--right">
<div class="text link-list__text">
<p>Ich bin 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">Ich in ein Link</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>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>{
"backgroundColor": "violet",
"title": "#[span.f-w-normal Unsere Mission] #[span.u-hidden-visually :] #[br] #[span.f-w-bold Den Südwesten als lebenswerte Heimat erhalten]\n",
"links": {
"text": {
"content": "p Ich bin Freitext"
},
"items": [
{
"link": "#",
"icon": "chevron-right",
"text": "Ich in ein Link"
}
]
},
"slider": {
"items": [
{
"use": "teaser--iconbutton"
},
{
"use": "teaser--iconbutton"
},
{
"use": "teaser--iconbutton"
},
{
"use": "teaser--iconbutton"
},
{
"use": "teaser--iconbutton"
},
{
"use": "teaser--iconbutton"
}
]
}
}
Small @content-carousel--small
<div class="content-carousel content-carousel--yellow-dark content-carousel--small">
<div class="content-carousel__inner">
<div class="content-carousel__content-wrap">
<div class="content-carousel__content">
<div class="content-carousel__top">
<div class="content-carousel__image">
<div class="image loading" style="padding-top: 27.43362831858407%;"><noscript><img class="image__fallback" alt="Fancy-Title" height="93" src="/images/fancy-font.png" width="339" /></noscript><img class="image__img js-lazyload" data-src="/images/fancy-font.png" width="339" height="93" alt="Fancy-Title" /></div>
</div>
<h2 class="headline headline--1"><span class="f-w-normal">#wirsinds</span></h2>
</div>
<div class="content-carousel__slider">
<div class="teaser-slider teaser-slider--small">
<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" href="#" data-overlay-target="teaser__content">
<h3 class="headline headline--5"><span class="f-w-normal">Lorem ipsum dolor</span><span class="u-hidden-visually">:</span><br />Diam voluptua at vero</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" href="#" data-overlay-target="teaser__content">
<h3 class="headline headline--5"><span class="f-w-normal">Lorem ipsum dolor</span><span class="u-hidden-visually">:</span><br />Diam voluptua at vero</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" href="#" data-overlay-target="teaser__content">
<h3 class="headline headline--5"><span class="f-w-normal">Lorem ipsum dolor</span><span class="u-hidden-visually">:</span><br />Diam voluptua at vero</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" href="#" data-overlay-target="teaser__content">
<h3 class="headline headline--5"><span class="f-w-normal">Lorem ipsum dolor</span><span class="u-hidden-visually">:</span><br />Diam voluptua at vero</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" href="#" data-overlay-target="teaser__content">
<h3 class="headline headline--5"><span class="f-w-normal">Lorem ipsum dolor</span><span class="u-hidden-visually">:</span><br />Diam voluptua at vero</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" href="#" data-overlay-target="teaser__content">
<h3 class="headline headline--5"><span class="f-w-normal">Lorem ipsum dolor</span><span class="u-hidden-visually">:</span><br />Diam voluptua at vero</h3>
</a>
</div>
</article>
</div>
</div>
</div>
<div class="teaser-slider__controls slider__controls"></div>
</div>
</div>
</div>
<div class="content-carousel__bottom">
<div class="link-list link-list--right">
<div class="text link-list__text">
<p>Ich bin Freitext</p>
</div>
<ul class="link-list__list">
<li class="link-list__item"><a class="icon-link icon-link--right" href="#" rel="noopener noreferrer" target="_blank"><span class="icon-link__text">Ich in ein externer Link</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>{
"backgroundColor": "yellow-dark",
"title": "#[span.f-w-normal #wirsinds]\n",
"links": {
"text": {
"content": "p Ich bin Freitext"
},
"items": [
{
"link": "#",
"external": true,
"icon": "arrow-external",
"text": "Ich in ein externer Link"
}
]
},
"slider": {
"items": [
{
"use": "teaser"
},
{
"use": "teaser"
},
{
"use": "teaser"
},
{
"use": "teaser"
},
{
"use": "teaser"
},
{
"use": "teaser"
}
],
"small": true
},
"small": true,
"image": {
"src": "/images/fancy-font.png",
"alt": "Fancy-Title",
"width": 339,
"height": 93
}
}
Events @content-carousel--events
<div class="content-carousel content-carousel--liso-yellow content-carousel--events">
<div class="content-carousel__inner">
<div class="content-carousel__content-wrap">
<div class="content-carousel__content">
<div class="content-carousel__top">
<h2 class="headline headline--1"><span class="f-w-normal">Lorem ipsum</span> <span class="u-hidden-visually">:</span> <br /> <span class="f-w-bold">Lorem ipsum</span></h2>
</div>
<div class="content-carousel__slider">
<div class="teaser-slider teaser-slider--small">
<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>
<div class="teaser__content-event">
<div class="teaser__content-event__date"><svg class="icon icon--calendar" viewBox="0 0 200 200">
<use xlink:href="#icon-calendar"></use>
</svg><span class="teaser__content-event__date__text">01.12.2021</span></div>
<div class="teaser__content-event__location"><svg class="icon icon--location" viewBox="0 0 200 200">
<use xlink:href="#icon-location"></use>
</svg><span class="teaser__content-event__date__text">Stuttgart</span></div>
</div><a class="teaser__content-headline" href="#" data-overlay-target="teaser__content">
<h3 class="headline headline--5">Lorem ipsum dolor sit amet</h3>
</a>
</div>
</article>
</div>
<div class="teaser-slider__item">
<article class="teaser">
<div class="teaser__content">
<div class="teaser__canvas teaser__canvas--liso-sand">
<div class="teaser__canvas__inner"><svg class="icon icon--theatre" viewBox="0 0 200 200">
<use xlink:href="#icon-theatre"></use>
</svg></div>
</div>
<div class="teaser__content-event">
<div class="teaser__content-event__date"><svg class="icon icon--calendar" viewBox="0 0 200 200">
<use xlink:href="#icon-calendar"></use>
</svg><span class="teaser__content-event__date__text">01.12.2021</span></div>
<div class="teaser__content-event__location"><svg class="icon icon--location" viewBox="0 0 200 200">
<use xlink:href="#icon-location"></use>
</svg><span class="teaser__content-event__date__text">Stuttgart</span></div>
</div><a class="teaser__content-headline" href="#" data-overlay-target="teaser__content">
<h3 class="headline headline--5">Lorem ipsum dolor sit amet</h3>
</a>
</div>
</article>
</div>
<div class="teaser-slider__item">
<article class="teaser">
<div class="teaser__content">
<div class="teaser__canvas teaser__canvas--liso-purple">
<div class="teaser__canvas__inner"><svg class="icon icon--reading" viewBox="0 0 200 200">
<use xlink:href="#icon-reading"></use>
</svg></div>
</div>
<div class="teaser__content-event">
<div class="teaser__content-event__date"><svg class="icon icon--calendar" viewBox="0 0 200 200">
<use xlink:href="#icon-calendar"></use>
</svg><span class="teaser__content-event__date__text">01.12.2021</span></div>
<div class="teaser__content-event__location"><svg class="icon icon--location" viewBox="0 0 200 200">
<use xlink:href="#icon-location"></use>
</svg><span class="teaser__content-event__date__text">Stuttgart</span></div>
</div><a class="teaser__content-headline" href="#" data-overlay-target="teaser__content">
<h3 class="headline headline--5">Lorem ipsum dolor sit amet</h3>
</a>
</div>
</article>
</div>
<div class="teaser-slider__item">
<article class="teaser">
<div class="teaser__content">
<div class="teaser__canvas teaser__canvas--liso-green">
<div class="teaser__canvas__inner"><svg class="icon icon--exhibition" viewBox="0 0 200 200">
<use xlink:href="#icon-exhibition"></use>
</svg></div>
</div>
<div class="teaser__content-event">
<div class="teaser__content-event__date"><svg class="icon icon--calendar" viewBox="0 0 200 200">
<use xlink:href="#icon-calendar"></use>
</svg><span class="teaser__content-event__date__text">01.12.2021</span></div>
<div class="teaser__content-event__location"><svg class="icon icon--location" viewBox="0 0 200 200">
<use xlink:href="#icon-location"></use>
</svg><span class="teaser__content-event__date__text">Stuttgart</span></div>
</div><a class="teaser__content-headline" href="#" data-overlay-target="teaser__content">
<h3 class="headline headline--5">Lorem ipsum dolor sit amet</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>
<div class="teaser__content-event">
<div class="teaser__content-event__date"><svg class="icon icon--calendar" viewBox="0 0 200 200">
<use xlink:href="#icon-calendar"></use>
</svg><span class="teaser__content-event__date__text">01.12.2021</span></div>
<div class="teaser__content-event__location"><svg class="icon icon--location" viewBox="0 0 200 200">
<use xlink:href="#icon-location"></use>
</svg><span class="teaser__content-event__date__text">Stuttgart</span></div>
</div><a class="teaser__content-headline" href="#" data-overlay-target="teaser__content">
<h3 class="headline headline--5">Lorem ipsum dolor sit amet</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>
<div class="teaser__content-event">
<div class="teaser__content-event__date"><svg class="icon icon--calendar" viewBox="0 0 200 200">
<use xlink:href="#icon-calendar"></use>
</svg><span class="teaser__content-event__date__text">01.12.2021</span></div>
<div class="teaser__content-event__location"><svg class="icon icon--location" viewBox="0 0 200 200">
<use xlink:href="#icon-location"></use>
</svg><span class="teaser__content-event__date__text">Stuttgart</span></div>
</div><a class="teaser__content-headline" href="#" data-overlay-target="teaser__content">
<h3 class="headline headline--5">Lorem ipsum dolor sit amet</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>
<div class="teaser__content-event">
<div class="teaser__content-event__date"><svg class="icon icon--calendar" viewBox="0 0 200 200">
<use xlink:href="#icon-calendar"></use>
</svg><span class="teaser__content-event__date__text">01.12.2021</span></div>
<div class="teaser__content-event__location"><svg class="icon icon--location" viewBox="0 0 200 200">
<use xlink:href="#icon-location"></use>
</svg><span class="teaser__content-event__date__text">Stuttgart</span></div>
</div><a class="teaser__content-headline" href="#" data-overlay-target="teaser__content">
<h3 class="headline headline--5">Lorem ipsum dolor sit amet</h3>
</a>
</div>
</article>
</div>
</div>
</div>
<div class="teaser-slider__controls slider__controls"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>{
"backgroundColor": "liso-yellow",
"title": "#[span.f-w-normal Lorem ipsum] #[span.u-hidden-visually :] #[br] #[span.f-w-bold Lorem ipsum]\n",
"links": null,
"slider": {
"items": [
{
"use": "teaser--event"
},
{
"use": "teaser--canvas"
},
{
"use": "teaser--canvas",
"settings": {
"canvas": {
"backgroundColor": "liso-purple",
"icon": "reading"
}
}
},
{
"use": "teaser--canvas",
"settings": {
"canvas": {
"backgroundColor": "liso-green",
"icon": "exhibition"
}
}
},
{
"use": "teaser--event"
},
{
"use": "teaser--event"
},
{
"use": "teaser--event"
}
],
"small": true
},
"events": true
}