<div class="link-lists" data-cy="link-lists">
<h2 class="link-lists__heading" data-cy="link-lists__heading">
Header for the link lists
</h2>
<p class="link-lists__description" data-cy="link-lists__description">
Here is more information to get your attention.
</p>
<div class="link-lists__container">
<div class="link-list">
<h3 class="link-list__list-name" data-cy="link-list__list-name" id="Link list heading">Link list heading
</h3>
<ul class="link-list__links" data-cy="link-list__links">
<li class="list-link__container">
<a href="" class="list-link">
<span class="list-link__icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
<g id="external_link">
<mask id="mask0_4834_1082" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="24">
<rect id="Bounding box" width="24" height="24" fill="#D9D9D9" />
</mask>
<g mask="url(#mask0_4834_1082)">
<path id="ungroup" d="M5 21C4.45 21 3.97917 20.8042 3.5875 20.4125C3.19583 20.0208 3 19.55 3 19V7C3 5.89543 3.89543 5 5 5H11V7H5V19H16.5V12H18.5V19C18.5 20.1046 17.6046 21 16.5 21H5Z" fill="#F5592F" />
<path id="ungroup_2" d="M9 13.5L10.4 14.9L18.6992 6.4V10H20.6992V3H13.6992V5H17.2992L9 13.5Z" fill="#F5592F" />
</g>
</g>
</svg>
</span>
</a>
</li>
<li class="list-link__container">
<a href="" class="list-link">
<span class="list-link__icon"><svg class="right-chevron" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="8" height="16" viewBox="0 0 8 16">
<path class="_mark right-chevron__shape" fill-rule="nonzero" d="M.232 1.65A1.028 1.028 0 0 1 .336.24a.937.937 0 0 1 1.356.11L8 8l-6.308 7.65a.937.937 0 0 1-1.356.11c-.403-.36-.45-.991-.104-1.41L5.466 8 .232 1.65z" />
</svg>
</span>
</a>
</li>
<li class="list-link__container">
<a href="" class="list-link">
<span class="list-link__icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
<g id="description">
<mask id="mask0_4834_46427" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="24">
<rect id="Bounding box" width="24" height="24" fill="#D9D9D9" />
</mask>
<g mask="url(#mask0_4834_46427)">
<path id="description_2" d="M8 18H16V16H8V18ZM8 14H16V12H8V14ZM6 22C5.45 22 4.97917 21.8042 4.5875 21.4125C4.19583 21.0208 4 20.55 4 20V4C4 3.45 4.19583 2.97917 4.5875 2.5875C4.97917 2.19583 5.45 2 6 2H14L20 8V20C20 20.55 19.8042 21.0208 19.4125 21.4125C19.0208 21.8042 18.55 22 18 22H6ZM13 9V4H6V20H18V9H13Z" fill="#F5592F" />
</g>
</g>
</svg>
</span>
</a>
</li>
</ul>
</div>
<div class="link-list">
<h3 class="link-list__list-name" data-cy="link-list__list-name" id="Link list heading">Link list heading
</h3>
<ul class="link-list__links" data-cy="link-list__links">
<li class="list-link__container">
<a href="" class="list-link">
<span class="list-link__icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
<g id="external_link">
<mask id="mask0_4834_1082" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="24">
<rect id="Bounding box" width="24" height="24" fill="#D9D9D9" />
</mask>
<g mask="url(#mask0_4834_1082)">
<path id="ungroup" d="M5 21C4.45 21 3.97917 20.8042 3.5875 20.4125C3.19583 20.0208 3 19.55 3 19V7C3 5.89543 3.89543 5 5 5H11V7H5V19H16.5V12H18.5V19C18.5 20.1046 17.6046 21 16.5 21H5Z" fill="#F5592F" />
<path id="ungroup_2" d="M9 13.5L10.4 14.9L18.6992 6.4V10H20.6992V3H13.6992V5H17.2992L9 13.5Z" fill="#F5592F" />
</g>
</g>
</svg>
</span>
</a>
</li>
<li class="list-link__container">
<a href="" class="list-link">
<span class="list-link__icon"><svg class="right-chevron" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="8" height="16" viewBox="0 0 8 16">
<path class="_mark right-chevron__shape" fill-rule="nonzero" d="M.232 1.65A1.028 1.028 0 0 1 .336.24a.937.937 0 0 1 1.356.11L8 8l-6.308 7.65a.937.937 0 0 1-1.356.11c-.403-.36-.45-.991-.104-1.41L5.466 8 .232 1.65z" />
</svg>
</span>
</a>
</li>
<li class="list-link__container">
<a href="" class="list-link">
<span class="list-link__icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
<g id="description">
<mask id="mask0_4834_46427" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="24">
<rect id="Bounding box" width="24" height="24" fill="#D9D9D9" />
</mask>
<g mask="url(#mask0_4834_46427)">
<path id="description_2" d="M8 18H16V16H8V18ZM8 14H16V12H8V14ZM6 22C5.45 22 4.97917 21.8042 4.5875 21.4125C4.19583 21.0208 4 20.55 4 20V4C4 3.45 4.19583 2.97917 4.5875 2.5875C4.97917 2.19583 5.45 2 6 2H14L20 8V20C20 20.55 19.8042 21.0208 19.4125 21.4125C19.0208 21.8042 18.55 22 18 22H6ZM13 9V4H6V20H18V9H13Z" fill="#F5592F" />
</g>
</g>
</svg>
</span>
</a>
</li>
</ul>
</div>
<div class="link-list">
<h3 class="link-list__list-name" data-cy="link-list__list-name" id="Link list heading">Link list heading
</h3>
<ul class="link-list__links" data-cy="link-list__links">
<li class="list-link__container">
<a href="" class="list-link">
<span class="list-link__icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
<g id="external_link">
<mask id="mask0_4834_1082" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="24">
<rect id="Bounding box" width="24" height="24" fill="#D9D9D9" />
</mask>
<g mask="url(#mask0_4834_1082)">
<path id="ungroup" d="M5 21C4.45 21 3.97917 20.8042 3.5875 20.4125C3.19583 20.0208 3 19.55 3 19V7C3 5.89543 3.89543 5 5 5H11V7H5V19H16.5V12H18.5V19C18.5 20.1046 17.6046 21 16.5 21H5Z" fill="#F5592F" />
<path id="ungroup_2" d="M9 13.5L10.4 14.9L18.6992 6.4V10H20.6992V3H13.6992V5H17.2992L9 13.5Z" fill="#F5592F" />
</g>
</g>
</svg>
</span>
</a>
</li>
<li class="list-link__container">
<a href="" class="list-link">
<span class="list-link__icon"><svg class="right-chevron" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="8" height="16" viewBox="0 0 8 16">
<path class="_mark right-chevron__shape" fill-rule="nonzero" d="M.232 1.65A1.028 1.028 0 0 1 .336.24a.937.937 0 0 1 1.356.11L8 8l-6.308 7.65a.937.937 0 0 1-1.356.11c-.403-.36-.45-.991-.104-1.41L5.466 8 .232 1.65z" />
</svg>
</span>
</a>
</li>
<li class="list-link__container">
<a href="" class="list-link">
<span class="list-link__icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
<g id="description">
<mask id="mask0_4834_46427" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="24">
<rect id="Bounding box" width="24" height="24" fill="#D9D9D9" />
</mask>
<g mask="url(#mask0_4834_46427)">
<path id="description_2" d="M8 18H16V16H8V18ZM8 14H16V12H8V14ZM6 22C5.45 22 4.97917 21.8042 4.5875 21.4125C4.19583 21.0208 4 20.55 4 20V4C4 3.45 4.19583 2.97917 4.5875 2.5875C4.97917 2.19583 5.45 2 6 2H14L20 8V20C20 20.55 19.8042 21.0208 19.4125 21.4125C19.0208 21.8042 18.55 22 18 22H6ZM13 9V4H6V20H18V9H13Z" fill="#F5592F" />
</g>
</g>
</svg>
</span>
</a>
</li>
</ul>
</div>
<div class="link-list">
<h3 class="link-list__list-name" data-cy="link-list__list-name" id="Link list heading">Link list heading
</h3>
<ul class="link-list__links" data-cy="link-list__links">
<li class="list-link__container">
<a href="" class="list-link">
<span class="list-link__icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
<g id="external_link">
<mask id="mask0_4834_1082" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="24">
<rect id="Bounding box" width="24" height="24" fill="#D9D9D9" />
</mask>
<g mask="url(#mask0_4834_1082)">
<path id="ungroup" d="M5 21C4.45 21 3.97917 20.8042 3.5875 20.4125C3.19583 20.0208 3 19.55 3 19V7C3 5.89543 3.89543 5 5 5H11V7H5V19H16.5V12H18.5V19C18.5 20.1046 17.6046 21 16.5 21H5Z" fill="#F5592F" />
<path id="ungroup_2" d="M9 13.5L10.4 14.9L18.6992 6.4V10H20.6992V3H13.6992V5H17.2992L9 13.5Z" fill="#F5592F" />
</g>
</g>
</svg>
</span>
</a>
</li>
<li class="list-link__container">
<a href="" class="list-link">
<span class="list-link__icon"><svg class="right-chevron" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="8" height="16" viewBox="0 0 8 16">
<path class="_mark right-chevron__shape" fill-rule="nonzero" d="M.232 1.65A1.028 1.028 0 0 1 .336.24a.937.937 0 0 1 1.356.11L8 8l-6.308 7.65a.937.937 0 0 1-1.356.11c-.403-.36-.45-.991-.104-1.41L5.466 8 .232 1.65z" />
</svg>
</span>
</a>
</li>
<li class="list-link__container">
<a href="" class="list-link">
<span class="list-link__icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
<g id="description">
<mask id="mask0_4834_46427" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="24">
<rect id="Bounding box" width="24" height="24" fill="#D9D9D9" />
</mask>
<g mask="url(#mask0_4834_46427)">
<path id="description_2" d="M8 18H16V16H8V18ZM8 14H16V12H8V14ZM6 22C5.45 22 4.97917 21.8042 4.5875 21.4125C4.19583 21.0208 4 20.55 4 20V4C4 3.45 4.19583 2.97917 4.5875 2.5875C4.97917 2.19583 5.45 2 6 2H14L20 8V20C20 20.55 19.8042 21.0208 19.4125 21.4125C19.0208 21.8042 18.55 22 18 22H6ZM13 9V4H6V20H18V9H13Z" fill="#F5592F" />
</g>
</g>
</svg>
</span>
</a>
</li>
</ul>
</div>
</div>
</div>
<div class="link-lists"
data-cy="link-lists">
{% if fields.header %}
<h2 class="link-lists__heading"
data-cy="link-lists__heading">
{{ fields.header }}
</h2>
{% endif %}
{% if fields.description %}
<p class="link-lists__description"
data-cy="link-lists__description">
{{ fields.description }}
</p>
{% endif %}
<div class="link-lists__container">
{{ content }}
{% for item in fields.innerBlocks.lists %}
{% include 'blocks/link-list/link-list.twig' with item %}
{% endfor %}
</div>
</div>
{
"fields": {
"type": "link-lists",
"header": "Header for the link lists",
"showDescription": false,
"description": "Here is more information to get your attention.",
"innerBlocks": {
"lists": [
{
"fields": {
"type": "link-list",
"heading": "Link list heading",
"innerBlocks": {
"links": [
{
"fields": {
"element": "li",
"linkType": "external",
"text": "External link",
"external_url": "https://google.com"
}
},
{
"fields": {
"linkType": "internal",
"text": "Internal Link",
"internal_url": "https://google.com"
}
},
{
"fields": {
"linkType": "file",
"text": "File Link",
"file_url": "https://google.com"
}
}
]
}
}
},
{
"fields": {
"type": "link-list",
"heading": "Link list heading",
"innerBlocks": {
"links": [
{
"fields": {
"element": "li",
"linkType": "external",
"text": "External link",
"external_url": "https://google.com"
}
},
{
"fields": {
"linkType": "internal",
"text": "Internal Link",
"internal_url": "https://google.com"
}
},
{
"fields": {
"linkType": "file",
"text": "File Link",
"file_url": "https://google.com"
}
}
]
}
}
},
{
"fields": {
"type": "link-list",
"heading": "Link list heading",
"innerBlocks": {
"links": [
{
"fields": {
"element": "li",
"linkType": "external",
"text": "External link",
"external_url": "https://google.com"
}
},
{
"fields": {
"linkType": "internal",
"text": "Internal Link",
"internal_url": "https://google.com"
}
},
{
"fields": {
"linkType": "file",
"text": "File Link",
"file_url": "https://google.com"
}
}
]
}
}
},
{
"fields": {
"type": "link-list",
"heading": "Link list heading",
"innerBlocks": {
"links": [
{
"fields": {
"element": "li",
"linkType": "external",
"text": "External link",
"external_url": "https://google.com"
}
},
{
"fields": {
"linkType": "internal",
"text": "Internal Link",
"internal_url": "https://google.com"
}
},
{
"fields": {
"linkType": "file",
"text": "File Link",
"file_url": "https://google.com"
}
}
]
}
}
}
]
}
}
}
.link-lists
@extends $componentWithMargin
&__heading
@extends $headline2
color blue500
margin 16px 0
&__description
@extends $bodyLarge
color grey500
margin 16px 0
&__container
display grid
grid-template-columns 1fr 1fr
grid-gap 16px 24px
list-style none
margin-top 32px
+below(640px)
grid-template-columns 1fr
No notes defined.