Default @teaser

<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>

Teaser Video @teaser--video

<article class="teaser">
  <div class="teaser__content">
    <div class="teaser__media">
      <figure class="figure" aria-labelledby="figure-dea8-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">Lorem ipsum dolor</h3>
    </div>
  </div>
</article>

Teaser with Quickinfo @teaser--iconbutton

<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-20e1-content" id="id-20e1-title"><svg class="icon icon--list icon-button__icon" viewBox="0 0 200 200" role="img" aria-labelledby="icon-82a2-title">
            <title id="icon-82a2-title">Schnellinfo zu: Name des Programms zeigen</title>
            <use xlink:href="#icon-list"></use>
          </svg></button></div>
      <article class="quickinfo__panel" id="id-20e1-content" aria-labelledby="id-20e1-title">
        <div class="quickinfo__content" tabindex="-1">
          <div class="quickinfo__content-inner">
            <div class="quickinfo__block" id="block-id-8413">
              <h2 class="headline headline--3">Headline 3</h2>
            </div>
            <div class="quickinfo__block" id="block-id-534e">
              <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-fb02">
              <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-8197">
              <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-53be"><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-d855-title">
                <title id="icon-d855-title">Schnellinfo schließen</title>
                <use xlink:href="#icon-close"></use>
              </svg></button>
          </div>
        </div>
      </article>
    </div>
  </div>
</article>

Teaser mit Event @teaser--event

<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>

Teaser mit Canvas @teaser--canvas

<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>

Teaser for @teaser-filter-list @teaser--teaser-filter

<article class="teaser teaser--filter">
  <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-tags">
      <div class="teaser__content-tag">#technik</div>
      <div class="teaser__content-tag">#elektro</div>
    </div><a class="teaser__content-headline overlay-fifty-fifty__button js-overlay-fifty-fifty" href="#overlay-0" aria-expanded="false" aria-controls="overlay-teaser-1-content" data-overlay-target="teaser__content">
      <h3 class="headline headline--3"><span>Stipendium lorem ipsum</span></h3>
    </a>
    <div class="overlay-fifty-fifty js-slideshow">
      <article class="overlay-fifty-fifty__panel" id="overlay-teaser-1-content" aria-labelledby="overlay-teaser-1-title">
        <div class="overlay-fifty-fifty__content" tabindex="-1">
          <div class="overlay-fifty-fifty__content-inner">
            <div class="overlay-fifty-fifty__content-block">
              <figure class="figure overlay-fifty-fifty__block overlay-fifty-fifty__image" aria-labelledby="figure-f985-label">
                <div class="figure__media" data-gallery="lightbox-f768">
                  <div class="image loading" style="padding-top: 52.68199233716475%;"><noscript><img class="image__fallback" alt="Das ist ein Alt-Text. Das ist ein Pflichtfeld." height="550" src="https://bildermangel.de/1044x550/F5F5F5/28281a.png?text=1044x550" width="1044" /></noscript><img class="image__img js-lazyload" data-src="https://bildermangel.de/1044x550/F5F5F5/28281a.png?text=1044x550" width="1044" height="550" alt="Das ist ein Alt-Text. Das ist ein Pflichtfeld." /></div>
                </div>
                <figcaption class="figure__caption" id="figure-f985-label">Hier steht eine Bildunterschrift (Foto: Vorname Name)</figcaption>
              </figure>
            </div><button class="icon-button icon-button--secondary overlay-fifty-fifty__close" type="button"><svg class="icon icon--close icon-button__icon" viewBox="0 0 200 200" role="img" aria-labelledby="icon-062c-title">
                <title id="icon-062c-title">Fenster schließen</title>
                <use xlink:href="#icon-close"></use>
              </svg></button>
            <div class="overlay-fifty-fifty__content-block">
              <div class="overlay-fifty-fifty__block">
                <h2 class="headline headline--3">Headline 3</h2>
              </div>
              <div class="overlay-fifty-fifty__block">
                <div class="afp-inventor-detail afp-inventor-detail--default afp-inventor-detail--overlay">
                  <div class="afp-inventor-detail__inner">
                    <div class="afp-inventor-detail__inner-content-wrapper">
                      <div class="afp-inventor-detail__inner-content">
                        <div class="afp-inventor-detail__description-wrapper">
                          <dl class="afp-inventor-detail__description-list">
                            <div class="afp-inventor-detail__description-item">
                              <dt class="afp-inventor-detail__description-term">Preis</dt>
                              <dd class="afp-inventor-detail__description-details">2ter Preis (2021)</dd>
                            </div>
                            <div class="afp-inventor-detail__description-item">
                              <dt class="afp-inventor-detail__description-term">Kategorie</dt>
                              <dd class="afp-inventor-detail__description-details">Schüler</dd>
                            </div>
                            <div class="afp-inventor-detail__description-item">
                              <dt class="afp-inventor-detail__description-term">Erfunden von</dt>
                              <dd class="afp-inventor-detail__description-details">Sophia Lindner</dd>
                            </div>
                            <div class="afp-inventor-detail__description-item">
                              <dt class="afp-inventor-detail__description-term">Themen</dt>
                              <dd class="afp-inventor-detail__description-details">#mode</dd>
                            </div>
                          </dl>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="overlay-fifty-fifty__block">
                <div class="text">
                  <p><b>Beschreibung</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="overlay-fifty-fifty__block"><a class="cta-link cta-link--right" href="/innovation"><span class="cta-link__text">Zur Detailseite</span><span class="cta-link__icon"><svg class="icon icon--chevron-right" viewBox="0 0 200 200">
  <use xlink:href="#icon-chevron-right"></use>
</svg></span></a></div>
            </div>
            <div class="overlay-fifty-fifty__slider-buttons">
              <div class="overlay-fifty-fifty__slider-buttons-description">Mehr Innovationen</div><button class="icon-button overlay-fifty-fifty__slider-button-left" type="button"><svg class="icon icon--arrow-left icon-button__icon" viewBox="0 0 200 200" role="img" aria-labelledby="icon-70ce-title">
                  <title id="icon-70ce-title">List</title>
                  <use xlink:href="#icon-arrow-left"></use>
                </svg></button><button class="icon-button overlay-fifty-fifty__slider-button-right" type="button"><svg class="icon icon--arrow-right icon-button__icon" viewBox="0 0 200 200" role="img" aria-labelledby="icon-ba84-title">
                  <title id="icon-ba84-title">List</title>
                  <use xlink:href="#icon-arrow-right"></use>
                </svg></button>
            </div>
          </div>
        </div>
      </article>
    </div>
    <div class="teaser__content-subline">Dr. Max Mustermann</div>
    <div class="teaser__content-number">1</div>
  </div>
</article>