Icontiles

Das Modul Icontiles (.modul-icontiles) enthällt kleine, Text beinhaltende Einheiten (.icontile), die über ein Icon und einen Linktext den Inhalt der verlinkten Seite bewerben sollen.

Wrapper: .modul-icontiles

Single icontile: .icontile

Simple icontile: .modul-icontiles.icontiles--simple

Icontiles (simple)

<div class="modul-icontiles icontiles--simple">
        <h2 class="title">Icontiles (simple)</h2>
        <div class="icontiles__inner">
        <ul>
            <li>

                <div class="icontile" data-add-clickable-area="full">
                    <div class="decoration" aria-hidden="true">
                        <i class="bicon bicon-landmark"></i>
                    </div>
                    <div class="inner">
                        <a class="title" data-mainlink="true" href="#">Icontile 1</a>
                    </div>
                </div>

            </li>
            <li>

                <div class="icontile" data-add-clickable-area="full">
                    <div class="decoration" aria-hidden="true">
                        <i class="bicon bicon-plane"></i>
                    </div>
                    <div class="inner">
                        <a class="title" data-mainlink="true" href="#">Icontile 2</a>
                    </div>
                </div>

            </li>
            <li>

                <div class="icontile" data-add-clickable-area="full">
                    <div class="decoration" aria-hidden="true">
                        <i class="bicon bicon-rocket"></i>
                    </div>
                    <div class="inner">
                        <a class="title" data-mainlink="true" href="#">Icontile 3</a>
                    </div>
                </div>

            </li>
            <li>

                <div class="icontile" data-add-clickable-area="full">
                    <div class="decoration" aria-hidden="true">
                        <i class="bicon bicon-plane"></i>
                    </div>
                    <div class="inner">
                        <a class="title" data-mainlink="true" href="#">Icontile 4</a>
                    </div>
                </div>

            </li>
            <li>

                <div class="icontile" data-add-clickable-area="full">
                    <div class="decoration" aria-hidden="true">
                        <i class="bicon bicon-landmark"></i>
                    </div>
                    <div class="inner">
                        <a class="title" data-mainlink="true" href="#">Icontile 5</a>
                    </div>
                </div>

            </li>
            <li>

                <div class="icontile" data-add-clickable-area="full">
                    <div class="decoration" aria-hidden="true">
                        <i class="bicon bicon-landmark"></i>
                    </div>
                    <div class="inner">
                        <a class="title" data-mainlink="true" href="#">Icontile 6 with longer title than the other tiles</a>
                    </div>
                </div>

            </li>
            <li>

                <div class="icontile" data-add-clickable-area="full">
                    <div class="decoration" aria-hidden="true">
                        <i class="bicon bicon-landmark"></i>
                    </div>
                    <div class="inner">
                        <a class="title" data-mainlink="true" href="#">Icontile 7</a>
                    </div>
                </div>

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

Icontiles (more complex version)

<div class="modul-icontiles">
        <h2 class="title">Icontiles (more complex version)</h2>
        <div class="icontiles__inner">
        <ul>
            <li>

                <div class="icontile" data-add-clickable-area="full">
                    <div class="decoration" aria-hidden="true">
                        <i class="bicon bicon-landmark"></i>
                    </div>
                    <div class="inner">
                        <a class="title" data-mainlink="true" href="#">Icontile 1</a>
                    </div>
                </div>

            </li>
            <li>

                <div class="icontile" data-add-clickable-area="full">
                    <div class="decoration" aria-hidden="true">
                        <i class="bicon bicon-plane"></i>
                    </div>
                    <div class="inner">
                        <a class="title" data-mainlink="true" href="#">Icontile 2</a>
                    </div>
                </div>

            </li>
            <li>

                <div class="icontile" data-add-clickable-area="full">
                    <div class="decoration" aria-hidden="true">
                        <i class="bicon bicon-rocket"></i>
                    </div>
                    <div class="inner">
                        <a class="title" data-mainlink="true" href="#">Icontile 3</a>
                    </div>
                </div>

            </li>
            <li>

                <div class="icontile" data-add-clickable-area="full">
                    <div class="decoration" aria-hidden="true">
                        <i class="bicon bicon-plane"></i>
                    </div>
                    <div class="inner">
                        <a class="title" data-mainlink="true" href="#">Icontile 4</a>
                    </div>
                </div>

            </li>
            <li>

                <div class="icontile" data-add-clickable-area="full">
                    <div class="decoration" aria-hidden="true">
                        <i class="bicon bicon-landmark"></i>
                    </div>
                    <div class="inner">
                        <a class="title" data-mainlink="true" href="#">Icontile 5</a>
                    </div>
                </div>

            </li>
            <li>

                <div class="icontile" data-add-clickable-area="full">
                    <div class="decoration" aria-hidden="true">
                        <i class="bicon bicon-landmark"></i>
                    </div>
                    <div class="inner">
                        <a class="title" data-mainlink="true" href="#">Icontile 6 with longer title than the other tiles</a>
                    </div>
                </div>

            </li>
            <li>

                <div class="icontile" data-add-clickable-area="full">
                    <div class="decoration" aria-hidden="true">
                        <i class="bicon bicon-landmark"></i>
                    </div>
                    <div class="inner">
                        <a class="title" data-mainlink="true" href="#">Icontile 7</a>
                    </div>
                </div>

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