I love Space! I love the ease of use, I love the fact that I have total creative freedom. The template is really nice and offers quite a large set of options. It's beautiful and the coding is done quickly and seamlessly.
Testimonials
Add these testimonial style examples that check off all of the best practices for attracting new customers with help from your happy customers.
Testimonials #1
HTML:
<!-- Testimonials Section -->
<div class="gradient-overlay-half-primary-v1">
<div class="bg-img-hero" style="background-image: url(../assets/img/bg/bg2.png);">
<div class="container space-2 space-3--lg">
<div class="w-lg-75 mx-lg-auto">
<!-- SVG Quote -->
<figure class="mx-auto mb-4" style="width: 50px;">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 8 8" style="enable-background:new 0 0 8 8;" xml:space="preserve">
<path fill="#ffffff" d="M3,1.3C2,1.7,1.2,2.7,1.2,3.6c0,0.2,0,0.4,0.1,0.5c0.2-0.2,0.5-0.3,0.9-0.3c0.8,0,1.5,0.6,1.5,1.5c0,0.9-0.7,1.5-1.5,1.5
C1.4,6.9,1,6.6,0.7,6.1C0.4,5.6,0.3,4.9,0.3,4.5c0-1.6,0.8-2.9,2.5-3.7L3,1.3z M7.1,1.3c-1,0.4-1.8,1.4-1.8,2.3
c0,0.2,0,0.4,0.1,0.5c0.2-0.2,0.5-0.3,0.9-0.3c0.8,0,1.5,0.6,1.5,1.5c0,0.9-0.7,1.5-1.5,1.5c-0.7,0-1.1-0.3-1.4-0.8
C4.4,5.6,4.4,4.9,4.4,4.5c0-1.6,0.8-2.9,2.5-3.7L7.1,1.3z"/>
</svg>
</figure>
<!-- End SVG Quote -->
<!-- Slick Carousel - Testimonials -->
<div id="testimonialsNavMain" class="js-slick-carousel u-slick space-2-bottom"
data-infinite="true"
data-autoplay="true"
data-speed="5000"
data-nav-for="#testimonialsNavThumb">
<div class="js-slide">
<blockquote class="h3 text-white text-center">Just wow! The template is really nice and offers quite a large set of options.</blockquote>
</div>
<div class="js-slide">
<blockquote class="h3 text-white text-center">It's beautiful and the coding is done quickly and seamlessly. Thank you!</blockquote>
</div>
<div class="js-slide">
<blockquote class="h3 text-white text-center">Space brings so many benefits to any team that does anything following a process.</blockquote>
</div>
<div class="js-slide">
<blockquote class="h3 text-white text-center">One simple subscription gives you access to all our tools, plus so much more.</blockquote>
</div>
<div class="js-slide">
<blockquote class="h3 text-white text-center">Space is the easiest way for teams to build cool things work—and get results.</blockquote>
</div>
<div class="js-slide">
<blockquote class="h3 text-white text-center">We are incredibly impressed with Space and how well it supports its customers with amazing products and services.</blockquote>
</div>
</div>
<!-- End Slick Carousel - Testimonials -->
</div>
<!-- Slick Carousel - Clients -->
<div id="testimonialsNavThumb" class="js-slick-carousel u-slick u-slick--transform-off-lg u-slick--pagination-classic"
data-infinite="true"
data-autoplay="true"
data-speed="5000"
data-center-mode="true"
data-slides-show="6"
data-is-thumbs="true"
data-focus-on-select="true"
data-nav-for="#testimonialsNavMain"
data-responsive='[{
"breakpoint": 992,
"settings": {
"slidesToShow": 4
}
}, {
"breakpoint": 768,
"settings": {
"slidesToShow": 3
}
}, {
"breakpoint": 576,
"settings": {
"slidesToShow": 3
}
}, {
"breakpoint": 480,
"settings": {
"slidesToShow": 2
}
}]'>
<div class="js-slide pt-5">
<img class="u-clients" src="../assets/img/clients/amazon-white.png" alt="Image Description">
</div>
<div class="js-slide pt-5">
<img class="u-clients" src="../assets/img/clients/google-white.png" alt="Image Description">
</div>
<div class="js-slide pt-5">
<img class="u-clients" src="../assets/img/clients/hubspot-white.png" alt="Image Description">
</div>
<div class="js-slide pt-5">
<img class="u-clients" src="../assets/img/clients/slack-white.png" alt="Image Description">
</div>
<div class="js-slide pt-5">
<img class="u-clients" src="../assets/img/clients/airbnb-white.png" alt="Image Description">
</div>
<div class="js-slide pt-5">
<img class="u-clients" src="../assets/img/clients/spotify-white.png" alt="Image Description">
</div>
</div>
<!-- End Slick Carousel - Clients -->
</div>
</div>
</div>
<!-- End Testimonials Section -->
CSS library:
<link rel="stylesheet" href="assets/vendor/slick-carousel/slick/slick.css">
JS library and initialization:
<!-- JS Implementing Plugins -->
<script src="assets/vendor/slick-carousel/slick/slick.js"></script>
<!-- JS Implementing Plugins -->
<script src="assets/js/components/hs.slick-carousel.js"></script>
<!-- JS Plugins Init. -->
<script>
$(document).on('ready', function () {
// initialization of slick carousel
$.HSCore.components.HSSlickCarousel.init('.js-slick-carousel');
});
</script>
Testimonials #2
We are incredibly impressed with Space and how well it supports its customers with amazing products and services.
Maria Muszynska
Space brings so many benefits to any team that does anything following a process.
Massalha Shady
Apple
The template is really nice and offers quite a large set of options. It's beautiful and the coding is done quickly and seamlessly. Thank you!
Mark McManus
Microsoft
One simple subscription gives you access to all our tools, plus so much more.
Alex Pottorf
Github
HTML:
<div class="container space-2 space-3--lg">
<!-- Slick Carousel -->
<div class="js-slick-carousel u-slick u-slick--gutters-3"
data-fade="true"
data-arrows-classes="u-slick__arrow u-slick__arrow-pos--bottom-minus-7 u-slick__arrow-centered--x"
data-arrow-left-classes="fa fa-long-arrow-alt-left u-slick__arrow-inner ml-offset-5"
data-arrow-right-classes="fa fa-long-arrow-alt-right u-slick__arrow-inner ml-5">
<div class="js-slide">
<!-- Testimonials -->
<div class="w-md-80 w-lg-60 text-center mx-auto">
<div class="mb-4">
<blockquote class="h5 text-secondary">We are incredibly impressed with Space and how well it supports its customers with amazing products and services.</blockquote>
</div>
<img class="u-md-avatar rounded-circle mb-2 mx-auto" src="../assets/img/100x100/img1.jpg" alt="Image Description">
<h4 class="h6 mb-0">Maria Muszynska</h4>
<p class="small">Google</p>
</div>
<!-- End Testimonials -->
</div>
<div class="js-slide">
<!-- Testimonials -->
<div class="w-md-80 w-lg-60 text-center mx-auto">
<div class="mb-4">
<blockquote class="h5 text-secondary">Space brings so many benefits to any team that does anything following a process.</blockquote>
</div>
<img class="u-md-avatar rounded-circle mb-2 mx-auto" src="../assets/img/100x100/img2.jpg" alt="Image Description">
<h4 class="h6 mb-0">Massalha Shady</h4>
<p class="small">Apple</p>
</div>
<!-- End Testimonials -->
</div>
<div class="js-slide">
<!-- Testimonials -->
<div class="w-md-80 w-lg-60 text-center mx-auto">
<div class="mb-4">
<blockquote class="h5 text-secondary">The template is really nice and offers quite a large set of options. It's beautiful and the coding is done quickly and seamlessly. Thank you!</blockquote>
</div>
<img class="u-md-avatar rounded-circle mb-2 mx-auto" src="../assets/img/100x100/img3.jpg" alt="Image Description">
<h4 class="h6 mb-0">Mark McManus</h4>
<p class="small">Microsoft</p>
</div>
<!-- End Testimonials -->
</div>
<div class="js-slide">
<!-- Testimonials -->
<div class="w-md-80 w-lg-60 text-center mx-auto">
<div class="mb-4">
<blockquote class="h5 text-secondary">One simple subscription gives you access to all our tools, plus so much more.</blockquote>
</div>
<img class="u-md-avatar rounded-circle mb-2 mx-auto" src="../assets/img/100x100/img4.jpg" alt="Image Description">
<h4 class="h6 mb-0">Alex Pottorf</h4>
<p class="small">Github</p>
</div>
<!-- End Testimonials -->
</div>
</div>
<!-- End Slick Carousel -->
</div>
CSS library:
<link rel="stylesheet" href="assets/vendor/slick-carousel/slick/slick.css">
JS library and initialization:
<!-- JS Implementing Plugins -->
<script src="assets/vendor/slick-carousel/slick/slick.js"></script>
<!-- JS Implementing Plugins -->
<script src="assets/js/components/hs.slick-carousel.js"></script>
<!-- JS Plugins Init. -->
<script>
$(document).on('ready', function () {
// initialization of slick carousel
$.HSCore.components.HSSlickCarousel.init('.js-slick-carousel');
});
</script>
Testimonials #3
We are incredibly impressed with Space and how well it supports its customers with amazing products and services. One simple subscription gives you access to all our tools, plus so much more.
Mark McManus
Space brings so many benefits to any team that does anything following a process. It is the easiest way for teams to build cool things work—and get results.
Alex Pottorf
The template is really nice and offers quite a large set of options. It's beautiful and the coding is done quickly and seamlessly. I love Space! I love the ease of use, I love the fact that I have total creative freedom. We are incredibly impressed with Space and how well it supports its customers with amazing products and services.
Charlotte Moore
One simple subscription gives you access to all our tools, plus so much more. Space brings so many benefits to any team that does anything following a process. It is the easiest way for teams to build cool things work—and get results.
Ella Brown
Just Wow! Space brings so many benefits to any team that does anything following a process. It is the easiest way for teams to build cool things work—and get results.
Markus Brown
HTML:
<!-- Testimonials -->
<div class="bg-gray-100">
<div class="container space-2 space-3--lg">
<div class="card-mb card-sm-columns card-sm-2-count card-lg-3-count">
<!-- Testimonials -->
<article class="card rounded mb-3">
<div class="card-body p-5">
<blockquote class="text-secondary">I love Space! I love the ease of use, I love the fact that I have total creative freedom. The template is really nice and offers quite a large set of options. It's beautiful and the coding is done quickly and seamlessly.</blockquote>
</div>
<div class="card-footer px-5">
<div class="media">
<img class="u-avatar rounded-circle mr-3" src="../assets/img/100x100/img1.jpg" alt="Image Description">
<div class="media-body">
<h4 class="h6 mb-0">Maria Muzynska</h4>
<ul class="list-inline mb-0">
<li class="list-inline-item text-warning font-size-13">
<span class="fa fa-star"></span>
<span class="fa fa-star"></span>
<span class="fa fa-star"></span>
<span class="fa fa-star"></span>
<span class="fa fa-star"></span>
</li>
</ul>
</div>
</div>
</div>
</article>
<!-- End Testimonials -->
<!-- Testimonials -->
<article class="card rounded mb-3">
<div class="card-body p-5">
<blockquote class="text-secondary">We are incredibly impressed with Space and how well it supports its customers with amazing products and services. One simple subscription gives you access to all our tools, plus so much more.</blockquote>
</div>
<div class="card-footer px-5">
<div class="media">
<img class="u-avatar rounded-circle mr-3" src="../assets/img/100x100/img4.jpg" alt="Image Description">
<div class="media-body">
<h4 class="h6 mb-0">Mark McManus</h4>
<ul class="list-inline mb-0">
<li class="list-inline-item text-warning font-size-13">
<span class="fa fa-star"></span>
<span class="fa fa-star"></span>
<span class="fa fa-star"></span>
<span class="fa fa-star"></span>
<span class="fa fa-star"></span>
</li>
</ul>
</div>
</div>
</div>
</article>
<!-- End Testimonials -->
<!-- Testimonials -->
<article class="card rounded mb-3">
<div class="card-body p-5">
<blockquote class="text-secondary">Space brings so many benefits to any team that does anything following a process. It is the easiest way for teams to build cool things work—and get results.</blockquote>
</div>
<div class="card-footer px-5">
<div class="media">
<img class="u-avatar rounded-circle mr-3" src="../assets/img/100x100/img3.jpg" alt="Image Description">
<div class="media-body">
<h4 class="h6 mb-0">Alex Pottorf</h4>
<ul class="list-inline mb-0">
<li class="list-inline-item text-warning font-size-13">
<span class="fa fa-star"></span>
<span class="fa fa-star"></span>
<span class="fa fa-star"></span>
<span class="fa fa-star"></span>
<span class="fa fa-star"></span>
</li>
</ul>
</div>
</div>
</div>
</article>
<!-- End Testimonials -->
<!-- Testimonials -->
<article class="card rounded mb-3">
<div class="card-body p-5">
<blockquote class="text-secondary">The template is really nice and offers quite a large set of options. It's beautiful and the coding is done quickly and seamlessly. I love Space! I love the ease of use, I love the fact that I have total creative freedom. We are incredibly impressed with Space and how well it supports its customers with amazing products and services.</blockquote>
</div>
<div class="card-footer px-5">
<div class="media">
<img class="u-avatar rounded-circle mr-3" src="../assets/img/100x100/img2.jpg" alt="Image Description">
<div class="media-body">
<h4 class="h6 mb-0">Charlotte Moore</h4>
<ul class="list-inline mb-0">
<li class="list-inline-item text-warning font-size-13">
<span class="fa fa-star"></span>
<span class="fa fa-star"></span>
<span class="fa fa-star"></span>
<span class="fa fa-star"></span>
<span class="fa fa-star"></span>
</li>
</ul>
</div>
</div>
</div>
</article>
<!-- End Testimonials -->
<!-- Testimonials -->
<article class="card rounded mb-3">
<div class="card-body p-5">
<blockquote class="text-secondary">One simple subscription gives you access to all our tools, plus so much more. Space brings so many benefits to any team that does anything following a process. It is the easiest way for teams to build cool things work—and get results.</blockquote>
</div>
<div class="card-footer px-5">
<div class="media">
<img class="u-avatar rounded-circle mr-3" src="../assets/img/100x100/img14.jpg" alt="Image Description">
<div class="media-body">
<h4 class="h6 mb-0">Ella Brown</h4>
<ul class="list-inline mb-0">
<li class="list-inline-item text-warning font-size-13">
<span class="fa fa-star"></span>
<span class="fa fa-star"></span>
<span class="fa fa-star"></span>
<span class="fa fa-star"></span>
<span class="fa fa-star"></span>
</li>
</ul>
</div>
</div>
</div>
</article>
<!-- End Testimonials -->
<!-- Testimonials -->
<article class="card rounded mb-3">
<div class="card-body p-5">
<blockquote class="text-secondary">Just Wow! Space brings so many benefits to any team that does anything following a process. It is the easiest way for teams to build cool things work—and get results.</blockquote>
</div>
<div class="card-footer px-5">
<div class="media">
<img class="u-avatar rounded-circle mr-3" src="../assets/img/100x100/img15.jpg" alt="Image Description">
<div class="media-body">
<h4 class="h6 mb-0">Markus Brown</h4>
<ul class="list-inline mb-0">
<li class="list-inline-item text-warning font-size-13">
<span class="fa fa-star"></span>
<span class="fa fa-star"></span>
<span class="fa fa-star"></span>
<span class="fa fa-star"></span>
<span class="fa fa-star"></span>
</li>
</ul>
</div>
</div>
</div>
</article>
<!-- End Testimonials -->
</div>
</div>
</div>
<!-- End Testimonials -->
Testimonials #4
Maria Muszynska
"The template is really nice and offers quite a large set of options."
Alex Pottorf
"It's beautiful and the coding is done quickly and seamlessly."
HTML:
<div class="row justify-content-lg-between">
<div class="col-md-5 mb-5 mb-md-0">
<!-- Review -->
<div class="media">
<img class="u-avatar rounded-circle mr-3" src="../assets/img/100x100/img1.jpg" alt="Image Description">
<div class="media-body">
<h4 class="h6 mb-0">Maria Muszynska</h4>
<p class="text-muted">"The template is really nice and offers quite a large set of options."</p>
</div>
</div>
<!-- End Review -->
</div>
<div class="col-md-5">
<!-- Review -->
<div class="media">
<img class="u-avatar rounded-circle mr-3" src="../assets/img/100x100/img4.jpg" alt="Image Description">
<div class="media-body">
<h4 class="h6 mb-0">Alex Pottorf</h4>
<p class="text-muted">"It's beautiful and the coding is done quickly and seamlessly."</p>
</div>
</div>
<!-- End Review -->
</div>
</div>
Testimonials #5
Maria Muzynska
"I love Space! I love the ease of use, I love the fact that I have total creative freedom. The template is really nice and offers quite a large set of options. It's beautiful and the coding is done quickly and seamlessly."
Markus Brown
"We are incredibly impressed with Space and how well it supports its customers with amazing products and services. One simple subscription gives you access to all our tools, plus so much more."
HTML:
<!-- Testimonials Section -->
<div class="container space-2 space-3--lg">
<div class="row justify-content-lg-center">
<div class="col-md-6 col-lg-5 mb-7 mb-md-0">
<!-- Testimonials -->
<div class="text-center px-lg-4">
<div class="mb-2">
<img class="u-avatar rounded-circle mx-auto mb-2" src="../assets/img/100x100/img1.jpg" alt="Image Description">
<h4 class="h6">Maria Muzynska</h4>
</div>
<blockquote class="text-secondary mb-0">"I love Space! I love the ease of use, I love the fact that I have total creative freedom. The template is really nice and offers quite a large set of options. It's beautiful and the coding is done quickly and seamlessly."</blockquote>
</div>
<!-- End Testimonials -->
</div>
<div class="col-md-6 col-lg-5">
<!-- Testimonials -->
<div class="text-center px-lg-4">
<div class="mb-2">
<img class="u-avatar rounded-circle mx-auto mb-2" src="../assets/img/100x100/img15.jpg" alt="Image Description">
<h4 class="h6">Markus Brown</h4>
</div>
<blockquote class="text-secondary mb-0">"We are incredibly impressed with Space and how well it supports its customers with amazing products and services. One simple subscription gives you access to all our tools, plus so much more."</blockquote>
</div>
<!-- End Testimonials -->
</div>
</div>
</div>
<!-- End Testimonials Section -->