Teaser Poster

Der Teaser Poster eignet sich für die Verlinkung von Inhalten mit aussagekräftigem Bild und einer ausreichend aussagekräftigen Überschrift, da hier kein Beschreibungstext vorgesehen ist.

The Teaser Poster is suitable for linking content with a powerful image and a sufficiently engaging headline, as no descriptive text is provided here.

Hinweis: Diese Version ist eine 2026 überarbeitete Version des alten Posterteasers. Er ist nun vollflächig via CSS verlinkt. Mit dem data Attribut data-add-clickable-area="fullcss" wird der gesamte Posterteasers klickbar gemacht. Das Linkziel bestimmt das href des Teasertitels mit dem Attribut data-mainlink. Der "Mehr Infos"-Text wurde auf aria-hidden="true" gesetzt.

Beispiel

Single poster teaser markup

.modul-teaser-poster

HTML

<div class="modul-teaser-poster" data-add-clickable-area="fullcss">
    <div class="image">
        <div class="image__overlay">
            <div class="title">
                <a href="#1298" data-mainlink="true">Poster title</a>
            </div>
            <div class="more-link" aria-hidden="true">
                <span class="more">Mehr Infos</span> 
            </div>
        </div>
        <div class="image__image">
            <img src="../../styleguide/static/placeholder_4x5.jpg" alt="Alternative Bildbeschreibung" >
        </div>
        <p class="image__copyright">© copyright</p>
    </div>
    
</div>

Use poster teaser in a multiteaser row only

HTML
<section class="modul-multiteaser">
<ul class="flexgrid grid--4">
         <li>
        <!-- Poster Teaser 1 -->        </li>
         <li>
        <!-- Poster Teaser 1 -->        </li>
         <li>
        <!-- Poster Teaser 1 -->        </li>
         <li>
        <!-- Poster Teaser 1 -->        </li>
</ul></section>