Case Study Hero
View example
Sustainable business
Sustainable business
through action
Achieve your sustainability goals with our expert consultancy, award-winning training, and innovative measurement solutions
Field
Field Type
Field Name
Instructions
Block Data
tab
Heading Type
select
heading_type
Heading Text
textarea
heading_text
Content
wysiwyg
content
Button Type
select
button_button_type
Button Color
select
button_button_color
Button Link
link
button_button_link
Case Studies
post_object
case_studies
@import "../../resources/scss/util/variables";
@import "../../resources/scss/util/mixins";
@keyframes becomeActiveBackground {
0% {
background: transparent;
}
50% {
background: transparent;
}
100% {
background: var(--white);
}
}
@keyframes becomeActiveBackgroundCustom {
0% {
background: transparent;
}
50% {
background: transparent;
}
100% {
background: rgba(243, 243, 245, 1);
}
}
@keyframes becomeActiveOpacity {
0% {
opacity: 0;
}
50% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.block-case-study-hero {
padding: 4rem 0;
min-height: 90vh;
border-bottom-right-radius: 40px;
border-bottom-left-radius: 40px;
@include bp($md, true) {
height: rem-calc(800);
border-radius: 0;
}
.swiper {
overflow: visible;
}
.swiper-wrapper {
@include bp($sm) {
height: 82%;
}
@include bp($md) {
iframe.behave-as-bg {
width: 150%;
}
}
@include bp($lg) {
iframe.behave-as-bg {
width: 125%;
}
}
@include bp($xl) {
height: 100%;
}
}
.swiper-slide-inner {
width: 100%;
height: 100%;
position: relative;
overflow: hidden;
border-bottom-right-radius: 40px;
border-bottom-left-radius: 40px;
}
.swiper-background-images {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
border-bottom-right-radius: 40px;
border-bottom-left-radius: 40px;
img {
border-bottom-right-radius: 40px;
border-bottom-left-radius: 40px;
}
@include bp($sm, true) {
height: rem-calc(800);
border-radius: 0;
}
&:after {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: radial-gradient(ellipse at 90% 10%, transparent 0%, transparent 15%,rgba(56, 53, 81, 1) 55%);
z-index: 1;
border-bottom-right-radius: 40px;
border-bottom-left-radius: 40px;
@include bp($md, true) {
background: linear-gradient(to bottom, rgba(56, 53, 81, 1) 20%, transparent 50%, rgba(56, 53, 81, 1) 80%);
}
}
}
.heading-wrapper {
h1, h2 {
font-size: clamp(rem-calc(30), 5vw, rem-calc(64));
span {
color: var(--secondary);
}
}
}
.button-wrapper {
.btn {
color: var(--white);
text-decoration: none;
}
}
&__navigation-container{
display: flex;
align-items: flex-end;
gap: 8px;
justify-content: flex-end;
bottom: -5rem;
left: 0;
z-index: 100;
flex-direction: row-reverse;
position: absolute;
@include bp(768px) {
left: unset;
justify-content: flex-end;
bottom: rem-calc(200);
right: 50%;
justify-content: flex-start;
margin-top: 2rem;
}
@include bp(1024px) {
right: 33%;
}
@include bp(1200px) {
right: 33%;
}
@include bp(1400px){
right: 30%;
}
@include bp(1800px){
right: 25%;
}
}
&__navigation-btn{
width: 44px;
height: 44px;
border-radius: 100px;
border: solid 1px var(--white);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: .3s ease-in-out;
background-position: center;
background-repeat: no-repeat;
background-size: 24px;
&-prev{
background-image: url("data:image/svg+xml,%3Csvg width='27' height='18' viewBox='0 0 27 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7.16895 16.7598L0.768945 8.75977L7.16895 0.759765' stroke='%23ffffff'/%3E%3Cpath d='M0.768555 8.75977L26.7686 8.75977' stroke='%23ffffff'/%3E%3C/svg%3E%0A");
}
&-next{
background-image: url("data:image/svg+xml,%3Csvg width='28' height='18' viewBox='0 0 28 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20.3682 16.7598L26.7682 8.75977L20.3682 0.759765' stroke='%23ffffff'/%3E%3Cpath d='M26.7686 8.75977L0.768555 8.75977' stroke='%23ffffff'/%3E%3C/svg%3E%0A");
}
&:hover, &:focus{
background-color: var(--text-color);
&.block-stats-slider__navigation-btn-prev{
background-image: url("data:image/svg+xml,%3Csvg width='27' height='18' viewBox='0 0 27 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7.16895 16.7598L0.768945 8.75977L7.16895 0.759765' stroke='%23F1A119'/%3E%3Cpath d='M0.768555 8.75977L26.7686 8.75977' stroke='%23F1A119'/%3E%3C/svg%3E%0A") ;
}
&.block-stats-slider__navigation-btn-next{
background-image: url("data:image/svg+xml,%3Csvg width='28' height='18' viewBox='0 0 28 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20.3682 16.7598L26.7682 8.75977L20.3682 0.759765' stroke='%23F1A119'/%3E%3Cpath d='M26.7686 8.75977L0.768555 8.75977' stroke='%23F1A119'/%3E%3C/svg%3E%0A") ;
}
}
}
&__wrapper {
position: relative;
z-index: 2;
padding-top: 2rem;
padding-bottom: 2rem;
color: var(--white);
pointer-events: none;
.btn {
pointer-events: auto;
}
@include bp($md) {
padding-top: 7rem;
padding-bottom: 7rem;
}
@media (min-width: 768px) and (max-width: 1023px) {
padding-bottom: 11rem;
}
@include bp($lg) {
padding-bottom: 11rem;
}
.content-wrapper {
max-width: rem-calc(630);
@media (min-width: 768px) and (max-width: 1023px) {
max-width: 50%;
}
p {
font-size: clamp(rem-calc(14), 2vw, rem-calc(24));
line-height: 1.5;
color: var(--white);
}
}
}
.swiper-logo-cards {
@include bp($md) {
position: absolute;
bottom: 1rem;
left: 1rem;
right: 1rem;
}
.case-study-hero-slide {
background: transparent;
border-radius: 40px;
padding: 0.5rem;
height: rem-calc(400);
display: flex;
flex-direction: column;
justify-content: space-between;
text-align: left;
text-decoration: none;
transition: .3s ease-in-out;
@include bp($md, true) {
height: rem-calc(300);
}
.h2 {
font-family: 'Montserrat', sans-serif;
font-size: clamp(rem-calc(20), 2vw, rem-calc(28));
font-weight: 600;
line-height: 1.2;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
direction: ltr;
}
.slide-logos {
margin-top: auto;
position: relative;
height: 9rem;
max-height: 9rem;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
@include bp($md, true) {
height: rem-calc(120);
max-height: rem-calc(120);
}
.logo,
.logo-dark {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
transition: opacity 1s ease-in-out;
}
.logo--dark {
opacity: 0;
}
&:before {
content: "";
position: absolute;
height: 1px;
width: calc(100% + 46px);
background-color: rgba(255, 255, 255, 0.3);
top: 0;
left: 50%;
transform: translateX(-50%);
opacity: 1;
transition: opacity 1s ease-in-out;
}
}
&-hidden {
transition: 1s ease-in-out;
}
}
.swiper-slide {
pointer-events: none;
}
.swiper-slide .case-study-hero-slide-hidden {
opacity: 0;
padding: 1rem;
transition: .3s ease-in-out;
&:hover .btn {
color: var(--secondary);
}
}
.swiper-slide.swiper-slide-active {
pointer-events: auto;
.case-study-hero-slide {
animation: becomeActiveBackground 1s ease-in-out forwards;
background: var(--white);
&-hidden {
pointer-events: auto;
opacity: 1;
animation: becomeActiveOpacity 1s ease-in-out forwards;
}
}
.slide-logos {
border: 1px solid rgba(56, 53, 81, 0.3);
background: rgba(243, 243, 245, 1);
border-radius: 40px;
animation: becomeActiveBackgroundCustom 1s ease-in-out forwards;
.logo {
opacity: 0;
}
.logo--dark {
opacity: 1;
animation: becomeActiveOpacity 1s ease-in-out forwards;
}
&:before {
opacity: 0;
}
}
@include bp(1200px) {
min-width: calc((100vw - 150px) / 3);
}
@include bp(1400px) {
min-width: calc(100vw / 4);
}
@include bp(1800px) {
min-width: calc(100vw / 5);
}
}
}
.pills {
align-items: flex-end;
}
}
import VideoBackground from "../../resources/js/helpers/VideoBackground";
class CaseStudyHero {
block;
videos = [];
videosLoading = false;
constructor(block) {
this.block = block;
this.init();
}
init() {
this.videoSwiperElem = this.block.querySelector('.swiper-background-images');
const videoSwiperSlides = this.videoSwiperElem.querySelectorAll('.swiper-slide');
document.addEventListener('mousemove', () => {
if ( this.videosLoading ) return;
this.videosLoading = true;
videoSwiperSlides.forEach( (video, index) => {
const type = video.getAttribute('data-type');
let VideoBackgroundClass = new VideoBackground( video, type );
VideoBackgroundClass.load();
if ( index === 0 ) {
VideoBackgroundClass.play();
}
this.videos.push( VideoBackgroundClass );
});
}, {
once: true,
passive: true
})
// do the same but for touchstart
document.addEventListener('touchstart', () => {
if ( this.videosLoading ) return;
this.videosLoading = true;
videoSwiperSlides.forEach( (video, index) => {
const type = video.getAttribute('data-type');
let VideoBackgroundClass = new VideoBackground( video, type );
VideoBackgroundClass.load();
if ( index === 0 ) {
VideoBackgroundClass.play();
}
this.videos.push( VideoBackgroundClass );
});
}, {
once: true,
passive: true
})
this.videoSwiper = new Swiper(this.videoSwiperElem, {
slidesPerView: 1,
crossFade: true,
spaceBetween: 0,
effect: 'fade',
}),
this.videoSwiper.on( 'slideChangeTransitionStart', () => {
this.videos.forEach( (video, index) => this.videos[index].pause() );
});
this.videoSwiper.on( 'slideChangeTransitionEnd', () => {
this.videos[this.videoSwiper.realIndex].play();
});
this.swiperElem = this.block.querySelector('.swiper-logo-cards');
this.swiper = new Swiper(this.swiperElem, {
slidesPerView: 1,
spaceBetween: 30,
speed: 1000,
loop: true,
loopedSlides: 2,
breakpoints: {
768: {
slidesPerView: 2,
spaceBetween: 30,
loop: true,
loopedSlides: 2,
},
1024: {
slidesPerView: 3,
spaceBetween: 30,
loop: true,
loopedSlides: 3,
},
1200: {
slidesPerView: 4,
spaceBetween: 30,
loop: true,
loopedSlides: 4,
},
1400: {
slidesPerView: 5,
spaceBetween: 30,
loop: true,
loopedSlides: 6,
}
},
navigation: {
nextEl: '.block-case-study-hero__navigation-btn-next',
prevEl: '.block-case-study-hero__navigation-btn-prev',
},
});
this.swiper.on( 'slideChange', () => {
this.videoSwiper.slideTo( this.swiper.realIndex );
});
}
}
document.addEventListener('DOMContentLoaded', () => {
document.querySelectorAll('.block-case-study-hero').forEach((block) => {
new CaseStudyHero(block);
})
});
{
"$schema": "https://schemas.wp.org/trunk/block.json",
"apiVersion": 2,
"name": "strategiq/case-study-hero",
"title": "Case Study Hero",
"description": "Example block to be used as a template",
"category": "strategiq",
"icon": "strategiq",
"acf": {
"mode": "preview",
"renderTemplate": "block-case-study-hero.php"
},
"supports": {
"anchor": true,
"align": false,
"color": {
"background": false,
"text": false,
"gradients": false
}
},
"example": {
"attributes": {
"mode": "preview",
"data": {
"heading_type": "h2",
"heading_text": "Example - Case Study Hero",
"content": "This is some example content to represent what the content will look like"
}
}
},
"style": [
"file:../../assets/css/case-study-hero/block-case-study-hero.css",
"swiper"
],
"viewScript": ["case-study-hero", "swiper", "vimeo-player"]
}
Page Title
Page Type
Page URL
There are is no readme file with this component.