<div class="links">
<div class="links__headline">
<h1 class="headline"><span class="headline__text">A link list</span></h1>
</div>
<ul class="links__links" role="list">
<li class="links__link">
<a class="link" data-link-block data-link-type="internal" href="#"><span class="link__icon"><svg class="icon icon--arrow-right" viewBox="0 0 200 200" aria-hidden="true">
<use xlink:href="/assets/icons/icons.dcaca1c147.svg#arrow-right"></use>
</svg></span><span class="link__text u-underline">A internal Link</span></a>
</li>
<li class="links__link">
<a class="link" data-link-block data-link-type="external" href="http://example.com" rel="noopener noreferrer" target="_blank"><span class="link__icon"><svg class="icon icon--arrow-up-right-from-square" viewBox="0 0 200 200" aria-hidden="true">
<use xlink:href="/assets/icons/icons.dcaca1c147.svg#arrow-up-right-from-square"></use>
</svg></span><span class="link__text u-underline">A external Link</span></a>
</li>
<li class="links__link">
<a class="link" data-link-block data-link-type="document" href="download.pdf" target="_blank"><span class="link__icon"><svg class="icon icon--file-lines" viewBox="0 0 200 200" aria-hidden="true">
<use xlink:href="/assets/icons/icons.dcaca1c147.svg#file-lines"></use>
</svg></span><span class="link__text u-underline">A link to a document</span></a>
</li>
<li class="links__link">
<a class="link" data-link-block data-link-type="download" href="download.zip" download="download.zip"><span class="link__icon"><svg class="icon icon--arrow-down-to-line" viewBox="0 0 200 200" aria-hidden="true">
<use xlink:href="/assets/icons/icons.dcaca1c147.svg#arrow-down-to-line"></use>
</svg></span><span class="link__text u-underline">A download link</span></a>
</li>
<li class="links__link">
<a class="link" data-link-block data-link-type="mailto" href="mailto:example@example.com"><span class="link__icon"><svg class="icon icon--envelope" viewBox="0 0 200 200" aria-hidden="true">
<use xlink:href="/assets/icons/icons.dcaca1c147.svg#envelope"></use>
</svg></span><span class="link__text u-underline">A mailto link</span></a>
</li>
</ul>
</div>
<div {{ html_attributes({
id: id ?? false,
class: 'links',
'data-links-grid': grid ?? false,
}, attrs ?? {}) }}>
{% if headline|default %}
<div class="links__headline">
{% include '@headline' with {
level: level ?? 1,
text: headline,
} only %}
</div>
{% endif %}
<ul class="links__links" role="list">
{% for link in links|default %}
<li class="links__link">
{% include '@link' with link | merge({
showInternal: true,
block: true,
iconPosition: 'before',
}) only %}
</li>
{% endfor %}
</ul>
</div>
{
"headline": "A link list",
"links": [
{
"link": "#",
"text": "A internal Link"
},
{
"link": "http://example.com",
"text": "A external Link"
},
{
"link": "download.pdf",
"text": "A link to a document"
},
{
"link": "download.zip",
"text": "A download link"
},
{
"link": "mailto:example@example.com",
"text": "A mailto link"
}
]
}
.links {
container-name: links;
container-type: inline-size;
font-size: var(--links-font-size, inherit);
}
.links__headline {
--headline-font-size: var(--font-size-headline-7);
--headline-text-transform: uppercase;
margin-block-end: clamp(1.6rem, var(--headline-font-size), 2.4rem);
@container links (inline-size >= 50rem) {
--headline-font-size: var(--font-size-headline-4);
--headline-text-transform: none;
}
}
.links__links {
column-gap: var(--links-column-gap, 2rem);
display: grid;
font-family: var(--links-link-font-family, var(--font-family-exo));
font-size: var(--links-link-font-size, var(--font-size-default));
font-weight: var(--links-link-font-weight, var(--font-weight-bold));
line-height: var(--links-line-height, var(--line-height-wide));
row-gap: var(--links-row-gap, 1rem);
.links:is([data-links-grid]) & {
grid-auto-rows: 1fr;
grid-template-columns: repeat(auto-fill, minmax(30rem, 1fr));
}
}
.links__link {
--link-icon-gap: var(--links-icon-gap, 1.6rem);
--link-underline-puffer: 0;
--link-icon-size: 1.2em;
display: grid;
}
No notes defined.