Testimonial
"We’re on a mission to transform the status quo of home delivery. Offering a convenient, cost-effective and sustainable alternative – in the form of local parcel pickup."
Field
Field Type
Field Name
Instructions
Block Data
tab
Overline
text
overline
Heading Type
select
heading_type
Heading Text
text
heading_text
Background Image
image
background_img
Testimonials
repeater
testimonials
-- Type
select
type
-- Text
text
text
-- Video Placeholder Image
image
video_placeholder_image
If no image selected and video is YouTube or Vimeo, the thumbnail will be retrieved.
-- Video Text
text
video_text
-- Video URL
url
video_url
Must be an embed link to a YouTube or Vimeo video.
Block Meta
tab
ID
text
block_id
Block Classes
text
block_classes
Background Colors
select
background_colors
Width
button_group
background_colors_width
Padding Top
select
padding_top
Padding Bottom
select
padding_bottom
Margin Top
select
margin_top
Margin Bottom
select
margin_bottom
@import "../../resources/scss/util/variables";
@import "../../resources/scss/util/mixins";
@import "../../resources/scss/vendor/bootstrap/vendor/rfs";
.block-testimonial {
position: relative;
overflow: hidden;
.container-fluid {
max-width: 100%;
padding: 0;
@media screen and (max-width: 639px) {
@include padding(rem-calc(0 15));
}
}
.p-relative {
background: linear-gradient(90deg, #263238 -11.64%, rgba(38, 50, 56, 0) 88.36%);
border-radius: 20px;
&.hide {
background: none;
}
}
p {
color: $white;
}
h2 {
color: $white;
margin-bottom: 6rem;
@include margin-bottom(rem-calc(6rem));
max-width: 68%;
@include bp($lg, true) {
max-width: 100%;
}
span {
color: $primary;
}
}
.heading {
color: $white;
@include margin-bottom(rem-calc(6rem));
max-width: 68%;
position: relative;
@include fluid-type(28, 50, 375, $max-container-size);
line-height: 120%;
font-weight: 700;
@include bp($lg, true) {
max-width: 100%;
}
span {
color: $primary;
}
}
.col-lg-4 {
@include margin-bottom(rem-calc(1.25rem));
}
&__wrapper {
background-color: $white;
@include padding(rem-calc(0 2.5rem));
height: auto;
display: flex;
align-items: center;
@include bp($lg, true) {
@include margin-bottom(rem-calc(1.5rem));
}
@include bp($md, true) {
margin-bottom: 0;
}
h3 {
@include padding-left(rem-calc(1.625rem));
border-left: 0.25rem solid $primary;
line-height: 36px;
@include margin(rem-calc(30 0 30));
@media (min-width: 1326px) and (max-width: 1600px) {
font-size: 20px;
line-height: 24px;
}
@include bp($md, true) {
line-height: 100%;
}
}
}
&__slider {
position: relative;
// &::before {
// width: 10%;
// height: 100%;
// content: "";
// position: absolute;
// bottom: 0;
// left: 0;
// background: -webkit-gradient(linear, right top, left top, from(rgba(0, 0, 0, 0)), to(#f2f9fc));
// background: linear-gradient(to left, rgba(0, 0, 0, 0), #000000);
// pointer-events: none;
// z-index: 2;
// }
// &::after {
// width: 10%;
// height: 100%;
// content: "";
// position: absolute;
// bottom: 0;
// right: 0;
// background: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, 0)), to(#f2f9fc));
// background: linear-gradient(to right, rgba(0, 0, 0, 0), #000000);
// pointer-events: none;
// z-index: 2;
// }
.slick-track {
display: flex;
cursor: grab;
}
.slick-slide {
@include margin(rem-calc(0 15 0));
}
.slick-slide > div {
height: 100%;
}
}
&__video-wrapper {
// height: 100%;
height: auto;
position: relative;
overflow: hidden;
&:hover {
.block-testimonial__video-bg {
transform: scale(1.2);
}
}
&::before {
content: "";
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: $secondary-light;
border-radius: 20px;
z-index: 1;
cursor: pointer;
@include bp($md, true) {
object-fit: cover;
}
}
iframe {
border-radius: 20px;
}
p {
position: absolute;
left: 1.063rem;
bottom: 0.875rem;
z-index: 1;
margin: 0;
}
}
&__bg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
@include bp($lg, true) {
object-fit: cover;
}
img {
width: 100%;
height: 100%;
border-radius: 20px;
@include bp($lg, true) {
object-fit: cover;
}
}
}
&__video-wrapper-large {
display: none;
max-width: 80%;
overflow: hidden;
margin-left: auto;
margin-right: auto;
@include bp($lg, true) {
max-width: 80%;
margin-left: auto;
margin-right: auto;
height: auto;
}
@include bp($md, true) {
max-width: 95%;
margin-left: auto;
margin-right: auto;
height: auto;
}
iframe {
min-height: 45rem;
border-radius: 20px;
@include bp($lg, true) {
min-height: 25rem;
}
}
.close {
color: $secondary;
text-align: right;
display: block;
font-size: 2.25rem;
}
}
&__video-bg {
left: 0;
top: 0;
height: 100%;
width: 100%;
z-index: 0;
transition: all 0.2s ease-in-out;
object-fit: cover;
}
&__video-icon {
position: absolute;
left: 0;
top: 39%;
z-index: 1;
right: 0;
margin: auto;
text-align: center;
}
.modal {
display: none;
.background {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.9);
}
.box {
position: fixed;
top: 200px;
left: 0;
right: 0;
margin: 0 auto;
max-width: 700px;
background: #fff;
.close {
position: absolute;
top: -30px;
right: 0px;
color: #fff;
cursor: pointer;
&:hover {
opacity: 0.5;
}
}
}
.responsive-video {
position: relative;
padding-bottom: 52.15%;
@include padding-top(rem-calc(25));
height: 0;
iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: auto;
}
}
}
.swiper {
width: 100%;
height: 100%;
position: relative;
}
.swiper-wrapper {
-webkit-transition-timing-function: linear;
transition-timing-function: linear;
}
}
.block-testimonial__video-wrapper,
.block-testimonial__wrapper {
height: 100% !important;
}
"use strict";
var StatisticsCarousel = class {
constructor() {
(this.blocks = document.querySelectorAll(".block-testimonial")),
this.init();
}
init() {
this.blocks.forEach((e) => {
new Swiper(".block-testimonial .swiper", {
slidesPerView: 1.1,
spaceBetween: 10,
loop: false,
centeredSlides: false,
autoplay: false,
loopedSlides: 2,
grabCursor: true,
breakpoints: {
640: {
slidesPerView: 2.1,
spaceBetween: 10,
},
1326: {
slidesPerView: 3.1,
spaceBetween: 30,
centeredSlides: false,
},
},
});
});
}
};
new StatisticsCarousel();
Page Title
Page Type
Page URL
There are is no readme file with this component.