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.

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.

JS behaviour: With the data attribut data-add-clickable-area="full" the complete teaser will be clickable. The linktarget is defined by the href of the mainlink with the attribute data-mainlink.

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>

Single poster teaser markup

.modul-teaser-poster

HTML
<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="#7035" class="more" data-mainlink="true" aria-label="Kein Titel" title="Kein Titel">Mehr Infos</a> 
            </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>