<section class="testimonials" data-module="testimonials" aria-labelledby="testimonialsHeading">
<div class="container">
<h2 class="testimonials__heading" id="testimonialsHeading">
Testimonial Heading
</h2>
<div class="testimonials__copy rtf">
Ea enim magna sunt ad id ad minim ex qui ex aliqua sint ex. Sint sit ipsum reprehenderit enim id consectetur ex consequat aute aliquip. Nostrud non proident Lorem sint nulla mollit laboris cupidatat excepteur. Esse magna eiusmod mollit est laborum sit velit laboris exercitation do.
</div>
<div class="testimonials__slider">
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
<article class="testimonials-card testimonials-card--with-image">
<img class="testimonials-card__photo" src="https://thispersondoesnotexist.com/image" height="80" width="80" alt="Firstname Lastname" loading="lazy" />
<h3 class="testimonials-card__name">
Firstname Lastname
</h3>
<h4 class="testimonials-card__position">
Position at Company
</h4>
<div class="testimonials-card__quote rtf">
Duis dolor reprehenderit magna dolor ex. Reprehenderit ipsum qui elit aliquip tempor ullamco ad ipsum et enim qui veniam. Laborum commodo sint nulla id non incididunt voluptate irure. Pariatur aliqua mollit occaecat sint ex est magna dolore occaecat.
</div>
</article>
</div>
<div class="swiper-slide">
<article class="testimonials-card">
<h3 class="testimonials-card__name">
Firstname Lastname
</h3>
<h4 class="testimonials-card__position">
Position at Company
</h4>
<div class="testimonials-card__quote rtf">
Duis dolor reprehenderit magna dolor ex. Reprehenderit ipsum qui elit aliquip tempor ullamco ad ipsum et enim qui veniam. Laborum commodo sint nulla id non incididunt voluptate irure. Pariatur aliqua mollit occaecat sint ex est magna dolore occaecat.
</div>
<a href="#" class="link link--primary">
Large Text Link
<svg viewBox="0 0 6 10" class="link__icon link__icon--right">
<use xlink:href="#chevron-right" />
</svg>
</a>
</article>
</div>
<div class="swiper-slide">
<article class="testimonials-card testimonials-card--with-image">
<img class="testimonials-card__photo" src="https://thispersondoesnotexist.com/image" height="80" width="80" alt="Firstname Lastname" loading="lazy" />
<h3 class="testimonials-card__name">
Firstname Lastname
</h3>
<div class="testimonials-card__quote rtf">
Duis dolor reprehenderit magna dolor ex. Reprehenderit ipsum qui elit aliquip tempor ullamco ad ipsum et enim qui veniam. Laborum commodo sint nulla id non incididunt voluptate irure. Pariatur aliqua mollit occaecat sint ex est magna dolore occaecat.
</div>
</article>
</div>
</div>
<div class="testimonials__pagination">
<div class="swiper-button-prev"></div>
<div class="swiper-pagination"></div>
<div class="swiper-button-next"></div>
</div>
</div>
</div>
</div>
</section>
<section class="testimonials" data-module="testimonials" aria-labelledby="testimonialsHeading">
<div class="container">
<h2 class="testimonials__heading" id="testimonialsHeading">
{{heading}}
</h2>
{{#if copy}}
<div class="testimonials__copy rtf">
{{copy}}
</div>
{{/if}}
<div class="testimonials__slider">
<div class="swiper-container">
<div class="swiper-wrapper">
{{#json items}}
{{#each this}}
{{>@c-crd-6-testimonial-card}}
{{/each}}
{{/json}}
</div>
<div class="testimonials__pagination">
<div class="swiper-button-prev"></div>
<div class="swiper-pagination"></div>
<div class="swiper-button-next"></div>
</div>
</div>
</div>
</div>
</section>
{
"heading": "Testimonial Heading",
"copy": "Ea enim magna sunt ad id ad minim ex qui ex aliqua sint ex. Sint sit ipsum reprehenderit enim id consectetur ex consequat aute aliquip. Nostrud non proident Lorem sint nulla mollit laboris cupidatat excepteur. Esse magna eiusmod mollit est laborum sit velit laboris exercitation do.",
"items": [
{
"photo": "https://thispersondoesnotexist.com/image",
"name": "Firstname Lastname",
"position": "Position at Company",
"quote": "Duis dolor reprehenderit magna dolor ex. Reprehenderit ipsum qui elit aliquip tempor ullamco ad ipsum et enim qui veniam. Laborum commodo sint nulla id non incididunt voluptate irure. Pariatur aliqua mollit occaecat sint ex est magna dolore occaecat."
},
{
"name": "Firstname Lastname",
"position": "Position at Company",
"quote": "Duis dolor reprehenderit magna dolor ex. Reprehenderit ipsum qui elit aliquip tempor ullamco ad ipsum et enim qui veniam. Laborum commodo sint nulla id non incididunt voluptate irure. Pariatur aliqua mollit occaecat sint ex est magna dolore occaecat.",
"linkLabel": "Large Text Link"
},
{
"photo": "https://thispersondoesnotexist.com/image",
"name": "Firstname Lastname",
"quote": "Duis dolor reprehenderit magna dolor ex. Reprehenderit ipsum qui elit aliquip tempor ullamco ad ipsum et enim qui veniam. Laborum commodo sint nulla id non incididunt voluptate irure. Pariatur aliqua mollit occaecat sint ex est magna dolore occaecat."
}
]
}
@import '../theme', 'variables';
.testimonials {
overflow: hidden;
}
.testimonials__slider {
margin: 20px auto 0;
max-width: 600px;
.swiper-slide {
display: flex;
justify-content: center;
}
.swiper-wrapper {
.scEmptyPlaceholder {
height: 410px;
width: 100%;
}
}
}
.testimonials__heading {
font-family: $card-font-family;
font-size: 30px;
font-weight: 700;
line-height: 1.13;
margin: 0 0 10px;
}
.testimonials__pagination {
align-items: center;
display: flex;
gap: 8px;
justify-content: center;
margin-top: 20px;
.swiper-pagination-bullet {
background-color: $swiper-pagination-bullet;
border-radius: 0;
height: 4px;
opacity: 1;
transition: width 300ms linear;
width: 12px;
}
.swiper-pagination-bullet + .swiper-pagination-bullet {
margin-left: 4px;
}
.swiper-pagination-bullet-active {
background-color: $swiper-pagination-bullet-active;
width: 15px;
}
.swiper-pagination {
display: flex;
gap: 4px;
height: 4px;
position: static;
}
.swiper-button-prev,
.swiper-button-next {
align-items: center;
border-radius: 999px;
display: flex;
height: $swiper-button-size;
justify-content: center;
margin-top: 0;
position: static;
width: $swiper-button-size;
&:hover {
background-color: $swiper-pagination-bullet;
}
&::after {
color: $swiper-pagination-bullet-active;
font-size: 24px;
transform: translate(1px, -3px);
}
}
.swiper-button-prev {
&::after {
content: '‹';
}
}
.swiper-button-next {
&::after {
content: '›';
}
}
}
$swiper-pagination-bullet: map-get(
$theme-colors,
'primary-light-gray'
) !default;
$swiper-pagination-bullet-active: map-get(
$theme-colors,
'primary-gray'
) !default;
$swiper-button-size: 80px;
$testimonial-font-family: $primary-font !default;
$card-font-family: $primary-font !default;
import { Component } from '@verndale/core'
import Swiper, { Pagination, Navigation } from 'swiper'
Swiper.use([Pagination, Navigation])
class Module extends Component {
setupDefaults() {
this.dom = {
container: this.el.querySelector('.swiper-container'),
pagination: this.el.querySelector('.swiper-pagination'),
next: this.el.querySelector('.swiper-button-next'),
prev: this.el.querySelector('.swiper-button-prev')
}
this.initSlider()
}
addListeners() {}
initSlider() {
this.slider = new Swiper(this.dom.container, {
centeredSlides: true,
spaceBetween: 25,
pagination: {
el: this.dom.pagination
},
navigation: {
nextEl: this.dom.next,
prevEl: this.dom.prev
}
})
}
}
export default Module
Testimonials module allows users to display one or more Testimonial Cards. The module consist of a Heading, Copy and a slider displaying the testimonial cards. When there is more than one Testimonial Object managed, navigation will be displayed.
Each testitmonial card consist of Thumbnail, Full Name, Testimonial Context, Testimonial and a Link
The component will already have a default style/theme set, so it will work out of the box. The testimonial module has a set of variables that may be overriden, or you may choose to just override the actual styles in your project. It is recommended to use the overrides if you can as it will be less code in your project.
Below is the list of variables you can override. You may also find these in the Assets tab under _variables.scss
$swiper-pagination-bullet
$swiper-pagination-bullet-active
$swiper-button-size
$testimonial-font-familyYou always need to set your overrides before the import of you component - for example:
$swiper-pagination-bullet: #fffaaa
$swiper-pagination-bullet-active: #ffffff
$swiper-button-size: 60px;
@import "../../node_modules/@verndale/front-end-components/lib/testimonials/styles";