<a class="text-with-icon text-with-icon--linkList text-with-icon--is-link" href="#">
External link<span class="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>
{% set element = element|default('p') %}
{% set ariaLabel = ariaLabel|default(link.text) %}
{% if isLink %}
<a class="text-with-icon{{ variant ? ' text-with-icon--' ~ variant }} text-with-icon--is-link" href="{{ link.url }}" {% if link.type == 'file_link' %}download{% endif %}>
{% else %}
<{{ element }} class="text-with-icon{{ variant ? ' text-with-icon--' ~ variant }}" id="{{ textWithIconId|default(link.text|replace({' ':'-'})|lower) }}" {% if ariaLabel %}aria-label="{{ ariaLabel }}"{% endif %}
>
{% endif %}
{{- link.text -}}
{%- if link.type == 'external_link' -%}
<span class="text-with-icon__external-link-icon">
{% include 'bits/icons/external-link.twig' %}
</span>
{%- elseif link.type == 'file_link' -%}
<span class="text-with-icon__download-icon">
{% include 'bits/icons/download.twig' %}
</span>
{%- else -%}
<span class="text-with-icon__chevron-icon">
{% include 'bits/icons/right-chevron.twig' %}
</span>
{%- endif -%}
{% if isLink %}
</a>
{% else %}
</{{ element }}>
{% endif %}
{
"site": {
"title": "National Network of Public Health Institutes"
},
"background": "white",
"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": []
}
]
}
]
},
"latest_blog_component": {
"heading": "Latest from the Blog",
"moreLinkText": "View all posts",
"moreLinkUrl": "#",
"moreLinkType": "internal",
"cards": [
{
"type": "Press Release",
"typeIcon": "bullhorn",
"title": "Mauris nibh felis adipiscing varius in lacinia vel tellus",
"isComplete": true
},
{
"type": "Announcement",
"typeIcon": "update-boxes",
"title": "Mauris nibh felis adipiscing varius in lacinia vel tellus Lorem nulla nostrud velit anim lorem anim lorem qui enim.",
"isComplete": true
},
{
"type": "Press Release",
"typeIcon": "bullhorn",
"title": "Mauris nibh felis adipiscing varius in lacinia vel tellus",
"isComplete": true
}
]
},
"isLink": true,
"link": {
"text": "External link",
"url": "#",
"type": "external_link"
},
"variant": "linkList"
}
.text-with-icon {
@include detailBold;
--currentIconColor: var(--purple);
--headingColor: var(--black);
color: var(--headingColor);
text-decoration: none;
transition: color 200ms ease-in-out;
position: relative;
&--linkList {
@include headline6;
--currentIconColor: var(--brightPurple);
--headingColor: var(--navy);
}
&--headline5 {
@include headline5;
}
&--bodyLarge {
@include bodyLarge;
--currentIconColor: var(--brightPurple);
font-weight: 400;
}
&--is-link:hover,
&--is-link:focus {
--currentIconColor: var(--purple);
color: var(--purple);
text-decoration: underline;
}
&__external-link-icon, &__download-icon {
display: inline-block;
margin-left: .6rem;
position: relative;
width: 1rem;
& > svg {
transition: fill 200ms ease-in-out;
fill: var(--currentIconColor);
width: 100%;
}
}
&__chevron-icon {
display: inline-block;
margin-left: .6rem;
position: relative;
width: .5rem;
& > svg {
transition: fill 200ms ease-in-out;
fill: var(--currentIconColor);
width: 100%;
}
}
[class$="__link"]:hover &,
[class*="__link"]:hover & {
text-decoration: underline;
}
}
No notes defined.