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.

JS behaviour: Mit dem data Attribut data-add-clickable-area="full" kann der gesamte Teaser klickbar gemacht werden. Das Linkziel bestimmt das href des Links mit dem Attribute data-mainlink.

Use poster teaser in a multiteaser row only

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

Single poster teaser markup

.modul-teaser-poster

<div class="modul-teaser-poster" data-add-clickable-area="full">
    <div class="image">
        <div class="image__overlay">
            <div class="title">Poster title</div>                   
            <div class="more-link">
                <a href="#124" class="more" data-mainlink="true" aria-label="Kein Titel" title="Kein Titel">Mehr Infos</a> 
            </div>
        </div>
                <div class="image__image">
            <img src="../../dummy/placeholder_4x5.jpg" alt="Alternative Bildbeschreibung" >
        </div>
        <p class="image__copyright">
            @copyright
        </p>
    </div>
    
</div>