Emperorlist (Experimental)
Die Emperorliste ist eine Liste mit Einträgen (z.B. Topnews), wobei der erste Eintrag hervorgehoben und mit Bild dargestellt wird.
.modul-emperorlist
This week's top news
-
@cineberg - stock.adobe.com
- Alle Einträge anzeigen
<div class="modul-emperorlist">
<h2 class="title">This week's top news</h2>
<ol class="emperorlist__list">
<li>
<div class="emperorlist__element" data-add-clickable-area="all" >
<div class="text">
<div class="text--meta">26.08.2021</div>
<a href="#" class="more">Ich bin der erste und wichtigste Link in der Liste</a>
</div>
<div class="image">
<div class="image__image">
<img src="../../dummy/adobestock/AdobeStock_296758444_400px.jpg" alt="Alternative Bildbeschreibung" >
</div>
<p class="image__copyright">
@cineberg - stock.adobe.com
</p>
</div>
</div> </li>
<li>
<div class="emperorlist__element" data-add-clickable-area="full" >
<div class="text">
<div class="text--meta">26.08.2021</div>
<a href="#" class="more">Ich bin der zweite Link in der Liste</a>
</div>
</div> </li>
<li>
<div class="emperorlist__element" data-add-clickable-area="full" >
<div class="text">
<div class="text--meta">23.08.2021</div>
<a href="#" class="more">Ich bin der dritte Link in der Liste</a>
</div>
</div> </li>
<li>
<div class="emperorlist__element" data-add-clickable-area="full" >
<div class="text">
<div class="text--meta">07.05.2021</div>
<a href="#" class="more">Ich bin der vierte Link und auch etwas länger als die anderen</a>
</div>
</div> </li>
<li>
<div class="emperorlist__element" data-add-clickable-area="full" >
<div class="text">
<div class="text--meta">31.02.2021</div>
<a href="#" class="more">Ich bin der fünfte Link</a>
</div>
</div> </li>
<li>
<div class="emperorlist__element" data-add-clickable-area="full" >
<div class="text">
<div class="text--meta">31.02.2021</div>
<a href="#" class="more">Ich bin der sechste Link und auch wieder etwas länger als die anderen</a>
</div>
</div> </li>
<li class="morelink">
<a href="#" class="button">Alle Einträge anzeigen</a>
</li>
</ol>
</div>