Testimonials - Snippets | Unity - Multipurpose Responsive Template

Component #1

Preview
HTML

Featured client

To say that switching to Unity has been life-changing is an understatement. My business has tripled and I got my life back.

Read the story

              
                <!-- Testimonials -->
                <div class="bg-soft-dark-to-start-75 overflow-hidden">
                  <div class="container content-space-2">
                    <div class="row justify-content-lg-between align-items-md-center">
                      <div class="col-md-6 col-lg-5 mb-10 mb-lg-0">
                        <div class="position-relative">
                          <img class="img-fluid" src="../assets/img/500x650/img4.jpg" alt="Image Description">

                          <!-- SVG Shape -->
                          <figure class="position-absolute bottom-0 start-0 zi-n1 mb-n7 ms-n7" style="width: 10rem;">
                            <img class="img-fluid" src="../assets/svg/components/dots.svg" alt="Image Description">
                          </figure>
                          <!-- End SVG Shape -->
                        </div>
                      </div>
                      <!-- End Col -->

                      <div class="col-md-6">
                        <!-- Blockquote -->
                        <figure class="blockquote-lg mb-7">
                          <span class="text-cap text-muted">Featured client</span>

                          <blockquote class="blockquote"><em>To say that switching to Unity has been life-changing is an understatement. My business has tripled and I got my life back.</em></blockquote>

                          <figcaption class="blockquote-footer">
                            Nicole Grazioso
                            <span class="blockquote-footer-source">Director Payments & Risk | Airbnb</span>
                          </figcaption>
                        </figure>
                        <!-- End Blockquote -->
                        
                        <a class="btn btn-dark" href="#">Read the story</a>
                      </div>
                      <!-- End Col -->
                    </div>
                    <!-- End Row -->
                  </div>
                </div>
                <!-- End Testimonials -->

Component #2

Preview
HTML

" Truly great template and costumer support. "

" The best one I've ever come across. "

" This is a truly beautiful template. "

" There one theme that you want. "

" Great design and thorough documentation. "

              
                <!-- Testimonials -->
                <div class="container content-space-1">
                  <div class="row justify-content-center">
                    <div class="col-6 col-md-4 col-lg mb-3 mb-lg-0">
                      <div class="text-center">
                        <img class="avatar avatar-xl" src="../assets/svg/brands/sass-dark.svg" alt="Logo">
                        <p>" Truly great template and costumer support. "</p>

                        <div class="d-flex justify-content-center gap-1">
                          <img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="18">
                          <img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="18">
                          <img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="18">
                          <img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="18">
                          <img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="18">
                        </div>
                        <!-- End Rating -->
                      </div>
                    </div>
                    <!-- End Col -->

                    <div class="col-6 col-md-4 col-lg mb-3 mb-lg-0">
                      <div class="text-center">
                        <img class="avatar avatar-xl" src="../assets/svg/brands/business-insider-dark.svg" alt="Logo">
                        <p>" The best one I've ever come across. "</p>

                        <div class="d-flex justify-content-center gap-1">
                          <img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="18">
                          <img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="18">
                          <img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="18">
                          <img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="18">
                          <img src="../assets/svg/illustrations/star-half.svg" alt="Review rating" width="18">
                        </div>
                        <!-- End Rating -->
                      </div>
                    </div>
                    <!-- End Col -->
                    
                    <div class="col-6 col-md-4 col-lg mb-3 mb-lg-0">
                      <div class="text-center">
                        <img class="avatar avatar-xl" src="../assets/svg/brands/forbes-dark.svg" alt="Logo">
                        <p>" This is a truly beautiful template. "</p>

                        <div class="d-flex justify-content-center gap-1">
                          <img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="18">
                          <img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="18">
                          <img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="18">
                          <img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="18">
                          <img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="18">
                        </div>
                        <!-- End Rating -->
                      </div>
                    </div>
                    <!-- End Col -->

                    <div class="col-6 col-md-4 col-lg mb-3 mb-lg-0">
                      <div class="text-center">
                        <img class="avatar avatar-xl" src="../assets/svg/brands/capsule-dark.svg" alt="Logo">
                        <p>" There one theme that you want. "</p>

                        <div class="d-flex justify-content-center gap-1">
                          <img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="18">
                          <img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="18">
                          <img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="18">
                          <img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="18">
                          <img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="18">
                        </div>
                        <!-- End Rating -->
                      </div>
                    </div>
                    <!-- End Col -->

                    <div class="col-6 col-md-4 col-lg mb-3 mb-lg-0">
                      <div class="text-center">
                        <img class="avatar avatar-xl" src="../assets/svg/brands/fitbit-dark.svg" alt="Logo">
                        <p>" Great design and thorough documentation. "</p>

                        <div class="d-flex justify-content-center gap-1">
                          <img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="18">
                          <img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="18">
                          <img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="18">
                          <img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="18">
                          <img src="../assets/svg/illustrations/star-half.svg" alt="Review rating" width="18">
                        </div>
                        <!-- End Rating -->
                      </div>
                    </div>
                    <!-- End Col -->
                  </div>
                  <!-- End Row -->
                </div>
                <!-- End Testimonials -->

Loved by business and individuals across the globe

Unity is by far one of the most solid themes out there. I have nothing but praise.

Nicole Grazioso Director Payments & Risk | HubSpot
Great design and thorough documentation, all backed with amazing support.

Josh Tyson Product Manager | Capsule
It is a breeze to work with and really love the snippets to pick out what you want in your design.

Luisa Senior Director of Operations | Fitbit
Truly great agency and costumer support. The best one I've ever come across.

Alisa Williams Entrepreneur | Happy customer

              
                <!-- Testimonials -->
                <div class="container content-space-1">
                  <div class="w-lg-75 mx-lg-auto">
                    <!-- Heading -->
                    <div class="w-lg-65 text-center mx-lg-auto mb-5 mb-sm-7 mb-lg-10">
                      <h2>Loved by business and individuals across the globe</h2>
                    </div>
                    <!-- End Heading -->

                    <!-- List Timeline -->
                    <ul class="list-unstyled list-timeline list-py-3">
                      <li class="list-timeline-item">
                        <!-- Card -->
                        <div class="card card-shadow">
                          <div class="card-body">
                            <!-- Media -->
                            <div class="d-sm-flex">
                              <div class="flex-shrink-0 mb-3 mb-sm-0">
                                <img class="avatar avatar-lg avatar-circle" src="../assets/img/160x160/img3.jpg" alt="Image Description">
                              </div>

                              <div class="flex-grow-1 ms-sm-4">
                                <!-- Blockquote -->
                                <figure class="blockquote-sm">
                                  <blockquote class="blockquote"><em>Unity is by far one of the most solid themes out there. I have nothing but praise.</em></blockquote>

                                  <figcaption class="blockquote-footer">
                                    Nicole Grazioso
                                    <span class="blockquote-footer-source">Director Payments & Risk | HubSpot</span>
                                  </figcaption>
                                </figure>
                                <!-- End Blockquote -->
                              </div>
                            </div>
                            <!-- End Media -->
                          </div>
                        </div>
                        <!-- End Card -->
                      </li>

                      <li class="list-timeline-item ms-auto">
                        <!-- Card -->
                        <div class="card card-shadow">
                          <div class="card-body">
                            <!-- Media -->
                            <div class="d-sm-flex">
                              <div class="flex-shrink-0 mb-3 mb-sm-0">
                                <img class="avatar avatar-lg avatar-circle" src="../assets/img/160x160/img5.jpg" alt="Image Description">
                              </div>

                              <div class="flex-grow-1 ms-sm-4">
                                <!-- Blockquote -->
                                <figure class="blockquote-sm">
                                  <blockquote class="blockquote"><em>Great design and thorough documentation, all backed with amazing support.</em></blockquote>

                                  <figcaption class="blockquote-footer">
                                    Josh Tyson
                                    <span class="blockquote-footer-source">Product Manager | Capsule</span>
                                  </figcaption>
                                </figure>
                                <!-- End Blockquote -->
                              </div>
                            </div>
                            <!-- End Media -->
                          </div>
                        </div>
                        <!-- End Card -->
                      </li>

                      <li class="list-timeline-item">
                        <!-- Card -->
                        <div class="card card-shadow">
                          <div class="card-body">
                            <!-- Media -->
                            <div class="d-sm-flex">
                              <div class="flex-shrink-0 mb-3 mb-sm-0">
                                <img class="avatar avatar-lg avatar-circle" src="../assets/img/160x160/img9.jpg" alt="Image Description">
                              </div>

                              <div class="flex-grow-1 ms-sm-4">
                                <!-- Blockquote -->
                                <figure class="blockquote-sm">
                                  <blockquote class="blockquote"><em>It is a breeze to work with and really love the snippets to pick out what you want in your design.</em></blockquote>

                                  <figcaption class="blockquote-footer">
                                    Luisa
                                    <span class="blockquote-footer-source">Senior Director of Operations | Fitbit</span>
                                  </figcaption>
                                </figure>
                                <!-- End Blockquote -->
                              </div>
                            </div>
                            <!-- End Media -->
                          </div>
                        </div>
                        <!-- End Card -->
                      </li>

                      <li class="list-timeline-item ms-auto">
                        <!-- Card -->
                        <div class="card card-shadow">
                          <div class="card-body">
                            <!-- Media -->
                            <div class="d-sm-flex">
                              <div class="flex-shrink-0 mb-3 mb-sm-0">
                                <img class="avatar avatar-lg avatar-circle" src="../assets/img/160x160/img10.jpg" alt="Image Description">
                              </div>

                              <div class="flex-grow-1 ms-sm-4">
                                <!-- Blockquote -->
                                <figure class="blockquote-sm">
                                  <blockquote class="blockquote"><em>Truly great agency and costumer support. The best one I've ever come across.</em></blockquote>

                                  <figcaption class="blockquote-footer">
                                    Alisa Williams
                                    <span class="blockquote-footer-source">Entrepreneur | Happy customer</span>
                                  </figcaption>
                                </figure>
                                <!-- End Blockquote -->
                              </div>
                            </div>
                            <!-- End Media -->
                          </div>
                        </div>
                        <!-- End Card -->
                      </li>
                    </ul>
                    <!-- End List Timeline -->
                  </div>
                </div>
                <!-- End Testimonials -->

Component #4

Loved by business and individuals across the globe

" I'm absolutely floored by the level of care and attention to detail the team at HS have put into this theme and for one can guarantee that I will be a return customer. "

Nicole Grazioso

Director Payments & Risk | HubSpot

" With Unity, we're able to easily track our performance in full detail. It's become an essential tool for us to grow and engage with our audience. "

Josh Tyson

Product Manager | Capsule

" In September, I will be using this theme for 2 years. I went through multiple updates and changes and I'm very glad to see the consistency and effort made by the team. "

Luisa

Senior Director of Operations | Fitbit

" Refreshing and Thought provoking design and it changes my view about how I design the websites. Great typography, modern clean white design, nice tones of the color. "

Alisa Williams

Entrepreneur | Happy customer

Accuracy rate

99.95%

in fulfilling orders

Startup businesses

2,000+

partner with Unity

Happy customer

85%

this year alone

<div class="bg-dark overflow-hidden"> <div class="container position-relative content-space-2 content-space-lg-3"> <div class="row align-items-md-center mb-7"> <div class="col-md-6 mb-3 mb-md-0"> <h2 class="text-white">Loved by business and individuals across the globe</h2> </div>  <div class="col-md text-md-end">  <div class="js-swiper-testimonials-button-prev swiper-button-prev swiper-static-button-prev"></div> <div class="js-swiper-testimonials-button-next swiper-button-next swiper-static-button-next"></div>  </div>  </div>   <div class="swiper-center-mode-end mb-10"> <div class="js-swiper-testimonials swiper swiper-equal-height"> <div class="swiper-wrapper">  <div class="swiper-slide">  <div class="card"> <div class="card-body"> <p class="card-text fs-3"><em>" I'm absolutely floored by the level of care and attention to detail the team at HS have put into this theme and for one can guarantee that I will be a return customer. "</em></p> </div> <div class="card-footer bg-light">  <div class="d-sm-flex align-items-sm-center"> <div class="flex-shrink-0 mb-3 mb-sm-0"> <img class="avatar avatar-circle" src="../assets/img/160x160/img7.jpg" alt="Image Description"> </div> <div class="flex-grow-1 ms-sm-3"> <h6 class="mb-0">Nicole Grazioso</h6> <span class="card-text fs-5">Director Payments & Risk | HubSpot</span> </div> </div>  </div> </div>  </div>   <div class="swiper-slide">  <div class="card"> <div class="card-body"> <p class="card-text fs-3"><em>" With Unity, we're able to easily track our performance in full detail. It's become an essential tool for us to grow and engage with our audience. "</em></p> </div> <div class="card-footer bg-light">  <div class="d-sm-flex align-items-sm-center"> <div class="flex-shrink-0 mb-3 mb-sm-0"> <img class="avatar avatar-circle" src="../assets/img/160x160/img6.jpg" alt="Image Description"> </div> <div class="flex-grow-1 ms-sm-3"> <h6 class="mb-0">Josh Tyson</h6> <span class="card-text fs-5">Product Manager | Capsule</span> </div> </div>  </div> </div>  </div>   <div class="swiper-slide">  <div class="card"> <div class="card-body"> <p class="card-text fs-3"><em>" In September, I will be using this theme for 2 years. I went through multiple updates and changes and I'm very glad to see the consistency and effort made by the team. "</em></p> </div> <div class="card-footer bg-light">  <div class="d-sm-flex align-items-sm-center"> <div class="flex-shrink-0 mb-3 mb-sm-0"> <img class="avatar avatar-circle" src="../assets/img/160x160/img10.jpg" alt="Image Description"> </div> <div class="flex-grow-1 ms-sm-3"> <h6 class="mb-0">Luisa</h6> <span class="card-text fs-5">Senior Director of Operations | Fitbit</span> </div> </div>  </div> </div>  </div>   <div class="swiper-slide">  <div class="card"> <div class="card-body"> <p class="card-text fs-3"><em>" Refreshing and Thought provoking design and it changes my view about how I design the websites. Great typography, modern clean white design, nice tones of the color. "</em></p> </div> <div class="card-footer bg-light">  <div class="d-sm-flex align-items-sm-center"> <div class="flex-shrink-0 mb-3 mb-sm-0"> <img class="avatar avatar-circle" src="../assets/img/160x160/img9.jpg" alt="Image Description"> </div> <div class="flex-grow-1 ms-sm-3"> <h6 class="mb-0">Alisa Williams</h6> <span class="card-text fs-5">Entrepreneur | Happy customer</span> </div> </div>  </div> </div>  </div>  </div>  <div class="js-swiper-preloader swiper-preloader"> <div class="spinner-border text-primary" role="status"> <span class="visually-hidden">Loading...</span> </div> </div>  </div> </div>  <div class="row"> <div class="col-6 col-md-4 mb-5 mb-md-0"> <h5 class="text-white">Accuracy rate</h5> <span class="display-4 text-primary">99.95%</span> <p class="text-white-70">in fulfilling orders</p> </div>  <div class="col-6 col-md-4 mb-5 mb-md-0"> <h5 class="text-white">Startup businesses</h5> <span class="display-4 text-primary">2,000+</span> <p class="text-white-70">partner with Unity</p> </div>  <div class="col-6 col-md-4"> <h5 class="text-white">Happy customer</h5> <span class="display-4 text-primary">85%</span> <p class="text-white-70">this year alone</p> </div>  </div>   <figure class="position-absolute bottom-0 end-0 d-none d-lg-block mb-10" style="width: 17rem; margin-right: -8rem;"> <img class="img-fluid" src="../assets/svg/components/three-arrows-1-light.svg" alt="Image Description"> </figure>  </div> </div>

              
                <link rel="stylesheet" href="../assets/vendor/swiper/swiper-bundle.min.css">

              
                <script src="../assets/vendor/swiper/swiper-bundle.min.js"></script>

                <!-- JS Plugins Init. -->
                <script>
                  (function() {
                    // INITIALIZATION OF SWIPER
                    // =======================================================
                    var swiper = new Swiper('.js-swiper-testimonials',{
                      navigation: {
                        nextEl: '.js-swiper-testimonials-button-next',
                        prevEl: '.js-swiper-testimonials-button-prev',
                      },
                      loop: true,
                      slidesPerView: 1,
                      spaceBetween: 30,
                      breakpoints: {
                        580: {
                          slidesPerView: 1
                        },
                        768: {
                          slidesPerView: 2
                        },
                        1024: {
                          slidesPerView: 3
                        },
                      },
                      on: {
                        'imagesReady': function (swiper) {
                          const preloader = swiper.el.querySelector('.js-swiper-preloader')
                          preloader.parentNode.removeChild(preloader)
                        }
                      }
                    });
                  })()
                </script>

Component #5

Preview
HTML

I just wanted to say that I'm very happy with my purchase of Unity so far. The documentation is outstanding - clear and detailed.

Read customer story

              
                <!-- Testimonials -->
                <div class="container content-space-1">
                  <div class="w-lg-75 text-center mx-lg-auto">
                    <div class="mb-5">
                      <img class="avatar avatar-xl avatar-4x3" src="../assets/svg/brands/airbnb-dark.svg" alt="Logo">
                    </div>
                    
                    <figure class="blockquote-lg">
                      <blockquote class="blockquote">I just wanted to say that I'm very happy with my purchase of Unity so far. The documentation is outstanding - clear and detailed.</blockquote>

                      <figcaption class="blockquote-footer mb-3 mb-sm-7">
                        Philip
                        <span class="blockquote-footer-source">Product Manager | Airbnb</span>
                      </figcaption>
                    </figure>

                    <a class="link link-pointer" href="#">Read customer story</a>
                  </div>
                </div>
                <!-- End Testimonials -->

Component #6

Preview
HTML

Loved by business and individuals across the globe

" I'm absolutely floored by the level of care and attention to detail the team at HS have put into this theme and for one can guarantee that I will be a return customer. "

Nicole Grazioso

Director Payments & Risk | HubSpot

" With Unity, we're able to easily track our performance in full detail. It's become an essential tool for us to grow and engage with our audience. "

Josh Tyson

Product Manager | Capsule

" In September, I will be using this theme for 2 years. I went through multiple updates and changes and I'm very glad to see the consistency and effort made by the team. "

Luisa

Senior Director of Operations | Fitbit

View all clients

              
                <!-- Testimonials -->
                <div class="container content-space-1 overflow-hidden">
                  <!-- Heading -->
                  <div class="w-lg-65 text-center mx-lg-auto mb-5 mb-sm-7 mb-lg-10">
                    <h2>Loved by business and individuals across the globe</h2>
                  </div>
                  <!-- End Heading -->

                  <div class="row row-cols-1 row-cols-md-2 row-cols-lg-3">
                    <div class="col mb-5 mb-lg-10">
                      <!-- Card -->
                      <div class="card h-100">
                        <div class="card-body">
                          <div class="mb-4">
                            <img class="avatar avatar-lg avatar-4x3" src="../assets/svg/brands/fitbit-dark.svg" alt="Logo">
                          </div>
                          <p class="card-text fs-3"><em>" I'm absolutely floored by the level of care and attention to detail the team at HS have put into this theme and for one can guarantee that I will be a return customer. "</em></p>
                        </div>
                        
                        <div class="card-footer pt-0">
                          <h6 class="mb-0">Nicole Grazioso</h6>
                          <span class="card-text fs-5">Director Payments & Risk | HubSpot</span>
                        </div>
                      </div>
                      <!-- End Card -->
                    </div>
                    <!-- End Col -->

                    <div class="col mb-5 mb-lg-10">
                      <!-- Card -->
                      <div class="card h-100">
                        <div class="card-body">
                          <div class="mb-4">
                            <img class="avatar avatar-lg avatar-4x3" src="../assets/svg/brands/mailchimp-dark.svg" alt="Logo">
                          </div>
                          <p class="card-text fs-3"><em>" With Unity, we're able to easily track our performance in full detail. It's become an essential tool for us to grow and engage with our audience. "</em></p>
                        </div>
                        
                        <div class="card-footer pt-0">
                          <h6 class="mb-0">Josh Tyson</h6>
                          <span class="card-text fs-5">Product Manager | Capsule</span>
                        </div>
                      </div>
                      <!-- End Card -->
                    </div>
                    <!-- End Col -->

                    <div class="col mb-5 mb-lg-10">
                      <!-- Card -->
                      <div class="card h-100">
                        <div class="card-body">
                          <div class="mb-4">
                            <img class="avatar avatar-lg avatar-4x3" src="../assets/svg/brands/capsule-dark.svg" alt="Logo">
                          </div>
                          <p class="card-text fs-3"><em>" In September, I will be using this theme for 2 years. I went through multiple updates and changes and I'm very glad to see the consistency and effort made by the team. "</em></p>
                        </div>
                        
                        <div class="card-footer pt-0">
                          <h6 class="mb-0">Luisa</h6>
                          <span class="card-text fs-5">Senior Director of Operations | Fitbit</span>
                        </div>
                      </div>
                      <!-- End Card -->
                    </div>
                    <!-- End Col -->
                  </div>
                  <!-- End Row -->

                  <div class="text-center">
                    <a class="link link-pointer" href="#">View all clients</a>
                  </div>
                </div>
                <!-- End Testimonials -->