Arrowtiles

Das Modul arrowtiles (.modul-arrowtiles) enthällt kleine Einheiten (.arrowtile), die über einen verlinkten Titel und einen Pfeil in der rechten oberen Ecke den Inhalt der verlinkten Seite bewerben sollen.

Single arrowtile: .arrowtile

Arrowtiles title

<div class="modul-arrowtiles">
        <h2 class="title">Arrowtiles title</h2>
        <ul>
        <li>
                <div class="arrowtile" data-add-clickable-area="full">
                    <a class="title" data-mainlink="true" href="#">Arrowtile</a>
                </div>
        </li>
        <li>
                <div class="arrowtile" data-add-clickable-area="full">
                    <a class="title" data-mainlink="true" href="#">Arrowtile</a>
                </div>
        </li>
        <li>
                <div class="arrowtile" data-add-clickable-area="full">
                    <a class="title" data-mainlink="true" href="#">Arrowtile</a>
                </div>
        </li>
        <li>
                <div class="arrowtile" data-add-clickable-area="full">
                    <a class="title" data-mainlink="true" href="#">Arrowtile</a>
                </div>
        </li>
        <li>
                <div class="arrowtile" data-add-clickable-area="full">
                    <a class="title" data-mainlink="true" href="#">Arrowtile</a>
                </div>
        </li>
        <li>
                <div class="arrowtile" data-add-clickable-area="full">
                    <a class="title" data-mainlink="true" href="#">Arrowtile</a>
                </div>
        </li>
        <li>
                <div class="arrowtile" data-add-clickable-area="full">
                    <a class="title" data-mainlink="true" href="#">Arrowtile</a>
                </div>
        </li>
        <li>
                <div class="arrowtile" data-add-clickable-area="full">
                    <a class="title" data-mainlink="true" href="#">Arrowtile</a>
                </div>
        </li>
    </ul>
</div>

Arrowtiles with optional category

<div class="modul-arrowtiles">
        <h2 class="title">Arrowtiles with optional category</h2>
        <ul>
        <li>
                <div class="arrowtile" data-add-clickable-area="full">
                    <a class="title" data-mainlink="true" href="#">Arrowtile</a>
                    <small class="category"><i class="bicon bicon-rocket" aria-hidden="true"></i>Optional category</small>
                </div>
        </li>
        <li>
                <div class="arrowtile" data-add-clickable-area="full">
                    <a class="title" data-mainlink="true" href="#">Arrowtile</a>
                    <small class="category"><i class="bicon bicon-rocket" aria-hidden="true"></i>Optional category</small>
                </div>
        </li>
        <li>
                <div class="arrowtile" data-add-clickable-area="full">
                    <a class="title" data-mainlink="true" href="#">Arrowtile</a>
                    <small class="category"><i class="bicon bicon-rocket" aria-hidden="true"></i>Optional category</small>
                </div>
        </li>
        <li>
                <div class="arrowtile" data-add-clickable-area="full">
                    <a class="title" data-mainlink="true" href="#">Arrowtile</a>
                    <small class="category"><i class="bicon bicon-rocket" aria-hidden="true"></i>Optional category</small>
                </div>
        </li>
        <li>
                <div class="arrowtile" data-add-clickable-area="full">
                    <a class="title" data-mainlink="true" href="#">Arrowtile</a>
                    <small class="category"><i class="bicon bicon-rocket" aria-hidden="true"></i>Optional category</small>
                </div>
        </li>
        <li>
                <div class="arrowtile" data-add-clickable-area="full">
                    <a class="title" data-mainlink="true" href="#">Arrowtile</a>
                    <small class="category"><i class="bicon bicon-rocket" aria-hidden="true"></i>Optional category</small>
                </div>
        </li>
        <li>
                <div class="arrowtile" data-add-clickable-area="full">
                    <a class="title" data-mainlink="true" href="#">Arrowtile</a>
                    <small class="category"><i class="bicon bicon-rocket" aria-hidden="true"></i>Optional category</small>
                </div>
        </li>
        <li>
                <div class="arrowtile" data-add-clickable-area="full">
                    <a class="title" data-mainlink="true" href="#">Arrowtile</a>
                    <small class="category"><i class="bicon bicon-rocket" aria-hidden="true"></i>Optional category</small>
                </div>
        </li>
    </ul>
</div>