Teasertiles

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

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.

Teasertiles (simple)

  • Teasertile 1

    Teasertile text

    Action

  • Teasertile 2

    Teasertile text

    Action

  • Teasertile 3

    Teasertile text

    Action

  • Teasertile 4

    Teasertile text

    Action

  • Teasertile 5

    Teasertile text

    Action

  • Teasertile 6 with longer title than the other tiles

    Teasertile text

    Action

  • Teasertile 7

    Teasertile text

    Action 
<div class="modul-teasertiles">
        <h2 class="title">Teasertiles (simple)</h2>
      
    <div class="teasertiles__inner">
        <ul>
            <li>

        <div class="teasertile" data-add-clickable-area="full">
            <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="#" aria-label="Teasertile 1" title="Teasertile 1">Action</a>
            </div>
        </div>
            </li>
            <li>

        <div class="teasertile" data-add-clickable-area="full">
            <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="#" aria-label="Teasertile 2" title="Teasertile 2">Action</a>
            </div>
        </div>
            </li>
            <li>

        <div class="teasertile" data-add-clickable-area="full">
            <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="#" aria-label="Teasertile 3" title="Teasertile 3">Action</a>
            </div>
        </div>
            </li>
            <li>

        <div class="teasertile" data-add-clickable-area="full">
            <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="#" aria-label="Teasertile 4" title="Teasertile 4">Action</a>
            </div>
        </div>
            </li>
            <li>

        <div class="teasertile" data-add-clickable-area="full">
            <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="#" aria-label="Teasertile 5" title="Teasertile 5">Action</a>
            </div>
        </div>
            </li>
            <li>

        <div class="teasertile" data-add-clickable-area="full">
            <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="#" aria-label="Teasertile 6 with longer title than the other tiles" title="Teasertile 6 with longer title than the other tiles">Action</a>
            </div>
        </div>
            </li>
            <li>

        <div class="teasertile" data-add-clickable-area="full">
            <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="#" aria-label="Teasertile 7" title="Teasertile 7">Action</a>
            </div>
        </div>
            </li>
        </ul>
    </div>
</div>

Teasertiles with decoration

  • Teasertile 1

    Teasertile text

    Action

  • Teasertile 2

    Teasertile text

    Action

  • Teasertile 3

    Teasertile text

    Action

  • Teasertile 4

    Teasertile text

    Action

  • Teasertile 5

    Teasertile text

    Action

  • Teasertile 6 with longer title than the other tiles

    Teasertile text

    Action

  • Teasertile 7

    Teasertile text

    Action 
<div class="modul-teasertiles">
        <h2 class="title">Teasertiles with decoration</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="#" aria-label="Teasertile 1" title="Teasertile 1">Action</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="#" aria-label="Teasertile 2" title="Teasertile 2">Action</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="#" aria-label="Teasertile 3" title="Teasertile 3">Action</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="#" aria-label="Teasertile 4" title="Teasertile 4">Action</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="#" aria-label="Teasertile 5" title="Teasertile 5">Action</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="#" aria-label="Teasertile 6 with longer title than the other tiles" title="Teasertile 6 with longer title than the other tiles">Action</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="#" aria-label="Teasertile 7" title="Teasertile 7">Action</a>
            </div>
        </div>
            </li>
        </ul>
    </div>
</div>