Baden-Württemberg Stiftung

Content-Carousel @content-carousel

Design

Variants

Das gesunde Boot
Das gesunde Boot small

Das gesunde Boot @content-carousel--dgb

HTML
Context

<div class="content-carousel content-carousel--dgb-yellows">
  <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 />Diam voluptua at vero</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-d647-content" id="id-d647-title"><svg class="icon icon--list icon-button__icon" viewBox="0 0 200 200" role="img" aria-labelledby="icon-9ba5-title">
                                <title id="icon-9ba5-title">Schnellinfo zu: Name des Programms zeigen</title>
                                <use xlink:href="#icon-list"></use>
                              </svg></button></div>
                          <article class="quickinfo__panel" id="id-d647-content" aria-labelledby="id-d647-title">
                            <div class="quickinfo__content" tabindex="-1">
                              <div class="quickinfo__content-inner">
                                <div class="quickinfo__block" id="block-id-395a">
                                  <h2 class="headline headline--3">Headline 3</h2>
                                </div>
                                <div class="quickinfo__block" id="block-id-9054">
                                  <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-d116">
                                  <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-ce2d">
                                  <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-Wü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-381b"><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-83c7-title">
                                    <title id="icon-83c7-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 />Diam voluptua at vero</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-811e-content" id="id-811e-title"><svg class="icon icon--list icon-button__icon" viewBox="0 0 200 200" role="img" aria-labelledby="icon-8093-title">
                                <title id="icon-8093-title">Schnellinfo zu: Name des Programms zeigen</title>
                                <use xlink:href="#icon-list"></use>
                              </svg></button></div>
                          <article class="quickinfo__panel" id="id-811e-content" aria-labelledby="id-811e-title">
                            <div class="quickinfo__content" tabindex="-1">
                              <div class="quickinfo__content-inner">
                                <div class="quickinfo__block" id="block-id-2152">
                                  <h2 class="headline headline--3">Headline 3</h2>
                                </div>
                                <div class="quickinfo__block" id="block-id-1226">
                                  <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-e24f">
                                  <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-caab">
                                  <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-Wü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-7ddf"><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-a9e8-title">
                                    <title id="icon-a9e8-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 />Diam voluptua at vero</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-486e-content" id="id-486e-title"><svg class="icon icon--list icon-button__icon" viewBox="0 0 200 200" role="img" aria-labelledby="icon-5a09-title">
                                <title id="icon-5a09-title">Schnellinfo zu: Name des Programms zeigen</title>
                                <use xlink:href="#icon-list"></use>
                              </svg></button></div>
                          <article class="quickinfo__panel" id="id-486e-content" aria-labelledby="id-486e-title">
                            <div class="quickinfo__content" tabindex="-1">
                              <div class="quickinfo__content-inner">
                                <div class="quickinfo__block" id="block-id-e07d">
                                  <h2 class="headline headline--3">Headline 3</h2>
                                </div>
                                <div class="quickinfo__block" id="block-id-c7cb">
                                  <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-3252">
                                  <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-815b">
                                  <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-Wü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-c02b"><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-013f-title">
                                    <title id="icon-013f-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 />Diam voluptua at vero</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-5db4-content" id="id-5db4-title"><svg class="icon icon--list icon-button__icon" viewBox="0 0 200 200" role="img" aria-labelledby="icon-2e89-title">
                                <title id="icon-2e89-title">Schnellinfo zu: Name des Programms zeigen</title>
                                <use xlink:href="#icon-list"></use>
                              </svg></button></div>
                          <article class="quickinfo__panel" id="id-5db4-content" aria-labelledby="id-5db4-title">
                            <div class="quickinfo__content" tabindex="-1">
                              <div class="quickinfo__content-inner">
                                <div class="quickinfo__block" id="block-id-ad4b">
                                  <h2 class="headline headline--3">Headline 3</h2>
                                </div>
                                <div class="quickinfo__block" id="block-id-c0f1">
                                  <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-819d">
                                  <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-01bd">
                                  <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-Wü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-3087"><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-52ba-title">
                                    <title id="icon-52ba-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 />Diam voluptua at vero</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-d707-content" id="id-d707-title"><svg class="icon icon--list icon-button__icon" viewBox="0 0 200 200" role="img" aria-labelledby="icon-5d16-title">
                                <title id="icon-5d16-title">Schnellinfo zu: Name des Programms zeigen</title>
                                <use xlink:href="#icon-list"></use>
                              </svg></button></div>
                          <article class="quickinfo__panel" id="id-d707-content" aria-labelledby="id-d707-title">
                            <div class="quickinfo__content" tabindex="-1">
                              <div class="quickinfo__content-inner">
                                <div class="quickinfo__block" id="block-id-5084">
                                  <h2 class="headline headline--3">Headline 3</h2>
                                </div>
                                <div class="quickinfo__block" id="block-id-cc1e">
                                  <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-14e9">
                                  <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-6e61">
                                  <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-Wü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-ebcd"><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-bb3c-title">
                                    <title id="icon-bb3c-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 />Diam voluptua at vero</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-2a3d-content" id="id-2a3d-title"><svg class="icon icon--list icon-button__icon" viewBox="0 0 200 200" role="img" aria-labelledby="icon-9f49-title">
                                <title id="icon-9f49-title">Schnellinfo zu: Name des Programms zeigen</title>
                                <use xlink:href="#icon-list"></use>
                              </svg></button></div>
                          <article class="quickinfo__panel" id="id-2a3d-content" aria-labelledby="id-2a3d-title">
                            <div class="quickinfo__content" tabindex="-1">
                              <div class="quickinfo__content-inner">
                                <div class="quickinfo__block" id="block-id-a5fd">
                                  <h2 class="headline headline--3">Headline 3</h2>
                                </div>
                                <div class="quickinfo__block" id="block-id-3726">
                                  <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-be4e">
                                  <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-8348">
                                  <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-Wü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-483f"><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-2cde-title">
                                    <title id="icon-2cde-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": "dgb-yellows",
  "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"
      }
    ]
  }
}

Das gesunde Boot small @content-carousel--dgb-small

Vorschau in eignem Tab anzeigen

HTML
Context

<div class="content-carousel content-carousel--dgb-yellows 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": "dgb-yellows",
  "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
  }
}

Content-Carousel @content-carousel

Variants

# Das gesunde Boot @content-carousel--dgb

# Das gesunde Boot small @content-carousel--dgb-small

Das gesunde Boot @content-carousel--dgb

Das gesunde Boot small @content-carousel--dgb-small