Testimonials - Static
Add these testimonial style examples that check off all of the best practices for attracting new customers with help from your happy customers.
Static #1
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!
Maria Muszynska
The theme is well designed with modern tools, we had no issue porting it to our own Webpack build.
Massalha Shady
I love Front! I love the ease of use, I love the fact that I have total creative freedom...
Mark McManus
<!-- Testimonials -->
<div class="bg-light">
<div class="container space-2">
<!-- Slick Carousel -->
<div class="js-slick-carousel u-slick u-slick--equal-height u-slick--gutters-3"
data-slides-show="3"
data-autoplay="true"
data-speed="5000"
data-infinite="true"
data-center-mode="true"
data-pagi-classes="d-lg-none text-center u-slick__pagination mt-7 mb-0"
data-responsive='[{
"breakpoint": 992,
"settings": {
"slidesToShow": 2
}
}, {
"breakpoint": 768,
"settings": {
"slidesToShow": 1
}
}]'>
<div class="js-slide card mb-1">
<!-- Testimonial -->
<div class="card-body p-5">
<div class="mb-auto">
<p class="mb-0">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!</p>
</div>
</div>
<div class="card-footer border-0 pt-0 px-5 pb-5">
<div class="media">
<div class="u-avatar mr-3">
<img class="img-fluid rounded-circle" src="../../assets/img/100x100/img1.jpg" alt="Image Description">
</div>
<div class="media-body">
<h4 class="h6 mb-1">Maria Muszynska</h4>
<ul class="list-inline text-warning small mb-0">
<li class="list-inline-item mx-0">
<span class="fas fa-star"></span>
</li>
<li class="list-inline-item mx-0">
<span class="fas fa-star"></span>
</li>
<li class="list-inline-item mx-0">
<span class="fas fa-star"></span>
</li>
<li class="list-inline-item mx-0">
<span class="fas fa-star"></span>
</li>
<li class="list-inline-item mx-0">
<span class="fas fa-star"></span>
</li>
</ul>
</div>
</div>
</div>
<!-- End Testimonial -->
</div>
<div class="js-slide card mb-1">
<!-- Testimonial -->
<div class="card-body p-5">
<div class="mb-auto">
<p class="mb-0">The theme is well designed with modern tools, we had no issue porting it to our own Webpack build.</p>
</div>
</div>
<div class="card-footer border-0 pt-0 px-5 pb-5">
<div class="media">
<div class="u-avatar mr-3">
<img class="img-fluid rounded-circle" src="../../assets/img/100x100/img2.jpg" alt="Image Description">
</div>
<div class="media-body">
<h4 class="h6 mb-1">Massalha Shady</h4>
<ul class="list-inline text-warning small mb-0">
<li class="list-inline-item mx-0">
<span class="fas fa-star"></span>
</li>
<li class="list-inline-item mx-0">
<span class="fas fa-star"></span>
</li>
<li class="list-inline-item mx-0">
<span class="fas fa-star"></span>
</li>
<li class="list-inline-item mx-0">
<span class="fas fa-star"></span>
</li>
<li class="list-inline-item mx-0">
<span class="fas fa-star"></span>
</li>
</ul>
</div>
</div>
</div>
<!-- End Testimonial -->
</div>
<div class="js-slide card mb-1">
<!-- Testimonial -->
<div class="card-body p-5">
<div class="mb-auto">
<p class="mb-0">I love Front! I love the ease of use, I love the fact that I have total creative freedom...</p>
</div>
</div>
<div class="card-footer border-0 pt-0 px-5 pb-5">
<div class="media">
<div class="u-avatar mr-3">
<img class="img-fluid rounded-circle" src="../../assets/img/100x100/img3.jpg" alt="Image Description">
</div>
<div class="media-body">
<h4 class="h6 mb-1">Mark McManus</h4>
<ul class="list-inline text-warning small mb-0">
<li class="list-inline-item mx-0">
<span class="fas fa-star"></span>
</li>
<li class="list-inline-item mx-0">
<span class="fas fa-star"></span>
</li>
<li class="list-inline-item mx-0">
<span class="fas fa-star"></span>
</li>
<li class="list-inline-item mx-0">
<span class="fas fa-star"></span>
</li>
<li class="list-inline-item mx-0">
<span class="fas fa-star"></span>
</li>
</ul>
</div>
</div>
</div>
<!-- End Testimonial -->
</div>
</div>
<!-- End Slick Carousel -->
</div>
</div>
<!-- End Testimonials -->
<link rel="stylesheet" href="../../assets/vendor/slick-carousel/slick/slick.css">
<!-- 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>
Static #2
Maria Muszynska, Google
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!
<!-- Testimonials -->
<div id="SVGirregularShape2Right" class="svg-preloader position-relative gradient-half-info-v1 z-index-2">
<div class="bg-img-hero-bottom" style="background-image: url(../../assets/img/bg-shapes/bg2.png);">
<div class="container space-top-2 space-top-md-3 space-bottom-4">
<!-- Testimonials -->
<div class="text-center">
<div class="mb-4">
<div class="u-avatar mx-auto mb-3">
<img class="img-fluid rounded-circle" src="../../assets/img/100x100/img1.jpg" alt="Image Description">
</div>
<h4 class="h6 text-white">Maria Muszynska, Google</h4>
</div>
<div class="w-md-80 w-lg-50 text-center mx-md-auto mb-7">
<blockquote class="h3 text-white mb-0">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>
</div>
<!-- End Testimonials -->
</div>
<!-- SVG Quote -->
<figure class="w-25 position-absolute top-0 right-0 left-0 ml-11">
<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 class="fill-white" opacity=".1" 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 -->
<!-- SVG Shape -->
<div class="position-absolute top-0 right-0 left-0 z-index-n1">
<figure class="ie-irregular-shape-2-right">
<img class="js-svg-injector" src="../../assets/svg/components/irregular-shape-2-right.svg" alt="Image Description"
data-parent="#SVGirregularShape2Right">
</figure>
</div>
<!-- End SVG Shape -->
</div>
</div>
<!-- End Testimonials -->
<!-- JS Implementing Plugins -->
<script src="../../assets/vendor/svg-injector/dist/svg-injector.min.js"></script>
<!-- JS Front -->
<script src="../../assets/js/components/hs.svg-injector.js"></script>
<!-- JS Plugins Init. -->
<script>
$(window).on('load', function () {
// initialization of svg injector module
$.HSCore.components.HSSVGIngector.init('.js-svg-injector');
});
</script>
Static #3
I love to have extra money. If I have time I invest by myself, but sometimes you want to have time for your family or friends, especially when you are on holidays. It's sooo great to come back rested, tanned etc and with extra money at your accounts. Good work, guys!
Samantha Wilson
— Durbanville, South Africa
<!-- Testimonials -->
<div class="gradient-half-primary-v1">
<div class="container space-2">
<!-- Avatar -->
<div class="media d-block d-md-flex">
<div class="u-lg-avatar mr-md-7 mb-7 mb-md-0">
<img class="img-fluid rounded-circle" src="../../assets/img/160x160/img2.jpg" alt="Image Description">
</div>
<div class="media-body">
<!-- SVG Quote -->
<figure class="mb-3">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="40px" height="40px"
viewBox="0 0 8 8" style="enable-background:new 0 0 8 8;" xml:space="preserve">
<path class="fill-warning" 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 -->
<blockquote class="lead text-white mb-4">I love to have extra money. If I have time I invest by myself, but sometimes you want to have time for your family or friends, especially when you are on holidays. It's sooo great to come back rested, tanned etc and with extra money at your accounts. Good work, guys!</blockquote>
<h4 class="h5 text-white">Samantha Wilson</h4>
<span class="d-block text-warning pl-3">— Durbanville, South Africa</span>
</div>
</div>
<!-- End Avatar -->
</div>
</div>
<!-- End Testimonials -->
Static #4
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!
Maria Muszynska
Head of IT department at Google
<!-- Testimonials Section -->
<div class="container space-2">
<!-- SVG Quote -->
<figure class="mx-auto text-center mb-3">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="48px" height="48px"
viewBox="0 0 8 8" style="enable-background:new 0 0 8 8;" xml:space="preserve">
<path class="fill-gray-400" 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 -->
<!-- Blockquote -->
<div class="w-md-80 w-lg-50 text-center mx-md-auto mb-6">
<blockquote class="lead text-secondary font-weight-normal">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>
<!-- End Blockquote -->
<!-- Reviewer -->
<div class="d-flex justify-content-center align-items-center w-lg-50 mx-auto">
<div class="u-avatar">
<img class="img-fluid rounded-circle" src="../../assets/img/160x160/img17.png" alt="Image Description">
</div>
<div class="ml-3">
<h4 class="h6 mb-0">Maria Muszynska</h4>
<small class="text-muted">Head of IT department at Google</small>
</div>
</div>
<!-- End Reviewer -->
</div>
<!-- End Testimonials Section -->
Static #5
With Front Pay, you can check out across the web and in apps without having to enter any payment information.
Maria Muszynska
Business ManagerFrom boarding passes to transit and movie tickets, there's pretty much nothing you can't store with Front Pay.
Massalha Shady
CEO at SlackI love Front Pay for cash back, reward points and fraud protection – just like when you're swiping your card.
Mark McManus
Front Pay user
<!-- Testimonials Section -->
<div class="container space-2">
<div class="card-deck d-block d-lg-flex card-lg-gutters-2">
<!-- Testimonials -->
<div class="card bg-transparent border-0">
<div class="card-body p-5">
<ul class="list-inline text-warning small">
<li class="list-inline-item mx-0">
<span class="fas fa-star"></span>
</li>
<li class="list-inline-item mx-0">
<span class="fas fa-star"></span>
</li>
<li class="list-inline-item mx-0">
<span class="fas fa-star"></span>
</li>
<li class="list-inline-item mx-0">
<span class="fas fa-star"></span>
</li>
<li class="list-inline-item mx-0">
<span class="fas fa-star"></span>
</li>
</ul>
<div class="mb-auto">
<p class="mb-0">With Front Pay, you can check out across the web and in apps without having to enter any payment information.</p>
</div>
</div>
<div class="card-footer border-0 bg-transparent pt-0 px-5 pb-5">
<div class="media">
<div class="u-avatar mr-3">
<img class="img-fluid rounded-circle" src="../../assets/img/100x100/img2.jpg" alt="Image Description">
</div>
<div class="media-body">
<h4 class="h6 mb-1">Maria Muszynska</h4>
<small class="d-block text-secondary">Business Manager</small>
</div>
</div>
</div>
</div>
<!-- End Testimonials -->
<!-- Testimonials -->
<div class="card border-0 bg-primary text-white shadow-primary-lg">
<div class="card-body p-5">
<ul class="list-inline text-warning small">
<li class="list-inline-item mx-0">
<span class="fas fa-star"></span>
</li>
<li class="list-inline-item mx-0">
<span class="fas fa-star"></span>
</li>
<li class="list-inline-item mx-0">
<span class="fas fa-star"></span>
</li>
<li class="list-inline-item mx-0">
<span class="fas fa-star"></span>
</li>
<li class="list-inline-item mx-0">
<span class="fas fa-star"></span>
</li>
</ul>
<div class="mb-auto">
<p class="text-white mb-0">From boarding passes to transit and movie tickets, there's pretty much nothing you can't store with Front Pay.</p>
</div>
</div>
<div class="card-footer border-0 bg-primary text-white pt-0 px-5 pb-5">
<div class="media">
<div class="u-avatar mr-3">
<img class="img-fluid rounded-circle" src="../../assets/img/100x100/img11.jpg" alt="Image Description">
</div>
<div class="media-body">
<h4 class="h6 mb-1">Massalha Shady</h4>
<small class="d-block text-light">CEO at Slack</small>
</div>
</div>
</div>
</div>
<!-- End Testimonials -->
<!-- Testimonials -->
<div class="card bg-transparent border-0">
<div class="card-body p-5">
<ul class="list-inline text-warning small">
<li class="list-inline-item mx-0">
<span class="fas fa-star"></span>
</li>
<li class="list-inline-item mx-0">
<span class="fas fa-star"></span>
</li>
<li class="list-inline-item mx-0">
<span class="fas fa-star"></span>
</li>
<li class="list-inline-item mx-0">
<span class="fas fa-star"></span>
</li>
<li class="list-inline-item mx-0">
<span class="fas fa-star"></span>
</li>
</ul>
<div class="mb-auto">
<p class="mb-0">I love Front Pay for cash back, reward points and fraud protection – just like when you're swiping your card.</p>
</div>
</div>
<div class="card-footer border-0 bg-transparent pt-0 px-5 pb-5">
<div class="media">
<div class="u-avatar mr-3">
<img class="img-fluid rounded-circle" src="../../assets/img/100x100/img4.jpg" alt="Image Description">
</div>
<div class="media-body">
<h4 class="h6 mb-1">Mark McManus</h4>
<small class="d-block text-secondary">Front Pay user</small>
</div>
</div>
</div>
</div>
<!-- End Testimonials -->
</div>
</div>
<!-- End Testimonials Section -->
<!-- JS Implementing Plugins -->
<script src="../../assets/vendor/svg-injector/dist/svg-injector.min.js"></script>
<!-- JS Front -->
<script src="../../assets/js/components/hs.svg-injector.js"></script>
<!-- JS Plugins Init. -->
<script>
$(window).on('load', function () {
// initialization of svg injector module
$.HSCore.components.HSSVGIngector.init('.js-svg-injector');
});
</script>
Static #6
With Front Pay, you can check out across the web and in apps without having to enter any payment information.
Maria Muszynska
Business ManagerFrom boarding passes to transit and movie tickets, there's pretty much nothing you can't store with Front Pay.
Massalha Shady
CEO at SlackI love Front Pay for cash back, reward points and fraud protection – just like when you're swiping your card.
Mark McManus
Front Pay user
<!-- Testimonials Section -->
<div class="container space-2">
<!-- Title -->
<div class="w-md-80 w-lg-50 mb-9">
<h2 class="h1 font-weight-medium">Front worklfow is loved by users worldwide</h2>
</div>
<!-- End Title -->
<!-- Testimonials Section -->
<div class="row">
<!-- Testimonials -->
<div class="col-lg-4 mb-5">
<div class="card border-0 shadow-soft h-100">
<div class="card-body p-5">
<ul class="list-inline text-warning">
<li class="list-inline-item mx-0">
<span class="fas fa-star"></span>
</li>
<li class="list-inline-item mx-0">
<span class="fas fa-star"></span>
</li>
<li class="list-inline-item mx-0">
<span class="fas fa-star"></span>
</li>
<li class="list-inline-item mx-0">
<span class="fas fa-star"></span>
</li>
<li class="list-inline-item mx-0">
<span class="fas fa-star"></span>
</li>
</ul>
<div class="mb-auto">
<p class="text-dark mb-0">With Front Pay, you can check out across the web and in apps without having to enter any payment information.</p>
</div>
</div>
<div class="card-footer border-0 bg-transparent pt-0 px-5 pb-5">
<div class="media">
<div class="u-avatar mr-3">
<img class="img-fluid rounded-circle" src="../../assets/img/100x100/img2.jpg" alt="Image Description">
</div>
<div class="media-body">
<h4 class="h6 mb-0">Maria Muszynska</h4>
<small class="d-block text-secondary">Business Manager</small>
</div>
</div>
</div>
</div>
</div>
<!-- End Testimonials -->
<!-- Testimonials -->
<div class="col-lg-4 mb-5">
<div class="card border-0 shadow-soft h-100">
<div class="card-body p-5">
<ul class="list-inline text-warning">
<li class="list-inline-item mx-0">
<span class="fas fa-star"></span>
</li>
<li class="list-inline-item mx-0">
<span class="fas fa-star"></span>
</li>
<li class="list-inline-item mx-0">
<span class="fas fa-star"></span>
</li>
<li class="list-inline-item mx-0">
<span class="fas fa-star"></span>
</li>
<li class="list-inline-item mx-0">
<span class="fas fa-star"></span>
</li>
</ul>
<div class="mb-auto">
<p class="text-dark mb-0">From boarding passes to transit and movie tickets, there's pretty much nothing you can't store with Front Pay.</p>
</div>
</div>
<div class="card-footer border-0 bg-transparent pt-0 px-5 pb-5">
<div class="media">
<div class="u-avatar mr-3">
<img class="img-fluid rounded-circle" src="../../assets/img/100x100/img11.jpg" alt="Image Description">
</div>
<div class="media-body">
<h4 class="h6 mb-0">Massalha Shady</h4>
<small class="d-block text-secondary">CEO at Slack</small>
</div>
</div>
</div>
</div>
</div>
<!-- End Testimonials -->
<!-- Testimonials -->
<div class="col-lg-4 mb-5">
<div class="card border-0 shadow-soft h-100">
<div class="card-body p-5">
<ul class="list-inline text-warning">
<li class="list-inline-item mx-0">
<span class="fas fa-star"></span>
</li>
<li class="list-inline-item mx-0">
<span class="fas fa-star"></span>
</li>
<li class="list-inline-item mx-0">
<span class="fas fa-star"></span>
</li>
<li class="list-inline-item mx-0">
<span class="fas fa-star"></span>
</li>
<li class="list-inline-item mx-0">
<span class="fas fa-star"></span>
</li>
</ul>
<div class="mb-auto">
<p class="text-dark mb-0">I love Front Pay for cash back, reward points and fraud protection – just like when you're swiping your card.</p>
</div>
</div>
<div class="card-footer border-0 bg-transparent pt-0 px-5 pb-5">
<div class="media">
<div class="u-avatar mr-3">
<img class="img-fluid rounded-circle" src="../../assets/img/100x100/img4.jpg" alt="Image Description">
</div>
<div class="media-body">
<h4 class="h6 mb-0">Mark McManus</h4>
<small class="d-block text-secondary">Front Pay user</small>
</div>
</div>
</div>
</div>
</div>
<!-- End Testimonials -->
</div>
</div>
<!-- End Testimonials Section -->