<div class="link-list link-list--background-is-blueTint">
<ul class="link-list__list">
<li class="link-list__item">
<a class="linked-text-with-icon linked-text-with-icon--linkList" href="#">Internal link<span class="linked-text-with-icon__chevron-icon">
<svg role="img" class="right-chevron" xmlns="http://www.w3.org/2000/svg" fill="currentColor" aria-hidden="true" viewBox="0 0 8 12">
<title>right chevron</title>
<path class="_mark right-chevron__shape" d="M4.50496 5.98003L0.00107202 0.0064757L0.00964937 2.55136e-07L3.49611 5.59932e-07L8 5.97463L3.48968 12L-9.53674e-07 12L4.50496 5.98003Z" />
</svg>
</span></a>
</li>
<li class="link-list__item">
<a class="linked-text-with-icon linked-text-with-icon--linkList" href="#">External link<span class="linked-text-with-icon__external-link-icon">
<svg role="img" class="external-link" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<title>external</title>
<path class="_mark external-link__shape" fill-rule="evenodd" clip-rule="evenodd" d="M12.5858 2H10C9.44771 2 9 1.55228 9 1C9 0.447715 9.44771 0 10 0H16V6C16 6.55228 15.5523 7 15 7C14.4477 7 14 6.55228 14 6V3.41421L5.70711 11.7071C5.31658 12.0976 4.68342 12.0976 4.29289 11.7071C3.90237 11.3166 3.90237 10.6834 4.29289 10.2929L12.5858 2ZM2 14H12V9C12 8.44771 12.4477 8 13 8C13.5523 8 14 8.44771 14 9V16H0V2H7C7.55228 2 8 2.44772 8 3C8 3.55228 7.55228 4 7 4H2V14Z" />
</svg>
</span></a>
</li>
<li class="link-list__item">
<a class="linked-text-with-icon linked-text-with-icon--linkList" href="#" download>Download link<span class="linked-text-with-icon__download-icon">
<svg role="img" class="download" viewBox="0 0 16 15" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<title>download</title>
<path d="M8.49957 0H7.48957C7.21957 0 6.98957 0.22 6.98957 0.5V8.09L5.54957 6.65C5.35957 6.46 5.03957 6.46 4.84957 6.65L4.13957 7.36C3.94957 7.55 3.94957 7.87 4.13957 8.06L7.99957 11.92L11.8596 8.06C12.0496 7.87 12.0496 7.55 11.8596 7.36L11.1496 6.65C10.9596 6.46 10.6396 6.46 10.4496 6.65L9.00957 8.09V0.5C9.00957 0.23 8.78957 0 8.50957 0H8.49957Z" />
<path d="M0.5 1H4.51C4.78 1 5.01 1.22 5.01 1.5V2.51C5.01 2.78 4.79 3.01 4.51 3.01H2.5C2.23 3.01 2 3.23 2 3.51V12.52C2 12.79 2.22 13.02 2.5 13.02H13.51C13.78 13.02 14.01 12.8 14.01 12.52V3.5C14.01 3.23 13.79 3 13.51 3H11.5C11.23 3 11 2.78 11 2.5V1.49C11 1.22 11.22 0.99 11.5 0.99H15.51C15.78 0.99 16.01 1.21 16.01 1.49V14.5C16.01 14.77 15.79 15 15.51 15H0.5C0.23 15 0 14.78 0 14.5V1.5C0 1.23 0.22 1 0.5 1Z" />
</svg>
</span></a>
</li>
</ul>
</div>
<div class="link-list link-list--background-is-{{ background ?: 'unknown' }}">
<ul class="link-list__list">
{% for link in component.links %}
<li class="link-list__item">
{% include 'bits/linked-text-with-icon/linked-text-with-icon.twig' with {
variant: 'linkList'
} %}
</li>
{% endfor %}
</ul>
</div>
{
"site": {
"title": "National Network of Public Health Institutes"
},
"background": "blueTint",
"breadcrumbs": [
{
"title": "Home",
"url": "#"
},
{
"title": "Primary Page One",
"url": "#"
},
{
"title": "Interior Page One",
"url": "#"
}
],
"footerLinks": {
"items": [
{
"title": "Subscribe to our newsletter",
"url": "#"
},
{
"title": "Explore membership benefits",
"url": "#"
},
{
"title": "See career opportunities",
"url": "#"
}
]
},
"contactInfo": {
"copyright": "© National Network of Public Health Institutes. All Rights Reserved",
"facebookLink": "https://facebook.com",
"linkedInLink": "https://linkedin.com",
"youtubeLink": "https://youtube.com",
"flickrLink": "https://flickr.com",
"twitterLink": "https://twitter.com",
"instagramLink": "https://instagram.com",
"youTubeLink": "https://youtube.com"
},
"utilityNavigation": {
"items": [
{
"title": "Member directory",
"url": "#"
},
{
"title": "Events",
"url": "#",
"isActive": true
},
{
"title": "Blog",
"url": "#"
}
]
},
"primaryNavigation": {
"items": [
{
"title": "Workforce resources",
"url": "#",
"children": [
{
"title": "Resource Directory",
"url": "#",
"children": []
},
{
"title": "Trainings",
"url": "#",
"children": [
{
"title": "Training Level 3 example",
"url": "#"
}
]
}
]
},
{
"title": "Programs & Projects",
"url": "#",
"isDescendantActive": true,
"children": [
{
"title": "Data Modernization",
"url": "#",
"children": []
},
{
"title": "Environmental Health and Emergency Preparedness",
"url": "#",
"children": []
},
{
"title": "Evaluation and Impact",
"url": "#",
"isDescendantActive": true,
"children": [
{
"title": "Third level example",
"url": "#",
"isActive": true,
"children": [
{
"title": "Fourth level example",
"url": "#",
"isActive": true,
"children": [
{
"title": "Fifth level example",
"url": "#",
"isActive": true
}
]
},
{
"title": "Fourth level example 2",
"url": "#"
},
{
"title": "Fourth level example 3",
"url": "#"
}
]
}
]
},
{
"title": "Multisector Strategies and Population Health",
"url": "#",
"children": []
},
{
"title": "Public Health Events and Convenings Management",
"url": "#",
"children": []
},
{
"title": "Public Health Infrastructure Grant",
"url": "#",
"children": []
},
{
"title": "Public health training",
"url": "#",
"children": []
}
]
},
{
"title": "Explore the Network",
"url": "#",
"children": [
{
"title": "Member Directory",
"url": "#",
"children": []
},
{
"title": "Membership paths",
"url": "#",
"children": []
}
]
},
{
"title": "Partner with us",
"url": "#"
},
{
"title": "About",
"url": "#",
"children": [
{
"title": "Blog",
"url": "#",
"children": []
},
{
"title": "Events",
"url": "#",
"children": []
},
{
"title": "Newsletters",
"url": "#",
"children": []
},
{
"title": "Signature programs",
"url": "#",
"children": []
},
{
"title": "Contact us",
"url": "#",
"children": []
},
{
"title": "Meet the team",
"url": "#",
"children": []
}
]
}
]
},
"component": {
"type": "link-list",
"links": [
{
"text": "Internal link",
"url": "#"
},
{
"text": "External link",
"url": "#",
"type": "external_link"
},
{
"text": "Download link",
"url": "#",
"type": "file_link"
}
]
}
}
.link-list {
@include componentWithMargin;
--backgroundColor: var(--blueTint);
display: flex;
&--background-is-blueTint {
--backgroundColor: var(--white);
}
&__list {
background: var(--backgroundColor);
min-width: 50%;
padding: 1rem;
}
&__item:not(:last-child) {
margin-bottom: 1rem;
}
}
No notes defined.