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
<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>
<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>