<div class="basic-header basic-header--blue basic-header--no-image">
<div class="basic-header__content-container">
<div class="basic-header__content">
<div class="basic-header__text-content">
<h1 class="basic-header__title">
Interior Page
</h1>
<div class="basic-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="basic-header {{ background ? 'basic-header--blue' }} {% if post.addImage and post.featuredImage %}basic-header--with-image{% else %}basic-header--no-image{% endif %}">
<div class="basic-header__content-container">
<div class="basic-header__content">
<div class="basic-header__text-content">
<h1 class="basic-header__title">
{{ post.title }}
</h1>
{% if post.introText %}
<div class="basic-header__intro-text">
{{ post.introText }}
</div>
{% endif %}
</div>
{% if post.addImage and post.featuredImage %}
<div class="basic-header__featured-image">
<div class="shapes--top"></div>
<div class="shapes--bottom"></div>
<img src="{{ post.featuredImage.src | towebp | resize(1400) }}"
alt="{{ post.featuredImage.alt ?: '' }}"
height="{{ post.featuredImage.height }}"
width="{{ post.featuredImage.width }}">
</div>
{% endif %}
</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": []
}
]
}
]
},
"latest_blog_component": {
"heading": "Latest from the Blog",
"moreLinkText": "View all posts",
"moreLinkUrl": "#",
"moreLinkType": "internal",
"cards": [
{
"type": "Press Release",
"typeIcon": "bullhorn",
"title": "Mauris nibh felis adipiscing varius in lacinia vel tellus",
"isComplete": true
},
{
"type": "Announcement",
"typeIcon": "update-boxes",
"title": "Mauris nibh felis adipiscing varius in lacinia vel tellus Lorem nulla nostrud velit anim lorem anim lorem qui enim.",
"isComplete": true
},
{
"type": "Press Release",
"typeIcon": "bullhorn",
"title": "Mauris nibh felis adipiscing varius in lacinia vel tellus",
"isComplete": true
}
]
},
"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>"
}
}
.basic-header {
$breakpoint: 50rem;
&--no-image {
@include fluid(padding-block-end, 2rem, 6rem);
@include fluid(padding-block-start, 2rem, 6rem);
}
&--blue {
background-color: var(--blueTint);
}
&__content-container {
.basic-header--no-image & {
@include contentContainer;
}
}
&__content {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(24rem, 100%), 1fr));
column-gap: 2rem;
max-width: 100%;
}
&__title {
@include headline1;
}
&__text-content {
.basic-header--with-image & {
@include fluid(padding-block-end, 2rem, 6rem);
@include fluid(padding-block-start, 2rem, 6rem);
padding-inline: 3rem;
@media (min-width: #{$breakpoint}) {
max-width: 55ch;
justify-self: end;
padding-inline: 3rem 0;
}
}
}
&__intro-text {
@include bodyLarge;
color: var(--grayDarkest);
margin-top: 1.5rem;
margin-bottom: 3rem;
max-width: 50rem;
}
&__featured-image {
width: 100%;
height: auto;
position: relative;
@media (min-width: #{$breakpoint}) {
clip-path: polygon(0 0, 100% 0, 100% 100%, 12% 100%);
}
img {
object-fit: cover;
height: 100%;
object-position: center right;
}
& .captioned-image__caption {
font-size: .875rem;
}
.shapes--top {
position: absolute;
right: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 2;
&:before {
background-color: var(--blue);
content: '';
height: 1rem;
position: absolute;
left: calc(50% + 5rem);
top: 1rem;
transform-origin: bottom left;
transform: skewX(20deg);
width: 100vw;
@media (min-width: $breakpoint) {
height: 4rem;
left: calc(100% - 20rem);
top:3.5rem;
}
}
&:after {
content: '';
background-color: var(--yellow);
height: 2rem;
position: absolute;
left: 80%;
top: 1.5rem;
transform-origin: bottom left;
transform: skewX(-20deg);
width: 100vw;
@media (min-width: $breakpoint) {
height: 7rem;
left: calc(100% - 12rem);
top: 4.5rem;
}
}
}
.shapes--bottom {
position: absolute;
right: -2rem;
bottom: 0rem;
width: 100%;
height: 100%;
z-index: 2;
&:before {
content: '';
background-color: var(--orange);
height: 0.85rem;
position: absolute;
left: 30%;
bottom: 3rem;
transform-origin: bottom left;
transform: skewX(-20deg);
width: 100vw;
@media (min-width: $breakpoint) {
left: calc(100% - 23rem);
}
}
}
}
}
No notes defined.