<div class="header-base header-base--light">
<div class="header-base__breadcrumbs">
<nav aria-label="Breadcrumb navigation" class="breadcrumbs breadcrumbs--light">
<ul class="breadcrumbs__list">
<li class="breadcrumbs__item">
<a href="#" class="breadcrumbs__item-link">
Home</a><span class="breadcrumbs__separator"><svg aria-hidden="true" class="icon-right-triangle" xmlns="http://www.w3.org/2000/svg" width="6" height="8" viewBox="0 0 6 8">
<path class="_mark icon-right-triangle__shape" fill="#AEB4BA" fill-rule="evenodd" d="M0 0l6 4-6 4z" />
</svg>
</span>
</li>
<li class="breadcrumbs__item">
<a href="#" class="breadcrumbs__item-link">
Our Work</a><span class="breadcrumbs__separator"><svg aria-hidden="true" class="icon-right-triangle" xmlns="http://www.w3.org/2000/svg" width="6" height="8" viewBox="0 0 6 8">
<path class="_mark icon-right-triangle__shape" fill="#AEB4BA" fill-rule="evenodd" d="M0 0l6 4-6 4z" />
</svg>
</span>
</li>
<li class="breadcrumbs__item">
<a href="#" class="breadcrumbs__item-link">
Interior Page One</a><span class="breadcrumbs__separator"><svg aria-hidden="true" class="icon-right-triangle" xmlns="http://www.w3.org/2000/svg" width="6" height="8" viewBox="0 0 6 8">
<path class="_mark icon-right-triangle__shape" fill="#AEB4BA" fill-rule="evenodd" d="M0 0l6 4-6 4z" />
</svg>
</span>
</li>
<li class="breadcrumbs__item">
<span class="breadcrumbs__item-current">
Child Page 2
</span>
</li>
</ul>
</nav>
</div>
<div class="header-base__title">
<h1 class="header-base__title-header">Early Childhood</h1>
</div>
<div class="header-base__intro-text">
Research shows that early years in a child’s life are critical for developing the foundational connections children need to be healthy, capable, social, and successful throughout their academic careers and beyond.
</div>
<div class="header-base__tag-list">
<div class="tag-list">
<div class="tag-list__topics-list">
<div class="topic-list">
<span class="label">
Education
</span>
<span class="label">
Youth Development
</span>
</div>
</div>
</div>
</div>
<figure class="image ">
<picture class="image__picture">
<img class="image__image" loading="lazy" type="image/jpeg" src="holder.js/1200x560" alt="">
</picture>
</figure>
</div>
<div class="header-base header-base--{{ background | default('light') }}">
{% if breadcrumbs %}
<div class="header-base__breadcrumbs">
{% include "partials/navigation/breadcrumbs/breadcrumbs.twig" with {
background: background,
} %}
</div>
{% endif %}
{% if post.date %}
<div class="header-base__date">
<time datetime="{{ post.date | date('Y-m-d') }}">{{ post.date | date('F j, Y') }}</time>
</div>
{% endif %}
<div class="header-base__title">
{% if isListingPage %}
<div class="header-base__title-icon">{% include "partials/post-type-icon/post-type-icon.twig" with {postType: post.postType} %}</div>
{% endif %}
<h1 class="header-base__title-header">{{ post.title }}</h1>
</div>
{% if post.introText %}
<div class="header-base__intro-text">
{{ post.introText }}
</div>
{% endif %}
{% if post.topics or post.focusAreas%}
<div class="header-base__tag-list">
{% include 'partials/tag-list/tag-list.twig' with {
topics: post.topics,
relatedPostLinks: post.focusAreas,
} %}
</div>
{% endif %}
{% if not isLandingPage and post.featuredImage.src%}
{% include 'partials/image/image.twig' with {
image: post.featuredImage,
cropWidth: 880,
cropHeight: 560,
background: background,
} %}
{% endif %}
</div>
{
"site": {
"name": "E3 Alliance"
},
"mainMenu": {
"currentPageInMenu": true,
"items": [
{
"title": "Our Work",
"url": "https://google.com",
"isActive": true,
"isChildActive": false,
"isDescendantActive": true,
"children": [
{
"title": "Interior Page 1",
"url": "http://google.com",
"isActive": false,
"isChildActive": true,
"isDescendantActive": true,
"children": [
{
"title": "Child Page 1",
"url": "http://google.com",
"isActive": false,
"isChildActive": false,
"isDescendantActive": false,
"children": []
},
{
"title": "Child Page 2",
"url": "http://google.com",
"isActive": true,
"isChildActive": false,
"isDescendantActive": false,
"children": []
},
{
"title": "Child Page 3",
"url": "http://google.com",
"isActive": false,
"isChildActive": false,
"isDescendantActive": false,
"children": []
}
]
},
{
"title": "Interior Page 2",
"url": "http://google.com",
"isActive": false,
"isChildActive": false,
"isDescendantActive": false,
"children": [
{
"title": "Child Page 1",
"url": "http://google.com",
"isActive": false,
"isChildActive": false,
"isDescendantActive": false,
"children": []
},
{
"title": "Child Page 2",
"url": "http://google.com",
"isActive": true,
"isChildActive": false,
"isDescendantActive": false,
"children": []
},
{
"title": "Child Page 3",
"url": "http://google.com",
"isActive": false,
"isChildActive": false,
"isDescendantActive": false,
"children": []
}
]
},
{
"title": "Interior Page 3",
"url": "http://google.com",
"isActive": false,
"isChildActive": false,
"isDescendantActive": false,
"children": []
}
]
},
{
"title": "Services",
"url": "http://google.com",
"isActive": false,
"isChildActive": false,
"isDescendantActive": false,
"children": [
{
"title": "Interior Page 1",
"url": "http://google.com",
"isActive": false,
"isChildActive": false,
"isDescendantActive": false,
"children": []
},
{
"title": "Interior Page 2",
"url": "http://google.com",
"isActive": false,
"isChildActive": false,
"isDescendantActive": false,
"children": []
},
{
"title": "Interior Page 3",
"url": "http://google.com",
"isActive": false,
"isChildActive": false,
"isDescendantActive": false,
"children": []
}
]
},
{
"title": "About",
"url": "http://google.com",
"isActive": false,
"isChildActive": false,
"isDescendantActive": false,
"children": [
{
"title": "Interior Page 1 Interior Page 1 Interior Page 1 Interior Page 1",
"url": "http://google.com",
"isActive": false,
"isChildActive": false,
"isDescendantActive": false,
"children": []
},
{
"title": "Interior Page 2",
"url": "http://google.com",
"isActive": false,
"isChildActive": false,
"isDescendantActive": false,
"children": []
},
{
"title": "Interior Page 3",
"url": "http://google.com",
"isActive": false,
"isChildActive": false,
"isDescendantActive": false,
"children": []
},
{
"title": "Interior Page 4",
"url": "http://google.com",
"isActive": false,
"isChildActive": false,
"isDescendantActive": true,
"children": []
},
{
"title": "Interior Page 5",
"url": "http://google.com",
"isActive": false,
"isChildActive": false,
"isDescendantActive": false,
"children": []
},
{
"title": "Interior Page 6",
"url": "http://google.com",
"isActive": false,
"isChildActive": false,
"isDescendantActive": false,
"children": []
},
{
"title": "Interior Page 7",
"url": "http://google.com",
"isActive": false,
"isChildActive": false,
"isDescendantActive": false,
"children": []
}
]
},
{
"title": "Invest",
"url": "http://google.com",
"isActive": false,
"isChildActive": false,
"isDescendantActive": false,
"children": [
{
"title": "Interior Page 1",
"url": "http://google.com",
"isActive": false,
"isChildActive": false,
"isDescendantActive": false,
"children": []
},
{
"title": "Interior Page 2",
"url": "http://google.com",
"isActive": false,
"isChildActive": false,
"isDescendantActive": false,
"children": []
},
{
"title": "Interior Page 3",
"url": "http://google.com",
"isActive": false,
"isChildActive": false,
"isDescendantActive": false,
"children": []
}
]
}
]
},
"breadcrumbs": [
{
"title": "Home",
"url": "#"
},
{
"title": "Our Work",
"url": "#"
},
{
"title": "Interior Page One",
"url": "#"
},
{
"title": "Child Page 2",
"url": "#"
}
],
"post": {
"title": "Early Childhood",
"introText": "Research shows that early years in a child’s life are critical for developing the foundational connections children need to be healthy, capable, social, and successful throughout their academic careers and beyond.",
"topics": [
"Education",
"Youth Development"
],
"isLandingPage": false,
"postType": "focus area",
"featuredImage": {
"src": "holder.js/1200x560",
"altText": "A young child doing classwork at a classroom table with other children",
"caption": ""
}
},
"background": "light"
}
.header-base
&--dark
--titleTextColor white
--introTextColor white
&--light
--titleTextColor jet
--introTextColor grey2
@extends $contentContainer
margin 0 auto
display grid
grid-gap 24px
&__breadcrumbs
display none
+above(1000px)
display flex
&__date
@extends $detail
color #848484
margin-top 0
&__title
display flex
align-items center
&__title-header
@extends $headline1
color var(--titleTextColor)
&__title-icon
margin-right 16px
height 50px
width 40px
&__intro-text
@extends $bodyLarge
color var(--introTextColor)
fluid(font-size, 20px, 24px)
No notes defined.