Linklist
Demo for a list with text link and animated underline Demo for a list with icon in front of text link
Markup: templates/output/06-components/linklist.html
<h2>Regular linklist</h2>
<ul class="o-list-bare c-linklist">
<li class="c-linklist__item"><a class="c-linklist__link animated-underline" href="#" title="Bewerbung, Zulassung, Einschreibung">Bewerbung, Zulassung, Einschreibung</a>
</li>
<li class="c-linklist__item"><a class="c-linklist__link animated-underline" href="#" title="Zulassungsvoraussetzungen">Zulassungsvoraussetzungen</a>
</li>
<li class="c-linklist__item"><a class="c-linklist__link animated-underline" href="#" title="Infoangebot">Infoangebot</a>
</li>
<li class="c-linklist__item"><a class="c-linklist__link animated-underline" href="#" title="Regensburger Hochschultag">Regensburger Hochschultag</a>
</li>
<li class="c-linklist__item"><a class="c-linklist__link animated-underline" href="#" title="Kosten und Finanzierung">Kosten und Finanzierung</a>
</li>
<li class="c-linklist__item"><a class="c-linklist__link animated-underline" href="#" title="Wohnen">Wohnen</a>
</li>
</ul>
<h2>Linklist with icon</h2>
<ul class="o-list-bare c-linklist c-linklist--icon">
<li class="c-linklist__item"><a class="c-linklist__link" href="#"><span class="c-linklist__icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 26 35.304">
<path fill="currentColor" transform="translate(9539.6 5696)" d="m-9515.3-5696-24.234 3.4492.2832 1.9805 21.951-3.125v2.1347h2zm-14.203 24.771v2h5.9004v-2zm0-8.856v2h2.9512v-2zm1.952-3.904v1.9688h2v-1.9688zm0 3.92v9.8398h2v-9.8398zm-12-12.456v29.369l26 2.461v-29.367zm2 2.1992 22 2.084v25.348l-22-2.082z"/>
</svg>
</span><span class="c-linklist__text">Infoblatt Lorem ipsum dolor sit amet<br>(PDF | 2 MB)</span></a>
</li>
<li class="c-linklist__item"><a class="c-linklist__link" href="#"><span class="c-linklist__icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 26 35.304">
<path fill="currentColor" transform="translate(9539.6 5696)" d="m-9515.3-5696-24.234 3.4492.2832 1.9805 21.951-3.125v2.1347h2zm-14.203 24.771v2h5.9004v-2zm0-8.856v2h2.9512v-2zm1.952-3.904v1.9688h2v-1.9688zm0 3.92v9.8398h2v-9.8398zm-12-12.456v29.369l26 2.461v-29.367zm2 2.1992 22 2.084v25.348l-22-2.082z"/>
</svg>
</span><span class="c-linklist__text">Informationen fürAenean commodo ligula eget dolor. Aenean massa.<br>(PDF | 2 MB)</span></a>
</li>
</ul>
Source:
assets/sass/06-components/_components.linklist.scss
, line 1