<div class="basic-header">
<div class="basic-header__wrapper basic-header__wrapper--no-sidebar">
<div class="basic-header__content">
<div class="basic-header__breadcrumbs">
<nav aria-label="Breadcrumb navigation" class="breadcrumbs breadcrumbs--dark">
<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">
Primary 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">
Interior Page One
</span>
</li>
</ul>
</nav>
</div>
<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 class="basic-header">
<div class="basic-header__wrapper {{ (sidebar|default) ? 'basic-header__wrapper--sidebar' : 'basic-header__wrapper--no-sidebar' }}">
{% if sidebar %}
<div class="basic-header__sidebar">
</div>
{% endif %}
<div class="basic-header__content">
{% if breadcrumbs %}
<div class="basic-header__breadcrumbs">
{% include "partials/navigation/breadcrumbs/breadcrumbs.twig" with {
background: 'dark'
}%}
</div>
{% endif %}
<h1 class="basic-header__title">
{{ post.title }}
</h1>
{% if post.introText %}
<div class="basic-header__intro-text">
{{ post.introText }}
</div>
{% endif %}
{% if post.addImage and post.featuredImage %}
<div class="basic-header__featured-image">
{% include 'partials/image/image.twig' with {
image: post.featuredImage,
cropWidth: 880,
cropHeight: 560,
background: 'dark',
} %}
</div>
{% endif %}
</div>
</div>
</div>
{
"mainMenu": {
"currentPageInMenu": true,
"items": [
{
"title": "Primary Page One",
"url": "https://google.com",
"isActive": true,
"isChildActive": false,
"isDescendantActive": true,
"children": []
},
{
"title": "Primary Page Two",
"url": "http://google.com",
"isActive": false,
"isChildActive": false,
"isDescendantActive": false,
"children": []
},
{
"title": "Primary Page Three",
"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": "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": "Primary Page Four",
"url": "http://google.com",
"isActive": false,
"isChildActive": false,
"isDescendantActive": false,
"children": []
},
{
"title": "Primary Page Five",
"url": "http://google.com",
"isActive": false,
"isChildActive": false,
"isDescendantActive": false,
"children": []
},
{
"title": "Primary Page Six",
"url": "http://google.com",
"isActive": false,
"isChildActive": false,
"isDescendantActive": false,
"children": []
}
]
},
"breadcrumbs": [
{
"title": "Home",
"url": "#"
},
{
"title": "Primary Page One",
"url": "#"
},
{
"title": "Interior Page One",
"url": "#"
}
],
"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>",
"featuredImage": {
"src": "https://placeimg.com/880/560/nature",
"altText": "nature, in its natural habitat",
"caption": "nature, in its natural habitat"
}
}
}
breakpoint = 1000px
.basic-header
background charcoalLight
fluid(padding-bottom, 64px, 80px)
fluid(padding-top, 64px, 80px)
&__wrapper
position relative
&--sidebar
@extends $contentContainer
+above(breakpoint)
display grid
grid-template-columns 320px minmax(0, 1fr)
&--no-sidebar
@extends $contentContainerInterior
&__breadcrumbs
display none
+above(1000px)
display flex
margin-bottom 32px
&__title
@extends $headline1
color white
&__intro-text
@extends $bodyLarge
color gray
margin-bottom 48px
&__featured-image
& .captioned-image__caption
font-size 14px
No notes defined.