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