<div class="homepage-hero">
<div class="homepage-hero__container">
<h1 class="homepage-hero__heading">
National Network of Public Health Institutes
</h1>
<p class="homepage-hero__tagline">
We help the public health workforce thrive.
</p>
<div class="homepage-hero__description">
<div class="homepage-hero__description-text">
<p>The National Network of Public Health Institutes (NNPHI) and our <a href="#">member</a> institutes provide <strong>trusted</strong> training, workforce <em>development</em>, and infrastructure strategies to help the public health workforce fulfill its mission.</p>
</div>
<div class="homepage-hero__ctas">
<a href="#" class="standard-button standard-button--secondary standard-button-position--default">
<span class="standard-button__text">
Read our mission and vision
</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>
<a href="#" class="standard-button standard-button--secondary standard-button-position--default">
<span class="standard-button__text">
Connect with local PHIs
</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-hero__ctas-mobile">
<a href="#" class="standard-button standard-button--onDarkSecondary standard-button-position--default">
<span class="standard-button__text">
Read our mission and vision
</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>
<a href="#" class="standard-button standard-button--onDarkSecondary standard-button-position--default">
<span class="standard-button__text">
Connect with local PHIs
</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 class="homepage-hero">
<div class="homepage-hero__container">
{% if site.title %}
<h1 class="homepage-hero__heading">
{{ site.title }}
</h1>
{% endif %}
{% if tagline %}
<p class="homepage-hero__tagline">
{{ tagline }}
</p>
{% endif %}
<div class="homepage-hero__description">
<div class="homepage-hero__description-text">
{{ description }}
</div>
{% if cta1 or cta2 %}
<div class="homepage-hero__ctas">
{% if cta1 %}
{% include 'bits/standard-button/standard-button.twig' with {
button: {
text: cta1.text,
url: cta1.url,
linkType: cta1.type,
variant: 'secondary',
}
} %}
{% endif %}
{% if cta2 %}
{% include 'bits/standard-button/standard-button.twig' with {
button: {
text: cta2.text,
url: cta2.url,
linkType: cta2.type,
variant: 'secondary',
}
} %}
{% endif %}
</div>
{% endif %}
</div>
{% if cta1 or cta2 %}
<div class="homepage-hero__ctas-mobile">
{% if cta1 %}
{% include 'bits/standard-button/standard-button.twig' with {
button: {
text: cta1.text,
url: cta1.url,
linkType: cta1.type,
variant: 'onDarkSecondary',
}
} %}
{% endif %}
{% if cta2 %}
{% include 'bits/standard-button/standard-button.twig' with {
button: {
text: cta2.text,
url: cta2.url,
linkType: cta2.type,
variant: 'onDarkSecondary',
}
} %}
{% endif %}
</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": []
}
]
}
]
},
"tagline": "We help the public health workforce thrive.",
"description": "<p>The National Network of Public Health Institutes (NNPHI) and our <a href=\"#\">member</a> institutes provide <strong>trusted</strong> training, workforce <em>development</em>, and infrastructure strategies to help the public health workforce fulfill its mission.</p>",
"cta1": {
"text": "Read our mission and vision",
"url": "#",
"type": "internal"
},
"cta2": {
"text": "Connect with local PHIs",
"url": "#",
"type": "internal"
},
"isComplete": true,
"heading": "Lorem ipsum"
}
$breakpoint: 38rem;
.homepage-hero {
background-color: var(--navy);
background-image: url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMTY0OCA2OTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0ibS03OC45LTc1LjJoMTc5OS4xdjg0Ny4xaC0xNzk5LjF6IiBmaWxsPSIjMjE0MTViIi8+PHBhdGggZD0ibTE3MjMuOSA1ODQuMmgtMzAwLjRsMzkuNiA4MS4xaDMwMC40eiIgZmlsbD0iI2Y1YzMyZCIvPjxwYXRoIGQ9Im0xMDgxLjEgMzk3LjZoLTg5NC4xbDE5LjkgNDAuNmg4OTR6IiBmaWxsPSIjYmI3MWY0Ii8+PHBhdGggZD0ibTE0MDcuOCA0MzguNWgtNjUzLjVsMzkuNiA4MS4xaDY1My41em0tNjkzLjEtMzI0LjZoLTgzNC42bDM5LjYgODEuMWg4MzQuNnoiIGZpbGw9IiMyNzY4YjIiLz48cGF0aCBkPSJtLTE1LjQgNTI0LjZoNzM4LjdsLTY4LjMgMTM5LjRoLTczOC43eiIgZmlsbD0iIzUyMGI0ZSIvPjxwYXRoIGQ9Im0xMDkxIDM5Ny41aC02NTMuNWw5LjktMjAuMmg2NTMuNXoiIGZpbGw9IiM0YWJkZWQiLz48cGF0aCBkPSJtMTQ5NCA0NzYuOGg1NzIuMWwtOS45LTIwLjNoLTU3Mi4xeiIgZmlsbD0iI2YyNmQyNiIvPjxwYXRoIGQ9Im0xNjM4LjQgNzY0LjFoLTYwNy4zbDY4LjMtMTM5LjNoNjA3LjN6bS0xMi42LTU1OC42aC04NTFsOS45IDIwLjNoODUxeiIgZmlsbD0iI2JiNzFmNCIvPjxwYXRoIGQ9Im0tMzEgMzJoMTAyNC42bC05LjkgMjAuMmgtMTAyNC42em04OTIuMSA2MTAuNWg1MzEuNWwtOS45IDIwLjNoLTUzMS41eiIgZmlsbD0iIzRhYmRlZCIvPjxwYXRoIGQ9Im0xODA3LjIgMzYzaC00MjEuNmwxOS44LTQwLjVoNDIxLjZ6IiBmaWxsPSIjNTIwYjRlIi8+PHBhdGggZD0ibTE1MzUuOSAxMTAuOWgzMDAuNWwtMzkuNiA4MS4xaC0zMDAuNXoiIGZpbGw9IiMyNzY4YjIiLz48cGF0aCBkPSJtNDE5IDU2NS4yaC0zMDAuNWwzOS42LTgxLjFoMzAwLjV6bTEwNDUuMy01MTIuOWgtNzM0LjFsMTkuOCA0MC42aDczNC4xeiIgZmlsbD0iI2YyNmQyNiIvPjxwYXRoIGQ9Im04MjAgMzQ1LjJoLTg5NGwxOS44LTQwLjVoODk0eiIgZmlsbD0iI2Y1YzMyZCIvPjxwYXRoIGQ9Im0wIDBoMTY0OHY2OTZoLTE2NDh6IiBmaWxsPSJub25lIi8+PC9zdmc+");
background-position: center;
background-repeat: no-repeat;
background-size: cover;
overflow-x: clip;
overflow-y: hidden;
&__container {
@include contentContainer;
@include fluid('margin-top', 2rem, 6.8rem);
@media (min-width: $breakpoint) {
@include fluid('margin-bottom', 0rem, 8rem);
}
}
&__heading {
@include invisible();
}
&__tagline {
@include headline1;
background-color: var(--purple);
color: var(--white);
@include fluid('margin-right', 2rem, 8rem);
padding-bottom: 2rem;
padding-top: 2rem;
@include fluid('padding-right', 1rem, 6rem);
position: relative;
z-index: 0;
&:after {
content: "";
background-color: var(--purple);
bottom: 0;
display: block;
position: absolute;
right: 0;
top: 0;
transform: skewX(-15deg);
transform-origin: bottom left;
width: 8rem;
z-index: -1;
}
&:before {
background-color: var(--purple);
bottom: 0;
content: "";
display: block;
position: absolute;
top: 0;
right: 100%;
width: 1600px;
}
}
&__description {
background-color: var(--white);
@include fluid('margin-left', 4rem, 31rem);
padding-top: 2rem;
padding-bottom: 2rem;
@include fluid('padding-left', 0rem, 3rem);
position: relative;
z-index: 0;
&:before {
background-color: var(--white);
bottom: 0;
content: "";
display: block;
left: 100%;
position: absolute;
top: 0;
width: 1600px;
}
&:after {
background-color: var(--white);
bottom: 0;
content: "";
display: block;
left: 0;
position: absolute;
top: 0;
transform: skewX(22deg);
transform-origin: bottom left;
width: 100rem;
z-index: -1;
}
}
&__description-text {
@include richText;
@include bodyLarge;
}
&__ctas {
display: flex;
flex-wrap: wrap;
gap: 1rem 1.38rem;
margin-top: 1.12rem;
@media (max-width: $breakpoint) {
display: none;
}
}
&__ctas-mobile {
display: none;
flex-direction: column;
gap: 1rem;
padding-top: 2rem;
padding-bottom: 2rem;
@media (max-width: $breakpoint) {
display: flex;
}
}
}
No notes defined.