<div class="landing-page-header">
<div class="landing-page-header__background-pattern"> </div>
<div class="landing-page-header__wrapper">
<div class="landing-page-header__content">
<div class="landing-page-header__content-wrapper">
<div class="landing-page-header__breadcrumbs">
<nav aria-label="Breadcrumb navigation" class="breadcrumbs breadcrumbs--">
<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="landing-page-header__title">
<h1 class="landing-page-header__title-text">Example landing page</h1>
</div>
<div class="landing-page-header__intro-text">
This is an example landing page. It has a featured image, a title, and some components.
</div>
</div>
</div>
<div class="landing-page-header__image-container">
<div class="landing-page-header__featured-image">
<figure class="image ">
<picture class="image__picture">
<img class="image__image" loading="lazy" type="image/jpeg" src="holder.js/840x560" alt="">
</picture>
</figure>
</div>
</div>
</div>
</div>
<div class="landing-page-header">
<div class="landing-page-header__background-pattern"> </div>
<div class="landing-page-header__wrapper">
<div class="landing-page-header__content">
<div class="landing-page-header__content-wrapper">
{% if breadcrumbs %}
<div class="landing-page-header__breadcrumbs">
{% include "partials/navigation/breadcrumbs/breadcrumbs.twig" with {
background: background,
} %}
</div>
{% endif %}
<div class="landing-page-header__title">
<h1 class="landing-page-header__title-text">{{ post.title }}</h1>
</div>
{% if post.introText %}
<div class="landing-page-header__intro-text">
{{ post.introText }}
</div>
{% endif %}
</div>
</div>
{% if post.addImage and post.featuredImage %}
<div class="landing-page-header__image-container">
<div class="landing-page-header__featured-image">
{% include 'partials/image/image.twig' with {
image: post.featuredImage,
background: 'dark',
} %}
</div>
</div>
{% endif %}
</div>
</div>
{
"site": {
"name": "E3 Alliance"
},
"breadcrumbs": [
{
"title": "Home",
"url": "#"
},
{
"title": "Our Work",
"url": "#"
},
{
"title": "Interior Page One",
"url": "#"
},
{
"title": "Child Page 2",
"url": "#"
}
],
"post": {
"title": "Example landing page",
"introText": "This is an example landing page. It has a featured image, a title, and some components.",
"addImage": true,
"featuredImage": {
"src": "holder.js/840x560",
"altText": "alt text example"
}
}
}
breakpoint = 1000px
ultraWideBreakpoint = 1700px
.landing-page-header
--imageBackgroundColor sapphire
margin auto
&__wrapper
position relative
display flex
flex-direction column
+above(breakpoint)
flex-direction row
justify-content flex-end
max-height 560px
&__background-pattern
background-image url('../images/header-pattern-grey.svg')
background-repeat no-repeat
background-position 50% 0
background-size cover
display block
width 100%
height 100%
opacity 1
position absolute
z-index -1
&__content
display flex
flex 1 1 100%
padding-top contentPaddingLarge
padding-bottom contentPaddingLarge
+above(breakpoint)
flex-grow 0
flex-basis 50%
+above(ultraWideBreakpoint)
flex-basis 848px
&__content-wrapper
@extends $contentContainer
margin-left 0
display grid
grid-gap 24px
&__breadcrumbs
display none
+above(1000px)
display flex
&__title
display flex
align-items center
&__title-text
@extends $headline1
color var(--titleTextColor)
&__intro-text
@extends $bodyLarge
color var(--introTextColor)
fluid(font-size, 20px, 24px)
&__image-container
background-color var(--imageBackgroundColor)
display block
width 100%
+above(breakpoint)
display flex
flex 0 1 50%
&__featured-image
height 360px
+above(breakpoint)
height 560px
No notes defined.