<a class="linked-text-with-icon" 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>
<a class="linked-text-with-icon{{ variant ? ' linked-text-with-icon--' ~ variant }}" href="{{ link.url }}" {% if link.type == 'file_link' %}download{% endif %}>
{{- link.text -}}
{%- if link.type == 'external_link' -%}
<span class="linked-text-with-icon__external-link-icon">
{% include 'bits/icons/external-link.twig' %}
</span>
{%- elseif link.type == 'file_link' -%}
<span class="linked-text-with-icon__download-icon">
{% include 'bits/icons/download.twig' %}
</span>
{%- else -%}
<span class="linked-text-with-icon__chevron-icon">
{% include 'bits/icons/right-chevron.twig' %}
</span>
{%- endif -%}
</a>
{
"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": []
}
]
}
]
},
"link": {
"text": "Internal link",
"url": "#",
"type": "internal_link"
}
}
.linked-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;
}
&:hover, &: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%;
}
}
}
No notes defined.