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:

              
                <div class="u-bg-img-hero-bottom" style="background-image: url(../assets/img/1920x800/img11.jpg);">
                  <div class="container">
                    <div class="row justify-content-md-end">
                      <div class="col-md-6 col-lg-5 col-xl-4 u-space-3-top mb-offset-9">
                        <div class="bg-primary rounded shadow-primary-sm p-7">
                          <div class="js-slick-carousel u-slick"
                               data-pagi-classes="text-right u-slick__pagination u-slick__pagination--white mt-2 mb-0">
                            <div class="js-slide">
                              <figure class="mb-4" style="width: 35px;">
                                <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="u-fill-white" 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>

                              <blockquote class="h6 text-white font-weight-normal text-lh-md mb-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!</blockquote>

                              <div class="media">
                                <div class="d-flex mr-3">
                                  <img class="img-fluid u-avatar rounded-circle" src="../assets/img/100x100/img1.jpg" alt="Image Description">
                                </div>
                                <div class="media-body">
                                  <h4 class="h6 text-white mb-0">Maria Muszynska</h4>
                                  <p class="small u-text-light">Google</p>
                                </div>
                              </div>
                            </div>

                            <div class="js-slide">
                              <figure class="mb-4" style="width: 35px;">
                                <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="u-fill-white" 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>

                              <blockquote class="h6 text-white font-weight-normal text-lh-md mb-4">If you can design one thing you can design everything with Front. Just believe it.</blockquote>

                              <div class="media">
                                <div class="d-flex mr-3">
                                  <img class="img-fluid u-avatar rounded-circle" src="../assets/img/100x100/img3.jpg" alt="Image Description">
                                </div>
                                <div class="media-body">
                                  <h4 class="h6 text-white mb-0">Alex Pottorf</h4>
                                  <p class="small u-text-light">Github</p>
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </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 #2

HTML:

              
                <div class="u-bg-img-hero" style="background-image: url(../assets/img/1920x800/img12.jpg);">
                  <div class="container">
                    <div class="row">
                      <div class="col-md-6 col-lg-5 col-xl-4 u-space-2">
                        <div class="bg-white rounded shadow-sm p-7">
                          <div class="js-slick-carousel u-slick"
                               data-pagi-classes="text-right u-slick__pagination mt-2 mb-0">
                            <div class="js-slide">
                              <figure class="mb-4" style="width: 35px;">
                                <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="u-fill-primary" 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>

                              <blockquote class="h6 font-weight-normal text-lh-md mb-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!</blockquote>

                              <div class="media">
                                <div class="d-flex mr-3">
                                  <img class="img-fluid u-avatar rounded-circle" src="../assets/img/100x100/img1.jpg" alt="Image Description">
                                </div>
                                <div class="media-body">
                                  <h4 class="h6 mb-0">Maria Muszynska</h4>
                                  <p class="small">Google</p>
                                </div>
                              </div>
                            </div>

                            <div class="js-slide">
                              <figure class="mb-4" style="width: 35px;">
                                <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="u-fill-primary" 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>

                              <blockquote class="h6 font-weight-normal text-lh-md mb-4">If you can design one thing you can design everything with Front. Just believe it.</blockquote>

                              <div class="media">
                                <div class="d-flex mr-3">
                                  <img class="img-fluid u-avatar rounded-circle" src="../assets/img/100x100/img3.jpg" alt="Image Description">
                                </div>
                                <div class="media-body">
                                  <h4 class="h6 mb-0">Alex Pottorf</h4>
                                  <p class="small">Github</p>
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </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

HTML:

              
                <div class="w-50 mx-auto">
                  <div class="js-slick-carousel u-slick"
                       data-adaptive-height="true"
                       data-autoplay="true"
                       data-speed="5000"
                       data-vertical="true"
                       data-vertical-swiping="true">
                    <div class="js-slide mb-1">
                      <div class="media align-items-center bg-white rounded-top-left-pill rounded-right-pill py-3 px-4 mb-1">
                        <div class="d-flex mr-3">
                          <img class="img-fluid u-avatar rounded-circle" src="../assets/img/100x100/img3.jpg" alt="Image Description">
                        </div>
                        <div class="media-body">
                          <h2 class="h6 mb-0">James Austin</h2>
                          <p class="small mb-0">Slack Inc.</p>
                        </div>
                      </div>

                      <div class="bg-primary text-white rounded-bottom-left-pill rounded-right-pill p-4">
                        <div class="media">
                          <div class="d-flex mr-3">
                            <figure style="width: 25px;">
                              <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="u-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>
                          </div>
                          <div class="media-body">
                            <blockquote class="mb-0">The template is really nice and offers quite a large set of options. Thank you!</blockquote>
                          </div>
                        </div>
                      </div>
                    </div>

                    <div class="js-slide mb-1">
                      <div class="media align-items-center bg-white rounded-top-left-pill rounded-right-pill py-3 px-4 mb-1">
                        <div class="d-flex mr-3">
                          <img class="img-fluid u-avatar rounded-circle" src="../assets/img/100x100/img1.jpg" alt="Image Description">
                        </div>
                        <div class="media-body">
                          <h2 class="h6 mb-0">Charlotte Moore</h2>
                          <p class="small mb-0">Google Inc.</p>
                        </div>
                      </div>

                      <div class="bg-primary text-white rounded-bottom-left-pill rounded-right-pill p-4">
                        <div class="media">
                          <div class="d-flex mr-3">
                            <figure style="width: 25px;">
                              <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="u-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>
                          </div>
                          <div class="media-body">
                            <blockquote class="mb-0">If you can design one thing you can design everything. Just believe it.</blockquote>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </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 #4

HTML:

              
                <div class="u-bg-img-hero" style="background-image: url(../assets/img/bg-shapes/bg3.png);">
                  <div class="container u-space-3">
                    <figure class="mb-5 mx-auto" style="width: 70px;">
                      <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="u-fill-primary" 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>

                    <div id="testimonialsNavMain" class="js-slick-carousel u-slick u-slick--transform-off mb-4"
                         data-infinite="true"
                         data-autoplay="true"
                         data-speed="5000"
                         data-fade="true"
                         data-nav-for="#testimonialsNavPaginationV4">
                      <div class="js-slide">
                        <div class="w-md-80 w-lg-60 text-center mx-auto">
                          <blockquote class="h3 mb-5">The template is really nice and offers quite a large set of options. Thank you!</blockquote>
                          <h4 class="h6 text-muted">Maria Muszynska, Google</h4>
                        </div>
                      </div>

                      <div class="js-slide">
                        <div class="w-md-80 w-lg-60 text-center mx-auto">
                          <blockquote class="h3 mb-5">It's beautiful and the coding is done quickly and seamlessly. Keep it up!</blockquote>
                          <h4 class="h6 text-muted">James Austin, Slack</h4>
                        </div>
                      </div>

                      <div class="js-slide">
                        <div class="w-md-80 w-lg-60 text-center mx-auto">
                          <blockquote class="h3 mb-5">I love Front! I love the ease of use, I love the fact that I have total creative freedom...</blockquote>
                          <h4 class="h6 text-muted">Charlotte Moore, Amazon</h4>
                        </div>
                      </div>
                    </div>

                    <div id="testimonialsNavPaginationV4" class="js-slick-carousel u-slick u-slick--pagination-modern u-slick--transform-off mx-auto"
                         data-infinite="true"
                         data-autoplay="true"
                         data-speed="5000"
                         data-focus-on-select="true"
                         data-center-mode="true"
                         data-slides-show="3"
                         data-is-thumbs="true"
                         data-nav-for="#testimonialsNavMain">
                      <div class="js-slide">
                        <img class="img-fluid u-avatar rounded-circle mx-auto" src="../assets/img/100x100/img1.jpg" alt="Image Description">
                      </div>

                      <div class="js-slide">
                        <img class="img-fluid u-avatar rounded-circle mx-auto" src="../assets/img/100x100/img3.jpg" alt="Image Description">
                      </div>

                      <div class="js-slide">
                        <img class="img-fluid u-avatar rounded-circle mx-auto" src="../assets/img/100x100/img2.jpg" alt="Image Description">
                      </div>
                    </div>
                  </div>
                </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 #5

HTML:

              
                <div class="u-gradient-half-primary-v1">
                  <div class="w-50 p-5 mx-auto">
                    <figure class="mb-5 mx-auto" style="width: 45px;">
                      <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="u-fill-white" 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>

                    <div id="testimonialsNavMainV5" class="js-slick-carousel u-slick mb-4"
                         data-infinite="true"
                         data-autoplay="true"
                         data-speed="5000"
                         data-fade="true"
                         data-nav-for="#testimonialsNavPaginationV5">
                      <div class="js-slide">
                        <div class="w-md-80 w-lg-60 text-center mx-auto">
                          <blockquote class="h5 text-white font-weight-normal mb-4">The template is really nice and offers quite a large set of options. Thank you!</blockquote>
                          <h1 class="h6 u-text-light">Maria Muszynska, Google</h1>
                        </div>
                      </div>

                      <div class="js-slide">
                        <div class="w-md-80 w-lg-60 text-center mx-auto">
                          <blockquote class="h5 text-white font-weight-normal mb-4">It's beautiful and the coding is done quickly and seamlessly. Keep it up!</blockquote>
                          <h2 class="h6 u-text-light">James Austin, Slack</h2>
                        </div>
                      </div>

                      <div class="js-slide">
                        <div class="w-md-80 w-lg-60 text-center mx-auto">
                          <blockquote class="h5 text-white font-weight-normal mb-4">I love Front! I love the ease of use, I love the fact that I have total creative freedom...</blockquote>
                          <h3 class="h6 u-text-light">Charlotte Moore, Amazon</h3>
                        </div>
                      </div>
                    </div>

                    <div id="testimonialsNavPaginationV5" class="js-slick-carousel u-slick u-slick--transform-off u-slick--pagination-modern mx-auto"
                         data-infinite="true"
                         data-autoplay="true"
                         data-speed="5000"
                         data-center-mode="true"
                         data-slides-show="3"
                         data-is-thumbs="true"
                         data-focus-on-select="true"
                         data-nav-for="#testimonialsNavMainV5">
                      <div class="js-slide">
                        <img class="img-fluid u-avatar rounded-circle mx-auto" src="../assets/img/100x100/img1.jpg" alt="Image Description">
                      </div>

                      <div class="js-slide">
                        <img class="img-fluid u-avatar rounded-circle mx-auto" src="../assets/img/100x100/img3.jpg" alt="Image Description">
                      </div>

                      <div class="js-slide">
                        <img class="img-fluid u-avatar rounded-circle mx-auto" src="../assets/img/100x100/img2.jpg" alt="Image Description">
                      </div>
                    </div>
                  </div>
                </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 #6

HTML:

              
                <div class="u-bg-light-blue-50">
                  <div class="container u-space-3">
                    <div class="js-slick-carousel u-slick u-slick-zoom u-slick--gutters-3"
                         data-slides-show="3"
                         data-center-mode="true"
                         data-autoplay="true"
                         data-speed="5000"
                         data-pagi-classes="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 my-4">
                        <div class="u-slick-zoom__slide text-center">
                          <div class="bg-white shadow-sm rounded p-7">
                            <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 class="mt-offset-5 mb-3">
                            <img class="img-fluid u-md-avatar rounded-circle mx-auto" src="../assets/img/100x100/img1.jpg" alt="Image Description">
                          </div>
                          <h4 class="h6 mb-0">Maria Muszynska</h4>
                          <p class="small">Google</p>
                        </div>
                      </div>

                      <div class="js-slide my-4">
                        <div class="u-slick-zoom__slide text-center">
                          <div class="bg-white shadow-sm rounded p-7">
                            <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 class="mt-offset-5 mb-3">
                            <img class="img-fluid u-md-avatar rounded-circle mx-auto" src="../assets/img/100x100/img2.jpg" alt="Image Description">
                          </div>
                          <h4 class="h6 mb-0">Massalha Shady</h4>
                          <p class="small">Apple</p>
                        </div>
                      </div>

                      <div class="js-slide my-4">
                        <div class="u-slick-zoom__slide text-center">
                          <div class="bg-white shadow-sm rounded p-7">
                            <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 class="mt-offset-5 mb-3">
                            <img class="img-fluid u-md-avatar rounded-circle mx-auto" src="../assets/img/100x100/img3.jpg" alt="Image Description">
                          </div>
                          <h4 class="h6 mb-0">Mark McManus</h4>
                          <p class="small">Microsoft</p>
                        </div>
                      </div>

                      <div class="js-slide my-4">
                        <div class="u-slick-zoom__slide text-center">
                          <div class="bg-white shadow-sm rounded p-7">
                            <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 class="mt-offset-5 mb-3">
                            <img class="img-fluid u-md-avatar rounded-circle mx-auto" src="../assets/img/100x100/img4.jpg" alt="Image Description">
                          </div>
                          <h4 class="h6 mb-0">Alex Pottorf</h4>
                          <p class="small">Github</p>
                        </div>
                      </div>
                    </div>
                  </div>
                </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 #7

Image Description

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!
              
                <div class="position-relative u-gradient-half-info-v1 z-index-2">
                  <div class="u-bg-img-hero-bottom" style="background-image: url(../assets/img/bg-shapes/bg2.png);">
                    <div class="container u-space-3-top u-space-4-bottom">
                      <div class="text-center">
                        <div class="mb-4">
                          <img class="img-fluid rounded-circle u-md-avatar mx-auto mb-3" src="../assets/img/100x100/img1.jpg" alt="Image Description">
                          <h4 class="h6 text-white">Maria Muszynska, Google</h4>
                        </div>
                        <div class="w-md-80 w-lg-50 text-center mx-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>
                    </div>

                    <figure class="w-25 position-absolute-top-0 left-15x">
                      <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="u-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>

                    <figure class="position-absolute-top-0 z-index-minus-1">
                      <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
                           viewBox="0 0 1920 836" style="enable-background:new 0 0 1920 836;" xml:space="preserve">
                        <linearGradient id="CTASVGID3" gradientUnits="userSpaceOnUse" x1="1829.465" y1="101.9586" x2="1829.0533" y2="650.0167">
                          <stop class="u-stop-color-primary-darker" offset="2.363251e-06"/>
                          <stop class="u-stop-color-info-lighter" offset="1"/>
                        </linearGradient>
                        <path fill="url(#CTASVGID3)" d="M1920,102.1c0,0-136.5-4.6-173.5,102.4s64,100,80,258s93.5,187.6,93.5,187.6V102.1z"/>
                      </svg>
                    </figure>
                  </div>
                </div>
              
            

Testimonials #8

Image Description
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
            
              <div class="u-gradient-half-primary-v1">
                <div class="container u-space-2">
                  <div class="media d-block d-md-flex">
                    <div class="d-flex mr-md-7 mb-7 mb-md-0">
                      <img class="img-fluid u-xl-avatar rounded-circle" src="../assets/img/160x160/img2.jpg" alt="Image Description">
                    </div>
                    <div class="media-body">
                      <figure class="mb-3" style="width: 35px;">
                        <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="u-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>

                      <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>
                </div>
              </div>
            
          

Testimonials #9

What Front users say about us.

Review

HTML:

              
                <!-- Testimonials Section -->
                <div class="position-relative u-bg-light-blue-50">
                  <div class="container u-space-3 position-relative z-index-2">
                    <div class="row">
                      <div class="col-lg-4 mb-7 mb-lg-0">
                        <div class="pr-lg-4">
                          <!-- SVG Quote -->
                          <figure class="mb-3" style="width: 80px;">
                            <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="u-fill-light-blue-125" 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 -->

                          <h2 class="font-weight-normal mb-4">What Front users say about us.</h2>

                          <!-- Review -->
                          <div class="d-flex align-items-center">
                            <ul class="list-inline mr-3 mb-0">
                              <li class="list-inline-item text-warning">
                                <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>

                            <span class="text-secondary">Review</span>
                          </div>
                          <!-- End Review -->
                        </div>
                      </div>

                      <div class="col-lg-8">
                        <div class="js-slick-carousel u-slick u-slick--gutters-3"
                             data-slides-show="2"
                             data-autoplay="true"
                             data-speed="5000"
                             data-infinite="true"
                             data-center-mode="true"
                             data-responsive='[{
                               "breakpoint": 992,
                               "settings": {
                                 "slidesToShow": 2
                               }
                             }, {
                               "breakpoint": 768,
                               "settings": {
                                 "slidesToShow": 1
                               }
                             }]'>
                          <div class="js-slide my-4">
                            <!-- Testimonial -->
                            <div class="bg-white shadow-sm rounded p-6 mb-4">
                              <p>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 class="media ml-6">
                              <div class="d-flex mr-3">
                                <img class="img-fluid u-avatar rounded-circle" src="../assets/img/100x100/img1.jpg" alt="Image Description">
                              </div>
                              <div class="media-body">
                                <h4 class="h6 mb-0">Maria Muszynska</h4>
                                <p class="small">Google</p>
                              </div>
                            </div>
                            <!-- End Testimonial -->
                          </div>

                          <div class="js-slide my-4">
                            <!-- Testimonial -->
                            <div class="bg-white shadow-sm rounded p-6 mb-4">
                              <p>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 class="media ml-6">
                              <div class="d-flex mr-3">
                                <img class="img-fluid u-avatar rounded-circle" src="../assets/img/100x100/img2.jpg" alt="Image Description">
                              </div>
                              <div class="media-body">
                                <h4 class="h6 mb-0">Massalha Shady</h4>
                                <p class="small">Apple</p>
                              </div>
                            </div>
                            <!-- End Testimonial -->
                          </div>

                          <div class="js-slide my-4">
                            <!-- Testimonial -->
                            <div class="bg-white shadow-sm rounded p-6 mb-4">
                              <p>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 class="media ml-6">
                              <div class="d-flex mr-3">
                                <img class="img-fluid u-avatar rounded-circle" src="../assets/img/100x100/img3.jpg" alt="Image Description">
                              </div>
                              <div class="media-body">
                                <h4 class="h6 mb-0">Mark McManus</h4>
                                <p class="small">Microsoft</p>
                              </div>
                            </div>
                            <!-- End Testimonial -->
                          </div>

                          <div class="js-slide my-4">
                            <!-- Testimonial -->
                            <div class="bg-white shadow-sm rounded p-6 mb-4">
                              <p>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 class="media ml-6">
                              <div class="d-flex mr-3">
                                <img class="img-fluid u-avatar rounded-circle" src="../assets/img/100x100/img4.jpg" alt="Image Description">
                              </div>
                              <div class="media-body">
                                <h4 class="h6 mb-0">Alex Pottorf</h4>
                                <p class="small">Github</p>
                              </div>
                            </div>
                            <!-- End Testimonial -->
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>

                  <!-- SVG Bottom Right Shapes -->
                  <figure class="position-absolute-top-right-0 w-75 w-md-60 w-lg-35">
                    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
                         viewBox="0 0 362 293.9" style="enable-background:new 0 0 362 293.9;" xml:space="preserve">
                      <linearGradient id="testimonialsID1" gradientUnits="userSpaceOnUse" x1="-8.225470e-09" y1="146.9534" x2="362.0205" y2="146.9534">
                        <stop class="u-stop-color-warning" offset="7.500810e-08"/>
                        <stop class="u-stop-color-danger" offset="1"/>
                      </linearGradient>
                      <path fill="url(#testimonialsID1)" opacity=".05" d="M362,114.3c-0.4,0.4-0.8,0.9-1.3,1.3L220.1,256.3c-50.2,50.2-132.3,50.2-182.4,0l0,0
                        c-50.2-50.2-50.2-132.3,0-182.4L111.5,0L362,0L362,114.3z"/>
                      <linearGradient id="testimonialsID2" gradientUnits="userSpaceOnUse" x1="-5.125912e-09" y1="158.4534" x2="362.0205" y2="158.4534" gradientTransform="matrix(1 0 0 -1 0 293.9069)">
                        <stop class="u-stop-color-warning" offset="1.500162e-07"/>
                        <stop class="u-stop-color-danger" offset="1"/>
                      </linearGradient>
                      <path fill="url(#testimonialsID1)" d="M362,91.3c-0.4,0.4-0.8,0.9-1.3,1.3L220.1,233.3c-50.2,50.2-132.3,50.2-182.4,0l0,0
                        c-50.2-50.2-50.2-132.3,0-182.4L88.5,0L362,0V91.3z"/>
                    </svg>
                  </figure>
                  <!-- End SVG Bottom Right Shapes -->
                </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 #10

Satisfied customers on Front

HTML:

              
                <!-- Testimonials -->
                <div class="u-gradient-half-primary-v1">
                  <div class="u-bg-img-hero" style="background-image: url(../assets/svg/bg/bg2.svg);">
                    <div class="container u-space-3">
                      <!-- Title -->
                      <div class="text-center mb-4">
                        <!-- SVG Quote -->
                        <figure class="mx-auto mb-2" 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 class="u-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 -->

                        <h2 class="text-white font-weight-medium">Satisfied customers on Front</h2>
                      </div>
                      <!-- End Title -->

                      <!-- Slick Carousel - Testimonials Main Nav -->
                      <div id="testimonialsNavMain" class="js-slick-carousel u-slick text-center w-lg-75 mx-lg-auto mb-7"
                           data-adaptive-height="true"
                           data-infinite="true"
                           data-fade="true"
                           data-nav-for="#testimonialsNavPagination">
                        <div class="js-slide">
                          <!-- Testimonials -->
                          <blockquote class="lead u-text-light text-lh-md">
                            I followed a link for a job on Front and uploaded my resume. About two hours later, I received an email from an employer looking for someone with my skills. In a week's time and four interviews later I have a fantastic new job! Thanks Front!</blockquote>
                          <!-- End Testimonials -->
                        </div>

                        <div class="js-slide">
                          <!-- Testimonials -->
                          <blockquote class="lead u-text-light text-lh-md">
                            I had my resume public on Front for only two days and I got flooded with interviews from serious competitive employers that resulted in me choosing between very tempting offers. Don't waste your time. Go Front. It's real!</blockquote>
                          <!-- End Testimonials -->
                        </div>

                        <div class="js-slide">
                          <!-- Testimonials -->
                          <blockquote class="lead u-text-light text-lh-md">
                            I found my current Job on Front. I applied and got a reply from the company within one day. Hired within the week. No other job site has as many tech jobs as Front.</blockquote>
                          <!-- End Testimonials -->
                        </div>

                        <div class="js-slide">
                          <!-- Testimonials -->
                          <blockquote class="lead u-text-light text-lh-md">
                            I uploaded my resume on Front and within that week had several emails and calls about opportunities from recruiters. I decided to pursue an opportunity with HP and started working there that same month. Excellent site!</blockquote>
                          <!-- End Testimonials -->
                        </div>
                      </div>
                      <!-- End Slick Carousel - Testimonials Main Nav -->

                      <!-- Slick Carousel - Testimonials Pagination Nav -->
                      <div id="testimonialsNavPagination" class="js-slick-carousel u-slick u-slick--gutters-3 u-slick--pagination-testimonials-v1"
                           data-infinite="true"
                           data-slides-show="3"
                           data-center-mode="true"
                           data-focus-on-select="true"
                           data-nav-for="#testimonialsNavMain"
                           data-responsive='[{
                             "breakpoint": 1200,
                             "settings": {
                               "slidesToShow": 2
                             }
                           }, {
                             "breakpoint": 768,
                             "settings": {
                               "slidesToShow": 2
                             }
                           }, {
                             "breakpoint": 554,
                             "settings": {
                               "slidesToShow": 1
                             }
                           }]'>
                        <div class="js-slide rounded-pill p-2">
                          <!-- Authors -->
                          <div class="media align-items-center">
                            <div class="d-flex mr-3">
                              <img class="u-md-avatar rounded-circle" src="../assets/img/100x100/img1.jpg" alt="Image Description">
                            </div>
                            <div class="media-body">
                              <h4 class="h6 u-slick--pagination-testimonials-v1__title mb-0">Casy Williams</h4>
                              <p class="small u-slick--pagination-testimonials-v1__text mb-0">NERC CIP Consultant</p>
                            </div>
                          </div>
                          <!-- End Authors -->
                        </div>
                        <div class="js-slide rounded-pill p-2">
                          <!-- Authors -->
                          <div class="media align-items-center">
                            <div class="d-flex mr-3">
                              <img class="u-md-avatar rounded-circle" src="../assets/img/100x100/img3.jpg" alt="Image Description">
                            </div>
                            <div class="media-body">
                              <h4 class="h6 u-slick--pagination-testimonials-v1__title mb-0">Elon Fisher</h4>
                              <p class="small u-slick--pagination-testimonials-v1__text mb-0">Consultant</p>
                            </div>
                          </div>
                          <!-- End Authors -->
                        </div>
                        <div class="js-slide rounded-pill p-2">
                          <!-- Authors -->
                          <div class="media align-items-center">
                            <div class="d-flex mr-3">
                              <img class="u-md-avatar rounded-circle" src="../assets/img/100x100/img2.jpg" alt="Image Description">
                            </div>
                            <div class="media-body">
                              <h4 class="h6 u-slick--pagination-testimonials-v1__title mb-0">Linda Spears</h4>
                              <p class="small u-slick--pagination-testimonials-v1__text mb-0">Business Analyst</p>
                            </div>
                          </div>
                          <!-- End Authors -->
                        </div>
                        <div class="js-slide rounded-pill p-2">
                          <!-- Authors -->
                          <div class="media align-items-center">
                            <div class="d-flex mr-3">
                              <img class="u-md-avatar rounded-circle" src="../assets/img/100x100/img4.jpg" alt="Image Description">
                            </div>
                            <div class="media-body">
                              <h4 class="h6 u-slick--pagination-testimonials-v1__title mb-0">Chris Johnson</h4>
                              <p class="small u-slick--pagination-testimonials-v1__text mb-0">Firewall Engineer</p>
                            </div>
                          </div>
                          <!-- End Authors -->
                        </div>
                      </div>
                      <!-- End Slick Carousel - Testimonials Pagination Nav -->
                    </div>
                  </div>
                </div>
                <!-- End Testimonials -->
              
            

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 #11

HTML:

              
                <!-- 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 mb-1">
                    <!-- Testimonial -->
                    <div class="d-flex align-items-start flex-column bg-white border rounded p-5">
                      <div class="mb-auto">
                        <p>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>

                      <!-- Author & Review -->
                      <div class="media">
                        <div class="d-flex mr-3">
                          <img class="img-fluid u-avatar 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">
                            <li class="list-inline-item mx-0">
                              <span class="fa fa-star"></span>
                            </li>
                            <li class="list-inline-item mx-0">
                              <span class="fa fa-star"></span>
                            </li>
                            <li class="list-inline-item mx-0">
                              <span class="fa fa-star"></span>
                            </li>
                            <li class="list-inline-item mx-0">
                              <span class="fa fa-star"></span>
                            </li>
                            <li class="list-inline-item mx-0">
                              <span class="fa fa-star"></span>
                            </li>
                          </ul>
                        </div>
                      </div>
                      <!-- End Author & Review -->
                    </div>
                    <!-- End Testimonial -->
                  </div>

                  <div class="js-slide mb-1">
                    <!-- Testimonial -->
                    <div class="d-flex align-items-start flex-column bg-white border rounded p-5">
                      <div class="mb-auto">
                        <p>The theme is well designed with modern tools, we had no issue porting it to our own Webpack build.</p>
                      </div>

                      <!-- Author & Review -->
                      <div class="media">
                        <div class="d-flex mr-3">
                          <img class="img-fluid u-avatar 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">
                            <li class="list-inline-item mx-0">
                              <span class="fa fa-star"></span>
                            </li>
                            <li class="list-inline-item mx-0">
                              <span class="fa fa-star"></span>
                            </li>
                            <li class="list-inline-item mx-0">
                              <span class="fa fa-star"></span>
                            </li>
                            <li class="list-inline-item mx-0">
                              <span class="fa fa-star"></span>
                            </li>
                            <li class="list-inline-item mx-0">
                              <span class="fa fa-star"></span>
                            </li>
                          </ul>
                        </div>
                      </div>
                      <!-- End Author & Review -->
                    </div>
                    <!-- End Testimonial -->
                  </div>

                  <div class="js-slide mb-1">
                    <!-- Testimonial -->
                    <div class="d-flex align-items-start flex-column bg-white border rounded p-5">
                      <div class="mb-auto">
                        <p>I love Front! I love the ease of use, I love the fact that I have total creative freedom...</p>
                      </div>

                      <!-- Author & Review -->
                      <div class="media">
                        <div class="d-flex mr-3">
                          <img class="img-fluid u-avatar 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">
                            <li class="list-inline-item mx-0">
                              <span class="fa fa-star"></span>
                            </li>
                            <li class="list-inline-item mx-0">
                              <span class="fa fa-star"></span>
                            </li>
                            <li class="list-inline-item mx-0">
                              <span class="fa fa-star"></span>
                            </li>
                            <li class="list-inline-item mx-0">
                              <span class="fa fa-star"></span>
                            </li>
                            <li class="list-inline-item mx-0">
                              <span class="fa fa-star"></span>
                            </li>
                          </ul>
                        </div>
                      </div>
                      <!-- End Author & Review -->
                    </div>
                    <!-- End Testimonial -->
                  </div>
                </div>
                <!-- End Slick Carousel -->
              
            

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>