Teaser Poster (deprecated)

Hinweis: Diese Version des Posterteasers ist veraltet. Es wird empholen die aktuelle Version zu nutzen.

Zur aktuellen Version

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.

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="#3925" class="more" data-mainlink="true">Mehr Infos<span class="aural"> zu Poster title</span></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>

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>