Teasertiles

Das Modul Teasertiles (.modul-teasertiles) enthällt kleine, Text beinhaltende Teasereinheiten (.teasertile), die kurz und knapp den Inhalt der verlinkten Seite bewerben sollen.

The Teasertile module (.modul-teasertiles) contains small text-containing teaser units (.teasertile) that briefly and concisely advertise the content of the linked page.

JS behaviour: Mit dem data Attribut data-add-clickable-area="full" kann der gesamte .teasertile 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 .teasertile will be clickable. The linktarget is defined by the href of the mainlink with the attribute data-mainlink.

Teasertiles

HTML
<div class="modul-teasertiles">
        
<h2 class="title">Teasertiles</h2>
      
    <div class="teasertiles__inner">
        <ul>
            <li>

        <div class="teasertile" data-add-clickable-area="full">
            <div class="decoration" aria-hidden="true">1</div>
            <div class="inner">
                <h3 class="title">Teasertile 1</h3>
                <p class="text">
                    Teasertile text
                </p>
            </div>
            <div class="action">
                <a class="more" data-mainlink="true" href="#">Mehr <span class="aural"> zu Teasertile 1</span></a>
            </div>
        </div>

            </li>
            <li>

        <div class="teasertile" data-add-clickable-area="full">
            <div class="decoration" aria-hidden="true">2</div>
            <div class="inner">
                <h3 class="title">Teasertile 2</h3>
                <p class="text">
                    Teasertile text
                </p>
            </div>
            <div class="action">
                <a class="more" data-mainlink="true" href="#">Mehr <span class="aural"> zu Teasertile 2</span></a>
            </div>
        </div>

            </li>
            <li>

        <div class="teasertile" data-add-clickable-area="full">
            <div class="decoration" aria-hidden="true">3</div>
            <div class="inner">
                <h3 class="title">Teasertile 3</h3>
                <p class="text">
                    Teasertile text
                </p>
            </div>
            <div class="action">
                <a class="more" data-mainlink="true" href="#">Mehr <span class="aural"> zu Teasertile 3</span></a>
            </div>
        </div>

            </li>
            <li>

        <div class="teasertile" data-add-clickable-area="full">
            <div class="decoration" aria-hidden="true">4</div>
            <div class="inner">
                <h3 class="title">Teasertile 4</h3>
                <p class="text">
                    Teasertile text
                </p>
            </div>
            <div class="action">
                <a class="more" data-mainlink="true" href="#">Mehr <span class="aural"> zu Teasertile 4</span></a>
            </div>
        </div>

            </li>
            <li>

        <div class="teasertile" data-add-clickable-area="full">
            <div class="decoration" aria-hidden="true">5</div>
            <div class="inner">
                <h3 class="title">Teasertile 5</h3>
                <p class="text">
                    Teasertile text
                </p>
            </div>
            <div class="action">
                <a class="more" data-mainlink="true" href="#">Mehr <span class="aural"> zu Teasertile 5</span></a>
            </div>
        </div>

            </li>
            <li>

        <div class="teasertile" data-add-clickable-area="full">
            <div class="decoration" aria-hidden="true">6</div>
            <div class="inner">
                <h3 class="title">Teasertile 6 with longer title than the other tiles</h3>
                <p class="text">
                    Teasertile text
                </p>
            </div>
            <div class="action">
                <a class="more" data-mainlink="true" href="#">Mehr <span class="aural"> zu Teasertile 6 with longer title than the other tiles</span></a>
            </div>
        </div>

            </li>
            <li>

        <div class="teasertile" data-add-clickable-area="full">
            <div class="decoration" aria-hidden="true">7</div>
            <div class="inner">
                <h3 class="title">Teasertile 7</h3>
                <p class="text">
                    Teasertile text
                </p>
            </div>
            <div class="action">
                <a class="more" data-mainlink="true" href="#">Mehr <span class="aural"> zu Teasertile 7</span></a>
            </div>
        </div>

            </li>
        </ul>
    </div>
</div>