Link-Block @link-block
Interner Link @link-block--internal
<!-- Interner Link -->
<a class="link-block" href="http://theoldpurple.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>{
"internal": true,
"link": "http://theoldpurple.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"
}
Externer Link @link-block--external
<!-- Externer 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></a>{
"external": true,
"link": "http://theoldpurple.com/",
"text": "Externer Link"
}
Download-Link @link-block--download
<!-- Download-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>{
"download": "download.pdf",
"link": "/images/dummy-downloads/dummy.pdf",
"text": "Dateiname",
"file": "pdf",
"size": "12KB",
"access": "barrierefrei"
}
Download-Link mit Urheberrechtslizenz @link-block--download-cc
<!-- Download-Link mit Urheberrechtslizenz -->
<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><span class="link-block__cc"><button class="cc js-cc cc__copyright">| ©</button>
<div class="cc__container" role="tooltip">
<a class="cc__link" href="https://creativecommons.org/licenses/by-nc/3.0/de/" rel="noopener noreferrer" target="_blank">
<figure class="figure js-figure" aria-labelledby="figure-2fc3-label">
<div class="figure__media">
<div class="image image--not-responsive">
<img class="image__img" src="/images/commons/by-nc.svg" data-srcset="../images/commons/by-nc.svg 2x, ../images/commons/by-nc.svg 1x" width="20rem" alt="BY NC" />
</div>
</div>
<figcaption class="figure__caption" id="figure-2fc3-label">Namensnennung, nicht kommerzielle Verwendung</figcaption>
</figure>
</a>
</div></span>{
"download": "download.pdf",
"link": "/images/dummy-downloads/dummy.pdf",
"text": "Dateiname",
"file": "pdf",
"size": "12KB",
"access": "barrierefrei",
"cc": true
}