<div class="listing-header">
<div class="listing-header__content-container">
<div class="listing-header__content">
<div class="listing-header__secondary-navigation">
<nav class="secondary-navigation">
<div class="secondary-navigation__heading">
Programs & Projects
</div>
<ul class="secondary-navigation">
<li class="secondary-navigation__item">
<a class="
secondary-navigation__item-link
" href="#">Data Modernization
</a>
</li>
<li class="secondary-navigation__item">
<a class="
secondary-navigation__item-link
" href="#">Environmental Health and Emergency Preparedness
</a>
</li>
<li class="secondary-navigation__item">
<a class="
secondary-navigation__item-link
secondary-navigation__item-link--active " href="#">Evaluation and Impact
</a>
<ul class="secondary-navigation-children secondary-navigation-children--">
<li class="secondary-navigation-children__item">
<a class="
secondary-navigation-children__item-link
secondary-navigation-children__item-link--active
" href="#">Third level example
</a>
<ul class="secondary-navigation-children secondary-navigation-children--">
<li class="secondary-navigation-children__item">
<a class="
secondary-navigation-children__item-link
secondary-navigation-children__item-link--active
" href="#">Fourth level example
</a>
<ul class="secondary-navigation-children secondary-navigation-children--">
<li class="secondary-navigation-children__item">
<a class="
secondary-navigation-children__item-link
secondary-navigation-children__item-link--active
" href="#">Fifth level example
</a>
<ul class="secondary-navigation-children secondary-navigation-children--">
</ul>
</li>
</ul>
</li>
<li class="secondary-navigation-children__item">
<a class="
secondary-navigation-children__item-link
" href="#">Fourth level example 2
</a>
</li>
<li class="secondary-navigation-children__item">
<a class="
secondary-navigation-children__item-link
" href="#">Fourth level example 3
</a>
</li>
</ul>
</li>
</ul>
</li>
<li class="secondary-navigation__item">
<a class="
secondary-navigation__item-link
" href="#">Multisector Strategies and Population Health
</a>
</li>
<li class="secondary-navigation__item">
<a class="
secondary-navigation__item-link
" href="#">Public Health Events and Convenings Management
</a>
</li>
<li class="secondary-navigation__item">
<a class="
secondary-navigation__item-link
" href="#">Public Health Infrastructure Grant
</a>
</li>
<li class="secondary-navigation__item">
<a class="
secondary-navigation__item-link
" href="#">Public health training
</a>
</li>
</ul>
</nav>
</div>
<div class="listing-header__text-content">
<h1 class="listing-header__title">
Interior Page
</h1>
<div class="listing-header__intro-text">
<p>Lorem ipsum dolor sit, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis.</p>
</div>
</div>
</div>
</div>
</div>
<div class="listing-header">
<div class="listing-header__content-container">
<div class="listing-header__content">
{% if removeSidebar is not defined %}
<div class="listing-header__secondary-navigation">
{% include 'partials/navigation/secondary-navigation/secondary-navigation.twig' %}
</div>
{% endif %}
<div class="listing-header__text-content">
<h1 class="listing-header__title">
{{ post.title }}
</h1>
{% if post.introText %}
<div class="listing-header__intro-text">
{{ post.introText }}
</div>
{% endif %}
</div>
</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": []
}
]
}
]
},
"post": {
"title": "Interior Page",
"introText": "<p>Lorem ipsum dolor sit, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis.</p>"
}
}
.listing-header {
$secondaryNavigationBreakpoint: 62.5rem;
@include fluid(padding-bottom, 2rem, 6rem);
@include fluid(padding-top, 2rem, 6rem);
background-color: var(--blueTint);
background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9Im5vbmUiIHZpZXdCb3g9IjAgMCA4NDguMjc3IDM1OC45NzciPjxnIHN0eWxlPSJmaWxsOiNjYmU4Zjk7ZmlsbC1vcGFjaXR5OjEiPjxwYXRoIGQ9Ik0tNTQ1LjEzMS45OTdoODI0LjU4MnY1Ny44MDRoLTgyNC41ODJ6TS01OTkuMTEyIDg3LjE4OEgyMjUuNDd2NTcuODA0aC04MjQuNTgyek0tNDM3LjQ0MyAxNzMuNDE3aDgyNC41ODJ2NTcuODA0aC04MjQuNTgyek0tMjY4LjY2NSAyNTkuNjQ3aDgyNC41ODJ2NTcuODA0aC04MjQuNTgyek0tOTMuOTYzIDM0NS44NzdoODI0LjU4MnY1Ny44MDRILTkzLjk2M3pNLTIyMy43NzcgNDMyLjA1Nmg4MjQuNTgydjU3LjgwNGgtODI0LjU4MnpNLTUuMjM0IDUxOC4yOTRoODI0LjU4MnY1Ny44MDRILTUuMjM0ek0xMjYuODEyIDYwNC41MTdoODI0LjU4MnY1Ny44MDRIMTI2LjgxMnpNMTExLjkzMyA2OTAuNzE1aDgyNC41ODJ2NTcuODA0SDExMS45MzN6TTMxMS41MTggNzc2Ljk1SDExMzYuMXY1Ny44MDRIMzExLjUxOHpNMjc1LjMxIDg2My4xNDVoODI0LjU4MnY1Ny44MDRIMjc1LjMxek00NTAuMDEyIDk0OS4zNzVoODI0LjU4MnY1Ny44MDRINDUwLjAxMnoiIHN0eWxlPSJmaWxsOiNjYmU4Zjk7ZmlsbC1vcGFjaXR5OjE7c3Ryb2tlLXdpZHRoOi45NjQwMjIiIHRyYW5zZm9ybT0ibWF0cml4KC42ODg0IC0uNzI1MzMgLjAyNjExIC45OTk2NiAtODIuMDg5IDIxOC4xKSIvPjwvZz48L3N2Zz4=");
background-position: bottom left;
background-repeat: no-repeat;
background-size: 53rem;
overflow-x: clip;
overflow-y: hidden;
&__content-container {
@include contentContainer;
}
&__content {
position: relative;
@media (min-width: $secondaryNavigationBreakpoint) {
display: flex;
gap: 8rem;
}
}
&__secondary-navigation {
display: none;
@media (min-width: $secondaryNavigationBreakpoint) {
display: block;
flex: 0 0 320px;
}
}
&__text-content {
flex: 1 1 auto;
}
&__title {
@include headline1;
}
&__intro-text {
@include bodyLarge;
color: var(--grayDarkest);
margin-top: 1.5rem;
margin-bottom: 3rem;
max-width: 50rem;
}
}
No notes defined.