Link-Liste @link-list
Link @link-list--link
<!-- Link -->
<div class="link-list">
<ul class="link-list__list">
<li class="link-list__link">
<a class="link-block" href="http://interner-link.com/"><span class="link-block__icon"><svg class="icon icon--angle-right link-block__icon-svg" viewBox="0 0 200 200" role="presentation">
<use xlink:href="#icon-angle-right"></use>
</svg></span><span class="link-block__text">Interner Link</span><span class="link-block__hint"><span class="link-block__info">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat</span></span>
</a>
</li>
<li class="link-list__link">
<a class="link-block" href="http://interner-link.com/"><span class="link-block__icon"><svg class="icon icon--angle-right link-block__icon-svg" viewBox="0 0 200 200" role="presentation">
<use xlink:href="#icon-angle-right"></use>
</svg></span><span class="link-block__text">Interner Link</span><span class="link-block__hint"><span class="link-block__info">Lorem ipsum dolor sit amet, consetetur sadipscing elitr</span></span>
</a>
</li>
<li class="link-list__link">
<a class="link-block" href="http://theoldpurple.com/" rel="noopener noreferrer" target="_blank"><span class="link-block__icon"><svg class="icon icon--external link-block__icon-svg" viewBox="0 0 200 200" role="presentation">
<use xlink:href="#icon-external"></use>
</svg></span><span class="link-block__text">Externer Link</span><span class="link-block__hint"><span class="link-block__info">Lorem ipsum dolor sit amet diam</span></span>
</a>
</li>
<li class="link-list__link">
<a class="link-block" href="/images/dummy-downloads/dummy.pdf" target="_blank" download="download.pdf"><span class="link-block__icon"><svg class="icon icon--download link-block__icon-svg" viewBox="0 0 200 200" role="presentation">
<use xlink:href="#icon-download"></use>
</svg></span><span class="link-block__text">Download</span><span class="link-block__hint"><span class="link-block__file">pdf</span><span class="link-block__size">12KB</span><span class="link-block__access">barrierefrei</span></span>
</a>
</li>
<li class="link-list__link">
<a class="link-block" href="/images/dummy-downloads/dummy.pdf" target="_blank" download="download.pdf"><span class="link-block__icon"><svg class="icon icon--download link-block__icon-svg" viewBox="0 0 200 200" role="presentation">
<use xlink:href="#icon-download"></use>
</svg></span><span class="link-block__text">Dateiname</span><span class="link-block__hint"><span class="link-block__file">pdf</span><span class="link-block__size">12KB</span><span class="link-block__access">barrierefrei</span></span>
</a>
</li>
</ul>
</div>{
"links": [
{
"internal": true,
"link": "http://interner-link.com/",
"text": "Interner Link",
"info": "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat"
},
{
"internal": true,
"link": "http://interner-link.com/",
"text": "Interner Link",
"info": "Lorem ipsum dolor sit amet, consetetur sadipscing elitr"
},
{
"external": true,
"link": "http://theoldpurple.com/",
"text": "Externer Link",
"info": "Lorem ipsum dolor sit amet diam"
},
{
"download": "download.pdf",
"link": "/images/dummy-downloads/dummy.pdf",
"text": "Download",
"file": "pdf",
"size": "12KB",
"access": "barrierefrei"
},
{
"download": "download.pdf",
"link": "/images/dummy-downloads/dummy.pdf",
"text": "Dateiname",
"file": "pdf",
"size": "12KB",
"access": "barrierefrei"
}
]
}
Aside @link-list--aside
<!-- Aside -->
<div class="link-list">
<ul class="link-list__list">
<li class="link-list__link">
<a class="link-block" href="#account"><span class="link-block__icon"><svg class="icon icon--angle-right link-block__icon-svg" viewBox="0 0 200 200" role="presentation">
<use xlink:href="#icon-angle-right"></use>
</svg></span><span class="link-block__text">Account</span><span class="link-block__hint"><span class="link-block__info">Name, E-Mail, Matrikelnummer, 5-Steller etc.</span></span>
</a>
</li>
<li class="link-list__link">
<a class="link-block" href="#verlauf"><span class="link-block__icon"><svg class="icon icon--angle-right link-block__icon-svg" viewBox="0 0 200 200" role="presentation">
<use xlink:href="#icon-angle-right"></use>
</svg></span><span class="link-block__text">Verlauf</span><span class="link-block__hint"><span class="link-block__info">Anmerkungen zum Account</span></span>
</a>
</li>
<li class="link-list__link">
<a class="link-block" href="#aktionen"><span class="link-block__icon"><svg class="icon icon--angle-right link-block__icon-svg" viewBox="0 0 200 200" role="presentation">
<use xlink:href="#icon-angle-right"></use>
</svg></span><span class="link-block__text">Aktionen</span><span class="link-block__hint"><span class="link-block__info">Zugangsdaten versenden, Passwort zurücksetzen etc.</span></span>
</a>
</li>
<li class="link-list__link">
<a class="link-block" href="#mail"><span class="link-block__icon"><svg class="icon icon--angle-right link-block__icon-svg" viewBox="0 0 200 200" role="presentation">
<use xlink:href="#icon-angle-right"></use>
</svg></span><span class="link-block__text">Mail</span><span class="link-block__hint"><span class="link-block__info">Verteiler etc.</span></span>
</a>
</li>
<li class="link-list__link">
<a class="link-block" href="#netze"><span class="link-block__icon"><svg class="icon icon--angle-right link-block__icon-svg" viewBox="0 0 200 200" role="presentation">
<use xlink:href="#icon-angle-right"></use>
</svg></span><span class="link-block__text">Netze</span><span class="link-block__hint"><span class="link-block__info">WLAN, eduroam, VPN</span></span>
</a>
</li>
<li class="link-list__link">
<a class="link-block" href="#dienste"><span class="link-block__icon"><svg class="icon icon--angle-right link-block__icon-svg" viewBox="0 0 200 200" role="presentation">
<use xlink:href="#icon-angle-right"></use>
</svg></span><span class="link-block__text">weitere Dienste</span><span class="link-block__hint"><span class="link-block__info">Druck, Stud.IP, Löwenportal, Blogs etc.</span></span>
</a>
</li>
</ul>
</div>{
"links": [
{
"internal": true,
"link": "#account",
"text": "Account",
"info": "Name, E-Mail, Matrikelnummer, 5-Steller etc."
},
{
"internal": true,
"link": "#verlauf",
"text": "Verlauf",
"info": "Anmerkungen zum Account"
},
{
"internal": true,
"link": "#aktionen",
"text": "Aktionen",
"info": "Zugangsdaten versenden, Passwort zurücksetzen etc."
},
{
"internal": true,
"link": "#mail",
"text": "Mail",
"info": "Verteiler etc."
},
{
"internal": true,
"link": "#netze",
"text": "Netze",
"info": "WLAN, eduroam, VPN"
},
{
"internal": true,
"link": "#dienste",
"text": "weitere Dienste",
"info": "Druck, Stud.IP, Löwenportal, Blogs etc."
}
]
}