<div class="homepage-resources-section">
<div class="homepage-resources-section__container">
<div class="homepage-resources-section__text-content">
<h2 class="homepage-resources-section__header">Resources for public health workers</h2>
<div class="homepage-resources-section__description">
We’ve curated a selection of tools, guides, and resources designed to support public health professionals. From training materials to best practices, find what you need to advance your work and impact communities.
</div>
<div class="homepage-resources-section__button-container">
<a href="#" class="standard-button standard-button-position--default">
<span class="standard-button__text">
Explore the resource directory
</span>
<span class="standard-button__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>
</div>
</div>
<div class="homepage-resources-section__cards">
<div class="resource-card">
<div class="resource-card__text-content">
<div class="metadata-eyebrow-small">
<div class="metadata-eyebrow-small__type">
<div class="metadata-eyebrow-small__type__icon">
<svg role="img" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 24">
<title>document</title>
<path fill-rule="evenodd" clip-rule="evenodd" d="M20 6.25L14.2857 0.5H0V23.5H20V6.25ZM2.85714 3.375H12.8571V7.6875H17.1429V20.625H2.85714V3.375ZM14.2857 16.3125V17.75H5.71429V16.3125H14.2857ZM14.2857 14.875V13.4375H5.71429V14.875H14.2857ZM14.2857 10.5625V12H5.71429V10.5625H14.2857ZM8.57143 7.6875V6.25H5.71429V7.6875H8.57143Z" />
</svg>
</div>
<div class="metadata-eyebrow-small__type__label">
Powerpoint
</div>
</div>
</div>
<a class="linked-text-with-icon linked-text-with-icon--headline5" href="#">Mauris nibh felis adipiscing varius vel tellus urna lorem ipsum mauris nibh felis adipiscing varius vel tellus urna lorem ipsum<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>
<div class="resource-card__date">
November 2021
</div>
</div>
</div>
<div class="resource-card">
<div class="resource-card__text-content">
<div class="metadata-eyebrow-small">
<div class="metadata-eyebrow-small__type">
<div class="metadata-eyebrow-small__type__icon">
<svg role="img" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 24">
<title>document</title>
<path fill-rule="evenodd" clip-rule="evenodd" d="M20 6.25L14.2857 0.5H0V23.5H20V6.25ZM2.85714 3.375H12.8571V7.6875H17.1429V20.625H2.85714V3.375ZM14.2857 16.3125V17.75H5.71429V16.3125H14.2857ZM14.2857 14.875V13.4375H5.71429V14.875H14.2857ZM14.2857 10.5625V12H5.71429V10.5625H14.2857ZM8.57143 7.6875V6.25H5.71429V7.6875H8.57143Z" />
</svg>
</div>
<div class="metadata-eyebrow-small__type__label">
PDF
</div>
</div>
</div>
<a class="linked-text-with-icon linked-text-with-icon--headline5" href="#">Mauris nibh felis adipiscing varius vel tellus urna<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>
<div class="resource-card__date">
November 2021
</div>
</div>
</div>
<div class="resource-card">
<div class="resource-card__text-content">
<div class="metadata-eyebrow-small">
<div class="metadata-eyebrow-small__type">
<div class="metadata-eyebrow-small__type__icon">
<svg role="img" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 24">
<title>document</title>
<path fill-rule="evenodd" clip-rule="evenodd" d="M20 6.25L14.2857 0.5H0V23.5H20V6.25ZM2.85714 3.375H12.8571V7.6875H17.1429V20.625H2.85714V3.375ZM14.2857 16.3125V17.75H5.71429V16.3125H14.2857ZM14.2857 14.875V13.4375H5.71429V14.875H14.2857ZM14.2857 10.5625V12H5.71429V10.5625H14.2857ZM8.57143 7.6875V6.25H5.71429V7.6875H8.57143Z" />
</svg>
</div>
<div class="metadata-eyebrow-small__type__label">
PDF
</div>
</div>
</div>
<a class="linked-text-with-icon linked-text-with-icon--headline5" href="#">Mauris nibh felis adipiscing varius vel tellus urna<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>
<div class="resource-card__date">
November 2021
</div>
</div>
</div>
</div>
</div>
</div>
<div class="homepage-resources-section">
<div class="homepage-resources-section__container">
<div class="homepage-resources-section__text-content">
<h2 class="homepage-resources-section__header">{{ header }}</h2>
<div class="homepage-resources-section__description">
{{ description }}
</div>
{% if cta %}
<div class="homepage-resources-section__button-container">
{% include 'bits/standard-button/standard-button.twig' with {
button: {
text: cta.text,
url: cta.url,
linkType: cta.external ? 'external' : 'internal'
}
} %}
</div>
{% endif %}
</div>
<div class="homepage-resources-section__cards">
{% for resource in resources %}
{% include 'partials/resource-card/resource-card.twig' with { resource } %}
{% endfor %}
</div>
</div>
</div>
{
"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": []
}
]
}
]
},
"header": "Resources for public health workers",
"description": "We’ve curated a selection of tools, guides, and resources designed to support public health professionals. From training materials to best practices, find what you need to advance your work and impact communities.",
"cta": {
"text": "Explore the resource directory",
"url": "#",
"external": false
},
"resources": [
{
"resourceType": "Powerpoint",
"creationDateDisplay": "November 2021",
"title": "Mauris nibh felis adipiscing varius vel tellus urna lorem ipsum mauris nibh felis adipiscing varius vel tellus urna lorem ipsum",
"permalink": "#"
},
{
"resourceType": "PDF",
"creationDateDisplay": "November 2021",
"title": "Mauris nibh felis adipiscing varius vel tellus urna",
"permalink": "#"
},
{
"resourceType": "PDF",
"creationDateDisplay": "November 2021",
"title": "Mauris nibh felis adipiscing varius vel tellus urna",
"permalink": "#"
}
],
"showSection": true
}
$breakpoint: 46.875rem;
.homepage-resources-section {
background-color: var(--blueTint);
background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9Im5vbmUiIHZpZXdCb3g9IjAgMCA4NDguMjc3IDM1OC45NzciPjxnIHN0eWxlPSJmaWxsOiNjYmU4Zjk7ZmlsbC1vcGFjaXR5OjEiPjxwYXRoIGQ9Ik0tNTQ1LjEzMS45OTdoODI0LjU4MnY1Ny44MDRoLTgyNC41ODJ6TS01OTkuMTEyIDg3LjE4OEgyMjUuNDd2NTcuODA0aC04MjQuNTgyek0tNDM3LjQ0MyAxNzMuNDE3aDgyNC41ODJ2NTcuODA0aC04MjQuNTgyek0tMjY4LjY2NSAyNTkuNjQ3aDgyNC41ODJ2NTcuODA0aC04MjQuNTgyek0tOTMuOTYzIDM0NS44NzdoODI0LjU4MnY1Ny44MDRILTkzLjk2M3pNLTIyMy43NzcgNDMyLjA1Nmg4MjQuNTgydjU3LjgwNGgtODI0LjU4MnpNLTUuMjM0IDUxOC4yOTRoODI0LjU4MnY1Ny44MDRILTUuMjM0ek0xMjYuODEyIDYwNC41MTdoODI0LjU4MnY1Ny44MDRIMTI2LjgxMnpNMTExLjkzMyA2OTAuNzE1aDgyNC41ODJ2NTcuODA0SDExMS45MzN6TTMxMS41MTggNzc2Ljk1SDExMzYuMXY1Ny44MDRIMzExLjUxOHpNMjc1LjMxIDg2My4xNDVoODI0LjU4MnY1Ny44MDRIMjc1LjMxek00NTAuMDEyIDk0OS4zNzVoODI0LjU4MnY1Ny44MDRINDUwLjAxMnoiIHN0eWxlPSJmaWxsOiNjYmU4Zjk7ZmlsbC1vcGFjaXR5OjE7c3Ryb2tlLXdpZHRoOi45NjQwMjIiIHRyYW5zZm9ybT0ibWF0cml4KC42ODg0IC0uNzI1MzMgLjAyNjExIC45OTk2NiAtODIuMDg5IDIxOC4xKSIvPjwvZz48L3N2Zz4=");
background-position: bottom left;
background-repeat: no-repeat;
background-size: 200%;
overflow-x: clip;
overflow-y: hidden;
@media (min-width: $breakpoint) {
background-size: 60%;
}
&__container {
column-gap: 7rem;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(32rem, 100%), 1fr));
justify-content: center;
margin-left: auto;
margin-right: auto;
max-width: 93rem;
@include fluid('padding-bottom', 3rem, 11rem);
@include fluid('padding-left', 1.5rem, 4rem);
@include fluid('padding-right', 1.5rem, 4rem);
@include fluid('padding-top', 3rem, 11rem);
row-gap: 3rem;
}
&__text-content {
@include body;
color: var(--black);
margin-top: 1rem;
max-width: 40rem;
}
&__header {
@include headline3;
margin-bottom: 1.5rem;
}
&__button-container {
margin-top: 1.5rem;
}
&__cards {
display: flex;
flex-direction: column;
gap: 1.5rem;
}
}
No notes defined.