<div class="link-list-component link-list-component--large">
<div class="link-list-component__list">
<h2 class="link-list-component__list-name link-list-component__list-name--light" id="List one name">List one name</h2>
<div class="link-list-component__links">
<a href="https://google.com" class="list-link list-link--light link-list-component__link
list-link--network" target="_blank" rel="noopener">
External link
<span class="list-link__icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon-container" width="16" height="16" viewBox="0 0 16 16">
<path class="icon-fill" fill="#E84A27" fill-rule="evenodd" d="M12.586 2H10a1 1 0 1 1 0-2h6v6a1 1 0 0 1-2 0V3.414l-8.293 8.293a1 1 0 1 1-1.414-1.414L12.586 2zM2 14h10V9a1 1 0 0 1 2 0v7H0V2h7a1 1 0 1 1 0 2H2v10z"/>
</svg>
</span>
</a>
<a href="https://google.com" class="list-link list-link--light link-list-component__link
list-link--network">
Internal link
<span class="list-link__icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon-container" width="8" height="16" viewBox="0 0 8 16">
<path class="icon-fill" fill="#E84A27" 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>
<a href="http://www.africau.edu/images/default/sample.pdf" class="list-link list-link--light link-list-component__link
list-link--network" target="_blank" rel="noopener">
File link
<span class="list-link__icon"><svg aria-label="File download" xmlns="http://www.w3.org/2000/svg" width="14" height="16" viewBox="0 0 14 16">
<path fill="#E84A27" d="M10 0l4 4v12H0V0h10zM9 2H2v12h10V5H9V2zm1 9v1H4v-1h6zm0-2v1H4V9h6zm0-2v1H4V7h6zM6 4v1H4V4h2z"/>
</svg>
</span>
</a>
<a href="https://google.com" class="list-link list-link--light link-list-component__link
list-link--network" target="_blank" rel="noopener">
External link
<span class="list-link__icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon-container" width="16" height="16" viewBox="0 0 16 16">
<path class="icon-fill" fill="#E84A27" fill-rule="evenodd" d="M12.586 2H10a1 1 0 1 1 0-2h6v6a1 1 0 0 1-2 0V3.414l-8.293 8.293a1 1 0 1 1-1.414-1.414L12.586 2zM2 14h10V9a1 1 0 0 1 2 0v7H0V2h7a1 1 0 1 1 0 2H2v10z"/>
</svg>
</span>
</a>
</div>
</div>
<div class="link-list-component__list">
<h2 class="link-list-component__list-name link-list-component__list-name--light" id="Long text list">Long text list</h2>
<div class="link-list-component__links">
<a href="https://google.com" class="list-link list-link--light link-list-component__link
list-link--network" target="_blank" rel="noopener">
External link with an extraordinarily, unnecessarily, ridiculously, absurdly long name.
<span class="list-link__icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon-container" width="16" height="16" viewBox="0 0 16 16">
<path class="icon-fill" fill="#E84A27" fill-rule="evenodd" d="M12.586 2H10a1 1 0 1 1 0-2h6v6a1 1 0 0 1-2 0V3.414l-8.293 8.293a1 1 0 1 1-1.414-1.414L12.586 2zM2 14h10V9a1 1 0 0 1 2 0v7H0V2h7a1 1 0 1 1 0 2H2v10z"/>
</svg>
</span>
</a>
<a href="https://google.com" class="list-link list-link--light link-list-component__link
list-link--network">
Internal link with an extraordinarily, unnecessarily, ridiculously, absurdly long name.
<span class="list-link__icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon-container" width="8" height="16" viewBox="0 0 8 16">
<path class="icon-fill" fill="#E84A27" 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>
<a href="http://www.africau.edu/images/default/sample.pdf" class="list-link list-link--light link-list-component__link
list-link--network" target="_blank" rel="noopener">
File link with an extraordinarily, unnecessarily, ridiculously, absurdly long name.
<span class="list-link__icon"><svg aria-label="File download" xmlns="http://www.w3.org/2000/svg" width="14" height="16" viewBox="0 0 14 16">
<path fill="#E84A27" d="M10 0l4 4v12H0V0h10zM9 2H2v12h10V5H9V2zm1 9v1H4v-1h6zm0-2v1H4V9h6zm0-2v1H4V7h6zM6 4v1H4V4h2z"/>
</svg>
</span>
</a>
</div>
</div>
<div class="link-list-component__list">
<h2 class="link-list-component__list-name link-list-component__list-name--light" id="List three name">List three name</h2>
<div class="link-list-component__links">
<a href="https://google.com" class="list-link list-link--light link-list-component__link
list-link--network" target="_blank" rel="noopener">
External link
<span class="list-link__icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon-container" width="16" height="16" viewBox="0 0 16 16">
<path class="icon-fill" fill="#E84A27" fill-rule="evenodd" d="M12.586 2H10a1 1 0 1 1 0-2h6v6a1 1 0 0 1-2 0V3.414l-8.293 8.293a1 1 0 1 1-1.414-1.414L12.586 2zM2 14h10V9a1 1 0 0 1 2 0v7H0V2h7a1 1 0 1 1 0 2H2v10z"/>
</svg>
</span>
</a>
<a href="https://google.com" class="list-link list-link--light link-list-component__link
list-link--network" target="_blank" rel="noopener">
External link
<span class="list-link__icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon-container" width="16" height="16" viewBox="0 0 16 16">
<path class="icon-fill" fill="#E84A27" fill-rule="evenodd" d="M12.586 2H10a1 1 0 1 1 0-2h6v6a1 1 0 0 1-2 0V3.414l-8.293 8.293a1 1 0 1 1-1.414-1.414L12.586 2zM2 14h10V9a1 1 0 0 1 2 0v7H0V2h7a1 1 0 1 1 0 2H2v10z"/>
</svg>
</span>
</a>
<a href="https://google.com" class="list-link list-link--light link-list-component__link
list-link--network" target="_blank" rel="noopener">
External link
<span class="list-link__icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon-container" width="16" height="16" viewBox="0 0 16 16">
<path class="icon-fill" fill="#E84A27" fill-rule="evenodd" d="M12.586 2H10a1 1 0 1 1 0-2h6v6a1 1 0 0 1-2 0V3.414l-8.293 8.293a1 1 0 1 1-1.414-1.414L12.586 2zM2 14h10V9a1 1 0 0 1 2 0v7H0V2h7a1 1 0 1 1 0 2H2v10z"/>
</svg>
</span>
</a>
<a href="https://google.com" class="list-link list-link--light link-list-component__link
list-link--network">
Internal link
<span class="list-link__icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon-container" width="8" height="16" viewBox="0 0 8 16">
<path class="icon-fill" fill="#E84A27" 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>
<a href="http://www.africau.edu/images/default/sample.pdf" class="list-link list-link--light link-list-component__link
list-link--network" target="_blank" rel="noopener">
File link
<span class="list-link__icon"><svg aria-label="File download" xmlns="http://www.w3.org/2000/svg" width="14" height="16" viewBox="0 0 14 16">
<path fill="#E84A27" d="M10 0l4 4v12H0V0h10zM9 2H2v12h10V5H9V2zm1 9v1H4v-1h6zm0-2v1H4V9h6zm0-2v1H4V7h6zM6 4v1H4V4h2z"/>
</svg>
</span>
</a>
<a href="https://google.com" class="list-link list-link--light link-list-component__link
list-link--network" target="_blank" rel="noopener">
External link
<span class="list-link__icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon-container" width="16" height="16" viewBox="0 0 16 16">
<path class="icon-fill" fill="#E84A27" fill-rule="evenodd" d="M12.586 2H10a1 1 0 1 1 0-2h6v6a1 1 0 0 1-2 0V3.414l-8.293 8.293a1 1 0 1 1-1.414-1.414L12.586 2zM2 14h10V9a1 1 0 0 1 2 0v7H0V2h7a1 1 0 1 1 0 2H2v10z"/>
</svg>
</span>
</a>
</div>
</div>
<div class="link-list-component__list">
<h2 class="link-list-component__list-name link-list-component__list-name--light" id="List four name">List four name</h2>
<div class="link-list-component__links">
<a href="https://google.com" class="list-link list-link--light link-list-component__link
list-link--network">
Internal link
<span class="list-link__icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon-container" width="8" height="16" viewBox="0 0 8 16">
<path class="icon-fill" fill="#E84A27" 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>
<a href="http://www.africau.edu/images/default/sample.pdf" class="list-link list-link--light link-list-component__link
list-link--network" target="_blank" rel="noopener">
File link
<span class="list-link__icon"><svg aria-label="File download" xmlns="http://www.w3.org/2000/svg" width="14" height="16" viewBox="0 0 14 16">
<path fill="#E84A27" d="M10 0l4 4v12H0V0h10zM9 2H2v12h10V5H9V2zm1 9v1H4v-1h6zm0-2v1H4V9h6zm0-2v1H4V7h6zM6 4v1H4V4h2z"/>
</svg>
</span>
</a>
<a href="https://google.com" class="list-link list-link--light link-list-component__link
list-link--network" target="_blank" rel="noopener">
External link
<span class="list-link__icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon-container" width="16" height="16" viewBox="0 0 16 16">
<path class="icon-fill" fill="#E84A27" fill-rule="evenodd" d="M12.586 2H10a1 1 0 1 1 0-2h6v6a1 1 0 0 1-2 0V3.414l-8.293 8.293a1 1 0 1 1-1.414-1.414L12.586 2zM2 14h10V9a1 1 0 0 1 2 0v7H0V2h7a1 1 0 1 1 0 2H2v10z"/>
</svg>
</span>
</a>
<a href="https://google.com" class="list-link list-link--light link-list-component__link
list-link--network" target="_blank" rel="noopener">
External link
<span class="list-link__icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon-container" width="16" height="16" viewBox="0 0 16 16">
<path class="icon-fill" fill="#E84A27" fill-rule="evenodd" d="M12.586 2H10a1 1 0 1 1 0-2h6v6a1 1 0 0 1-2 0V3.414l-8.293 8.293a1 1 0 1 1-1.414-1.414L12.586 2zM2 14h10V9a1 1 0 0 1 2 0v7H0V2h7a1 1 0 1 1 0 2H2v10z"/>
</svg>
</span>
</a>
</div>
</div>
</div>
<div class="link-list-component link-list-component--{{ componentSpacing }}">
{% for list in component.lists %}
<div class="link-list-component__list">
{% if list.name|default and (list.name|trim) %}
<h2 class="link-list-component__list-name link-list-component__list-name--{{ background }}"
id="{{ list.name|sanitize }}">{{ list.name }}</h2>
{% endif %}
<div class="link-list-component__links">
{% for link in list.links %}
{% include 'bits/list-link/list-link.twig' with {
'type': link.type,
'text': link.text,
'url': link.url,
'background': background,
'className': 'link-list-component__link'
} %}
{% endfor %}
</div>
</div>
{% endfor %}
</div>
{
"siteUnit": "network",
"departmentName": "Network",
"background": "light",
"componentSpacing": "large",
"component": {
"type": "link-list",
"lists": [
{
"name": "List one name",
"links": [
{
"type": "external",
"text": "External link",
"url": "https://google.com"
},
{
"type": "internal",
"text": "Internal link",
"url": "https://google.com"
},
{
"type": "file",
"text": "File link",
"url": "http://www.africau.edu/images/default/sample.pdf"
},
{
"type": "external",
"text": "External link",
"url": "https://google.com"
}
]
},
{
"name": "Long text list",
"links": [
{
"type": "external",
"text": "External link with an extraordinarily, unnecessarily, ridiculously, absurdly long name.",
"url": "https://google.com"
},
{
"type": "internal",
"text": "Internal link with an extraordinarily, unnecessarily, ridiculously, absurdly long name.",
"url": "https://google.com"
},
{
"type": "file",
"text": "File link with an extraordinarily, unnecessarily, ridiculously, absurdly long name.",
"url": "http://www.africau.edu/images/default/sample.pdf"
}
]
},
{
"name": "List three name",
"links": [
{
"type": "external",
"text": "External link",
"url": "https://google.com"
},
{
"type": "external",
"text": "External link",
"url": "https://google.com"
},
{
"type": "external",
"text": "External link",
"url": "https://google.com"
},
{
"type": "internal",
"text": "Internal link",
"url": "https://google.com"
},
{
"type": "file",
"text": "File link",
"url": "http://www.africau.edu/images/default/sample.pdf"
},
{
"type": "external",
"text": "External link",
"url": "https://google.com"
}
]
},
{
"name": "List four name",
"links": [
{
"type": "internal",
"text": "Internal link",
"url": "https://google.com"
},
{
"type": "file",
"text": "File link",
"url": "http://www.africau.edu/images/default/sample.pdf"
},
{
"type": "external",
"text": "External link",
"url": "https://google.com"
},
{
"type": "external",
"text": "External link",
"url": "https://google.com"
}
]
}
]
}
}
.link-list-component
&--large
@extends $componentWithMargin
&--medium
@extends $componentWithMarginMedium
&--small
@extends $componentWithMarginSmall
display grid
grid-template-columns 1fr 1fr
grid-gap 16px 32px
+below(640px)
grid-template-columns 1fr
&__list-name
@extends $headline2
margin 16px 0
There are no notes for this item.