<section class="efl-hero-banner article-session-index" data-behavior="efl-hero-banner">
<div class="efl-hero-banner__wrapper">
<div class="efl-hero-banner__overlay">
<div class="efl-hero-banner__overlay--wrapper">
<h1><span class="jumpTohide">Session</span></h1>
<div class="efl-hero-banner-copy">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer efficitur velit non mi tincidunt, sit amet blandit ante commodo.
</div>
</div>
</div>
</div>
</section>
No notes defined.
{
"smallimage": "/assets/example-content/hero-banner-2.jpg",
"bigimage": "/assets/example-content/hero-banner-1.jpg",
"hero-type": "article-session-index",
"tag": "SESSIONS",
"title": "Session",
"copy": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer efficitur velit non mi tincidunt, sit amet blandit ante commodo.",
"hide-overlay": false,
"image-hide": true,
"index-page": true
}
export default parentElement => {
const title = parentElement.querySelector('h1');
const copy = parentElement.querySelector('.efl-hero-banner-copy');
const heroClass = parentElement.classList.value.replace(
'efl-hero-banner ',
''
);
const cta = parentElement.querySelector('.cta');
document.body.classList.add(heroClass);
// title style change
if (title && title.innerText.length > 36) {
title.classList.add('h2-style');
} else if (title) {
title.classList.remove('h2-style');
}
// Truncate title text
if (title && title.innerText.length > 75) {
title.innerHTML = `${title.innerText.substr(0, 74)}…`;
}
// Truncate copy text
if (copy && copy.innerText.length > 160) {
copy.innerHTML = `${copy.innerText.substr(0, 159)}…`;
}
if (cta) {
copy.classList.add('cta');
}
};
.efl-hero-banner {
background-color: #144192;
position: relative;
height: 20.5rem;
&__wrapper {
max-width: 174rem;
min-height: 65.7rem;
justify-content: center;
margin: 0 auto;
position: relative;
}
&::before {
content: '';
background: url('./assets/images/hero-banner-left-shape-mob.png') no-repeat
center;
position: absolute;
display: block;
width: 6.9rem;
height: 7.6rem;
z-index: 1;
}
&::after {
content: '';
background: url('./assets/images/hero-banner-right-shape-mob.png') no-repeat
center;
position: absolute;
display: block;
width: 24.5rem;
height: 16.2rem;
right: 0;
bottom: -1.6rem;
z-index: 1;
}
&__overlay {
width: 100%;
max-width: 119.5rem;
position: initial;
top: 0;
left: 0;
right: 0;
display: flex;
margin: 0 auto;
z-index: 2;
&--wrapper {
position: relative;
max-width: 58.1rem;
font-family: $text-font-ef;
color: $white;
margin-top: 3.6rem;
padding: 0 3.2rem;
.category-tag {
font-size: 1.2rem;
line-height: 1.2rem;
letter-spacing: 0.08em;
text-transform: uppercase;
&::after {
content: '';
border-bottom: 0.2rem solid $red;
display: block;
margin-top: 0.8rem;
width: 3.2rem;
}
}
h1 {
font-size: 4.4rem;
line-height: 4.4rem;
letter-spacing: -0.01em;
font-weight: 700;
margin-top: 0.8rem;
&.h2-style {
font-size: 3.2rem;
line-height: 3.6rem;
}
}
.efl-hero-banner-copy {
font-size: 1.8rem;
line-height: 2.4rem;
color: $light-blue;
margin-top: 0.8rem;
@extend .p-medium;
@include text-limit(2);
}
.efl-hero-banner-cta {
display: none;
margin-top: 2.4rem;
.cta--primary {
background-color: $red;
border: none;
max-width: 35rem;
&:hover {
color: $red;
background-color: $white;
}
&:focus-visible,
&:focus {
outline: auto;
outline-color: $white;
outline-style: auto;
}
}
}
}
}
img {
height: 20.5rem;
object-fit: cover;
width: 100%;
}
&.session,
&.sessions,
&.courses {
min-height: 65.7rem;
height: unset;
&::before,
&::after {
display: none;
}
img {
position: absolute;
height: 100%;
z-index: 0;
top: 0;
left: 0;
right: 0;
}
}
&.without-image {
background-color: $white;
&::before {
background: url('./assets/images/hero-banner-no-image-shape-left-mob.png')
no-repeat center;
width: 20.5rem;
height: 6.3rem;
top: 0;
}
&::after {
background: url('./assets/images/hero-banner-no-image-shape-right-mob.png')
no-repeat center;
width: 5.5rem;
height: 8.2rem;
top: 13.5rem;
right: 0;
bottom: initial;
}
}
&.article-session-index {
min-height: 16rem;
height: 16rem;
&::before {
background: url('./assets/images/hero-banner-index-mob-left-zig-zag.png')
no-repeat center;
height: 16rem;
width: 8rem;
background-size: cover;
}
&::after {
background: url('./assets/images/hero-banner-index-mob-right-zig-zag.png')
no-repeat center;
height: 16rem;
bottom: 0;
background-size: cover;
width: 8rem;
}
.efl-hero-banner__wrapper {
min-height: 16rem;
max-width: 100%;
&::before {
content: '';
background-image: url('./assets/images/noise.png');
background-repeat: repeat;
mix-blend-mode: soft-light;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
display: block;
pointer-events: none;
}
}
.efl-hero-banner__overlay--wrapper {
margin: 0 auto;
margin-top: 3.4rem;
text-align: center;
padding: 0 6rem;
.category-tag {
display: none;
}
h1 {
@extend .heading-2;
font-size: 3.2rem;
font-style: normal;
line-height: 3.6rem;
margin-top: 0;
}
.efl-hero-banner-copy {
@extend .p-medium;
font-size: 1.8rem;
line-height: 2.4rem;
}
}
}
/* @media screen and (min-width: 768px) {
height: 43.1rem;
img {
height: 43.1rem;
}
&::before {
background: url('./assets/images/hero-banner-left-shape.png') no-repeat
center;
width: 21rem;
height: 43.1rem;
bottom: -6.1rem;
background-size: contain;
}
&::after {
background: url('./assets/images/hero-banner-right-shape.png') no-repeat
center;
width: 31rem;
height: 47.2rem;
top: 12.7rem;
bottom: initial;
background-size: contain;
}
&.without-image {
&::before {
background: url('./assets/images/hero-banner-no-image-shape-left.png')
no-repeat center;
width: 20.9rem;
height: 51.7rem;
top: 0;
background-size: contain;
}
&::after {
background: url('./assets/images/hero-banner-no-image-shape-right.png')
no-repeat center;
width: 34.2rem;
height: 43.7rem;
top: 0;
bottom: initial;
background-size: contain;
}
}
} */
// For Mobile
@media screen and (min-width: $mq-medium) {
height: 61.1rem;
&::before {
background: url('./assets/images/hero-banner-left-shape.png') no-repeat
center;
width: 39rem;
height: 57.3rem;
bottom: 0;
}
&::after {
background: url('./assets/images/hero-banner-right-shape.png') no-repeat
center;
width: 32.3rem;
height: 47.2rem;
top: 30.5rem;
bottom: initial;
}
img {
height: 61.1rem;
}
&__overlay {
// padding: 0;
&--wrapper {
padding: 0;
.efl-hero-banner-copy {
max-width: 37rem;
@include text-limit(3);
}
margin-top: 12.7rem;
margin-bottom: 22.6rem;
.category-tag {
font-size: 1.6rem;
line-height: 2rem;
letter-spacing: 0.06em;
}
h1 {
font-size: 8.5rem;
line-height: 7.7rem;
&.h2-style {
font-size: 4.2rem;
line-height: 4rem;
}
}
.efl-hero-banner-cta {
.cta--primary {
max-width: 31.1rem;
}
}
}
}
&.without-image {
&::before {
background: url('./assets/images/hero-banner-no-image-shape-left.png')
no-repeat center;
width: 20.9rem;
height: 51.7rem;
top: 0;
}
&::after {
background: url('./assets/images/hero-banner-no-image-shape-right.png')
no-repeat center;
width: 34.2rem;
height: 43.7rem;
top: 0;
bottom: initial;
}
}
&.article-session-index {
min-height: 19.6rem;
height: 19.6rem;
background-color: $crest-blue;
&::before {
height: 19.6rem;
background-size: cover;
width: 9rem;
}
&::after {
height: 19.6rem;
background-size: cover;
top: 0;
width: 10rem;
}
.efl-hero-banner__wrapper {
min-height: 19.6rem;
}
.efl-hero-banner__overlay--wrapper {
max-width: 58.5rem;
margin: 0 auto;
margin-top: 3.4rem;
h1 {
font-size: 4.2rem;
line-height: 4rem;
}
.efl-hero-banner-copy {
max-width: 100%;
}
}
}
}
@media screen and (min-width: $mq-large) {
&.article-session-index {
&::before {
background: url('./assets/images/hero-banner-index-left-zig-zag.png')
no-repeat center;
height: 19.6rem;
background-size: cover;
width: 39rem;
}
&::after {
background: url('./assets/images/hero-banner-index-right-zig-zag.png')
no-repeat center;
height: 19.6rem;
background-size: cover;
top: 0;
width: 38rem;
}
}
}
@media screen and (min-width: 1740px) {
&.session,
&.sessions,
&.courses {
&::before {
content: '';
background-image: url('./assets/images/noise.png');
background-repeat: repeat;
mix-blend-mode: soft-light;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
display: block;
opacity: 0.3;
pointer-events: none;
}
.efl-hero-banner__wrapper {
&::after {
content: '';
background: linear-gradient(
270deg,
#144192 0%,
rgba(0, 67, 151, 0) 100%
);
height: 100%;
width: 12.5rem;
top: 0;
right: -0.2rem;
position: absolute;
}
&::before {
content: '';
background: linear-gradient(
90deg,
#144192 0%,
rgba(0, 67, 151, 0) 100%
);
height: 100%;
width: 12.5rem;
top: 0;
left: -0.2rem;
position: absolute;
}
}
}
}
@media screen and (min-width: $mq-medium) and (max-width: 1200px) {
.efl-hero-banner__overlay--wrapper {
padding: 0 3.2rem;
}
}
}
<section class="efl-hero-banner {{hero-type}}" data-behavior="efl-hero-banner">
<div class="efl-hero-banner__wrapper">
{{#unless image-hide}}
<picture>
<source media="(max-width: 819px)" srcset="{{smallimage}}">
<source media="(min-width: 820px)" srcset="{{bigimage}}">
<img src="{{bigimage}}" alt="">
</picture>
{{/unless}}
{{#unless hide-overlay}}
<div class="efl-hero-banner__overlay">
<div class="efl-hero-banner__overlay--wrapper">
{{#unless index-page}}
<div class="category-tag">{{tag}}</div>
{{/unless}}
<h1><span class="jumpTohide">{{title}}</span></h1>
<div class="efl-hero-banner-copy">
{{copy}}
</div>
{{#unless index-page}}
<div class="efl-hero-banner-cta">
{{render '@cta'}}
</div>
{{/unless}}
</div>
</div>
{{/unless}}
</div>
</section>