<div class="home-programs-section">
<div class="home-programs-section__content-container">
<h2 class="home-programs-section__header">National public health priorities</h2>
<div class="home-programs-section__description">With a presence in <strong>all 50 states</strong> and numerous territories, NNPHI is identifying gaps in public health infrastructure. Our programs teams and network members are ready to work with philanthropic partners in <em>key areas</em> impacting population health.</div>
<div class="home-programs-section__cards">
<div class="home-programs-section__card">
<span class="home-programs-section__card-text">Behavior health</span>
<div class="home-programs-section__button-container">
<a href="#" class="standard-button standard-button-position--default">
<span class="standard-button__text">
Learn more
</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="home-programs-section__card">
<span class="home-programs-section__card-text">Chronic diseases</span>
<div class="home-programs-section__button-container">
<a href="#" class="standard-button standard-button-position--default">
<span class="standard-button__text">
Learn more
</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="home-programs-section__card">
<span class="home-programs-section__card-text">Workforce training</span>
<div class="home-programs-section__button-container">
<a href="#" class="standard-button standard-button-position--default">
<span class="standard-button__text">
Learn more
</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>
</div>
</div>
<div class="home-programs-section">
<div class="home-programs-section__content-container">
<h2 class="home-programs-section__header">{{ programsSection.header }}</h2>
<div class="home-programs-section__description">{{ programsSection.description | raw }}</div>
<div class="home-programs-section__cards">
{% for card in programsSection.portfolioCards %}
<div class="home-programs-section__card">
<span class="home-programs-section__card-text">{{ card.text }}</span>
<div class="home-programs-section__button-container">
{% include 'bits/standard-button/standard-button.twig' with {
button: {
text: 'Learn more',
url: card.link,
linkType: 'internal',
}
} %}
</div>
</div>
{% endfor %}
</div>
{% if programsSection.addCta %}
<div class="home-programs-section__cta">
{% include 'bits/standard-button/standard-button.twig' with {
button: {
text: programsSection.ctaLinkText,
url: programsSection.ctaLinkReference,
linkType: component.ctaLinkType,
variant: 'onDarkSecondary'
}
} %}
</div>
{% endif %}
</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": []
}
]
}
]
},
"programsSection": {
"header": "National public health priorities",
"description": "With a presence in <strong>all 50 states</strong> and numerous territories, NNPHI is identifying gaps in public health infrastructure. Our programs teams and network members are ready to work with philanthropic partners in <em>key areas</em> impacting population health.",
"portfolioCards": [
{
"text": "Behavior health",
"link": "#"
},
{
"text": "Chronic diseases",
"link": "#"
},
{
"text": "Workforce training",
"link": "#"
}
],
"addCta": false,
"ctaLinkText": "Learn more about what we offer members",
"ctaLinkReference": "#",
"ctaLinkType": "internal",
"isComplete": true,
"showSection": true
}
}
$breakpointHomepage: 47.5rem; // 760px
.home-programs-section {
--cardBackgroundColor: var(--lightBlue);
--textColor: var(--white);
--cardSkew: -8deg;
background-color: var(--purple);
width: 100%;
&__content-container {
@include contentContainer;
align-items: center;
display: flex;
flex-direction: column;
justify-content: center;
max-width: 60rem;
@include fluid(padding-bottom, 4.5rem, 7rem);
@include fluid(padding-top, 4.5rem, 7rem);
}
&__header {
@include headline2;
color: var(--textColor);
margin-bottom: 2rem;
}
&__description {
@include richText;
@include bodyLarge;
color: var(--textColor);
@include fluid('font-size', 1rem, 1.5rem);
font-weight: 200;
margin-bottom: 3.75rem;
max-width: 60rem;
text-align: center;
}
&__cards {
column-gap: 2rem;
display: grid;
grid-template-columns: repeat(auto-fit, min(20rem, 100%));
grid-template-rows: auto;
justify-content: center;
padding-left: 1.75rem;
row-gap: 1.5rem;
width: 100%;
@media (min-width: 31.25rem) {
padding-left: 0;
}
}
&__card {
align-items: center;
background-color: var(--cardBackgroundColor);
display: flex;
flex-direction: column;
@include fluid(height, 14rem, 17rem);
justify-content: center;
margin-right: 2rem;
max-width: 20rem;
position: relative;
&:before {
background-color: var(--cardBackgroundColor);
bottom: -3rem;
content: '';
inset: 0;
position: absolute;
transform-origin: top right;
transform: skewX(var(--cardSkew));
}
&:after {
background-color: var(--cardBackgroundColor);
bottom: -3rem;
content: '';
inset: 0;
position: absolute;
transform-origin: bottom right;
transform: skewX(var(--cardSkew));
z-index: 0;
}
}
&__card-text {
@include headline5;
color: var(--purple);
padding: 0 1rem;
position: relative;
text-align: center;
z-index: 1;
}
&__button-container {
margin-top: 3.5rem;
z-index: 1;
& * {
@include fluid(font-size, 0.675rem, 0.875rem);
}
}
&__cta {
margin-top: 4rem;
@media (max-width: #{$breakpointHomepage}) {
width: 100%;
}
> * {
@media (max-width: #{$breakpointHomepage}) {
width: 100%;
}
}
}
}
No notes defined.