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

Image Description

HTML:

<!-- Testimonials Section -->
<div class="gradient-overlay-half-primary-v1">
  <div class="bg-img-hero" style="background-image: url(../assets/img/bg/bg2.png);">
    <div class="container space-2 space-3--lg">
      <div class="w-lg-75 mx-lg-auto">
        <!-- SVG Quote -->
        <figure class="mx-auto mb-4" style="width: 50px;">
          <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
             viewBox="0 0 8 8" style="enable-background:new 0 0 8 8;" xml:space="preserve">
            <path fill="#ffffff" d="M3,1.3C2,1.7,1.2,2.7,1.2,3.6c0,0.2,0,0.4,0.1,0.5c0.2-0.2,0.5-0.3,0.9-0.3c0.8,0,1.5,0.6,1.5,1.5c0,0.9-0.7,1.5-1.5,1.5
              C1.4,6.9,1,6.6,0.7,6.1C0.4,5.6,0.3,4.9,0.3,4.5c0-1.6,0.8-2.9,2.5-3.7L3,1.3z M7.1,1.3c-1,0.4-1.8,1.4-1.8,2.3
              c0,0.2,0,0.4,0.1,0.5c0.2-0.2,0.5-0.3,0.9-0.3c0.8,0,1.5,0.6,1.5,1.5c0,0.9-0.7,1.5-1.5,1.5c-0.7,0-1.1-0.3-1.4-0.8
              C4.4,5.6,4.4,4.9,4.4,4.5c0-1.6,0.8-2.9,2.5-3.7L7.1,1.3z"/>
          </svg>
        </figure>
        <!-- End SVG Quote -->

        <!-- Slick Carousel - Testimonials -->
        <div id="testimonialsNavMain" class="js-slick-carousel u-slick space-2-bottom"
             data-infinite="true"
             data-autoplay="true"
             data-speed="5000"
             data-nav-for="#testimonialsNavThumb">
          <div class="js-slide">
            <blockquote class="h3 text-white text-center">Just wow! The template is really nice and offers quite a large set of options.</blockquote>
          </div>
          <div class="js-slide">
            <blockquote class="h3 text-white text-center">It's beautiful and the coding is done quickly and seamlessly. Thank you!</blockquote>
          </div>
          <div class="js-slide">
            <blockquote class="h3 text-white text-center">Space brings so many benefits to any team that does anything following a process.</blockquote>
          </div>
          <div class="js-slide">
            <blockquote class="h3 text-white text-center">One simple subscription gives you access to all our tools, plus so much more.</blockquote>
          </div>
          <div class="js-slide">
            <blockquote class="h3 text-white text-center">Space is the easiest way for teams to build cool things work—and get results.</blockquote>
          </div>
          <div class="js-slide">
            <blockquote class="h3 text-white text-center">We are incredibly impressed with Space and how well it supports its customers with amazing products and services.</blockquote>
          </div>
        </div>
        <!-- End Slick Carousel - Testimonials -->
      </div>

      <!-- Slick Carousel - Clients -->
      <div id="testimonialsNavThumb" class="js-slick-carousel u-slick u-slick--transform-off-lg u-slick--pagination-classic"
           data-infinite="true"
           data-autoplay="true"
           data-speed="5000"
           data-center-mode="true"
           data-slides-show="6"
           data-is-thumbs="true"
           data-focus-on-select="true"
           data-nav-for="#testimonialsNavMain"
           data-responsive='[{
             "breakpoint": 992,
             "settings": {
               "slidesToShow": 4
             }
           }, {
             "breakpoint": 768,
             "settings": {
               "slidesToShow": 3
             }
           }, {
             "breakpoint": 576,
             "settings": {
               "slidesToShow": 3
             }
           }, {
             "breakpoint": 480,
             "settings": {
               "slidesToShow": 2
             }
           }]'>
        <div class="js-slide pt-5">
          <img class="u-clients" src="../assets/img/clients/amazon-white.png" alt="Image Description">
        </div>
        <div class="js-slide pt-5">
          <img class="u-clients" src="../assets/img/clients/google-white.png" alt="Image Description">
        </div>
        <div class="js-slide pt-5">
          <img class="u-clients" src="../assets/img/clients/hubspot-white.png" alt="Image Description">
        </div>
        <div class="js-slide pt-5">
          <img class="u-clients" src="../assets/img/clients/slack-white.png" alt="Image Description">
        </div>
        <div class="js-slide pt-5">
          <img class="u-clients" src="../assets/img/clients/airbnb-white.png" alt="Image Description">
        </div>
        <div class="js-slide pt-5">
          <img class="u-clients" src="../assets/img/clients/spotify-white.png" alt="Image Description">
        </div>
      </div>
      <!-- End Slick Carousel - Clients -->
    </div>
  </div>
</div>
<!-- End Testimonials Section -->
Copy

CSS library:

<link rel="stylesheet" href="../../assets/vendor/slick-carousel/slick/slick.css">
Copy

JS library and initialization:

<!-- JS Implementing Plugins -->
<script src="../../assets/vendor/slick-carousel/slick/slick.js"></script>

<!-- JS Space -->
<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>
Copy

Testimonials #2

We are incredibly impressed with Space and how well it supports its customers with amazing products and services.
Image Description

Maria Muszynska

Google

HTML:

<div class="container space-2 space-3--lg">
  <!-- Slick Carousel -->
  <div class="js-slick-carousel u-slick u-slick--gutters-3"
       data-fade="true"
       data-arrows-classes="u-slick__arrow u-slick__arrow-pos--bottom-minus-7 u-slick__arrow-centered--x"
       data-arrow-left-classes="fa fa-long-arrow-alt-left u-slick__arrow-inner ml-offset-5"
       data-arrow-right-classes="fa fa-long-arrow-alt-right u-slick__arrow-inner ml-5">
    <div class="js-slide">
      <!-- Testimonials -->
      <div class="w-md-80 w-lg-60 text-center mx-auto">
        <div class="mb-4">
          <blockquote class="h5 text-secondary">We are incredibly impressed with Space and how well it supports its customers with amazing products and services.</blockquote>
        </div>
        <img class="u-md-avatar rounded-circle mb-2 mx-auto" src="../assets/img/100x100/img1.jpg" alt="Image Description">
        <h4 class="h6 mb-0">Maria Muszynska</h4>
        <p class="small">Google</p>
      </div>
      <!-- End Testimonials -->
    </div>

    <div class="js-slide">
      <!-- Testimonials -->
      <div class="w-md-80 w-lg-60 text-center mx-auto">
        <div class="mb-4">
          <blockquote class="h5 text-secondary">Space brings so many benefits to any team that does anything following a process.</blockquote>
        </div>
        <img class="u-md-avatar rounded-circle mb-2 mx-auto" src="../assets/img/100x100/img2.jpg" alt="Image Description">
        <h4 class="h6 mb-0">Massalha Shady</h4>
        <p class="small">Apple</p>
      </div>
      <!-- End Testimonials -->
    </div>

    <div class="js-slide">
      <!-- Testimonials -->
      <div class="w-md-80 w-lg-60 text-center mx-auto">
        <div class="mb-4">
          <blockquote class="h5 text-secondary">The template is really nice and offers quite a large set of options. It's beautiful and the coding is done quickly and seamlessly. Thank you!</blockquote>
        </div>
        <img class="u-md-avatar rounded-circle mb-2 mx-auto" src="../assets/img/100x100/img3.jpg" alt="Image Description">
        <h4 class="h6 mb-0">Mark McManus</h4>
        <p class="small">Microsoft</p>
      </div>
      <!-- End Testimonials -->
    </div>

    <div class="js-slide">
      <!-- Testimonials -->
      <div class="w-md-80 w-lg-60 text-center mx-auto">
        <div class="mb-4">
          <blockquote class="h5 text-secondary">One simple subscription gives you access to all our tools, plus so much more.</blockquote>
        </div>
        <img class="u-md-avatar rounded-circle mb-2 mx-auto" src="../assets/img/100x100/img4.jpg" alt="Image Description">
        <h4 class="h6 mb-0">Alex Pottorf</h4>
        <p class="small">Github</p>
      </div>
      <!-- End Testimonials -->
    </div>
  </div>
  <!-- End Slick Carousel -->
</div>
Copy

CSS library:

<link rel="stylesheet" href="../../assets/vendor/slick-carousel/slick/slick.css">
Copy

JS library and initialization:

<!-- JS Implementing Plugins -->
<script src="../../assets/vendor/slick-carousel/slick/slick.js"></script>

<!-- JS Space -->
<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>
Copy

Testimonials #3

I love Space! I love the ease of use, I love the fact that I have total creative freedom. The template is really nice and offers quite a large set of options. It's beautiful and the coding is done quickly and seamlessly.
Image Description

Maria Muzynska

We are incredibly impressed with Space and how well it supports its customers with amazing products and services. One simple subscription gives you access to all our tools, plus so much more.
Image Description

Mark McManus

Space brings so many benefits to any team that does anything following a process. It is the easiest way for teams to build cool things work—and get results.
Image Description

Alex Pottorf

The template is really nice and offers quite a large set of options. It's beautiful and the coding is done quickly and seamlessly. I love Space! I love the ease of use, I love the fact that I have total creative freedom. We are incredibly impressed with Space and how well it supports its customers with amazing products and services.
Image Description

Charlotte Moore

One simple subscription gives you access to all our tools, plus so much more. Space brings so many benefits to any team that does anything following a process. It is the easiest way for teams to build cool things work—and get results.
Image Description

Ella Brown

Just Wow! Space brings so many benefits to any team that does anything following a process. It is the easiest way for teams to build cool things work—and get results.
Image Description

Markus Brown

HTML:

<!-- Testimonials -->
<div class="bg-gray-100">
  <div class="container space-2 space-3--lg">
    <div class="card-mb card-sm-columns card-sm-2-count card-lg-3-count">
      <!-- Testimonials -->
      <article class="card rounded mb-3">
        <div class="card-body p-5">
          <blockquote class="text-secondary">I love Space! I love the ease of use, I love the fact that I have total creative freedom. The template is really nice and offers quite a large set of options. It's beautiful and the coding is done quickly and seamlessly.</blockquote>
        </div>
        <div class="card-footer px-5">
          <div class="media">
            <img class="u-avatar rounded-circle mr-3" src="../assets/img/100x100/img1.jpg" alt="Image Description">
            <div class="media-body">
              <h4 class="h6 mb-0">Maria Muzynska</h4>
              <ul class="list-inline mb-0">
                <li class="list-inline-item text-warning font-size-13">
                  <span class="fa fa-star"></span>
                  <span class="fa fa-star"></span>
                  <span class="fa fa-star"></span>
                  <span class="fa fa-star"></span>
                  <span class="fa fa-star"></span>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </article>
      <!-- End Testimonials -->

      <!-- Testimonials -->
      <article class="card rounded mb-3">
        <div class="card-body p-5">
          <blockquote class="text-secondary">We are incredibly impressed with Space and how well it supports its customers with amazing products and services. One simple subscription gives you access to all our tools, plus so much more.</blockquote>
        </div>
        <div class="card-footer px-5">
          <div class="media">
            <img class="u-avatar rounded-circle mr-3" src="../assets/img/100x100/img4.jpg" alt="Image Description">
            <div class="media-body">
              <h4 class="h6 mb-0">Mark McManus</h4>
              <ul class="list-inline mb-0">
                <li class="list-inline-item text-warning font-size-13">
                  <span class="fa fa-star"></span>
                  <span class="fa fa-star"></span>
                  <span class="fa fa-star"></span>
                  <span class="fa fa-star"></span>
                  <span class="fa fa-star"></span>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </article>
      <!-- End Testimonials -->

      <!-- Testimonials -->
      <article class="card rounded mb-3">
        <div class="card-body p-5">
          <blockquote class="text-secondary">Space brings so many benefits to any team that does anything following a process. It is the easiest way for teams to build cool things work—and get results.</blockquote>
        </div>
        <div class="card-footer px-5">
          <div class="media">
            <img class="u-avatar rounded-circle mr-3" src="../assets/img/100x100/img3.jpg" alt="Image Description">
            <div class="media-body">
              <h4 class="h6 mb-0">Alex Pottorf</h4>
              <ul class="list-inline mb-0">
                <li class="list-inline-item text-warning font-size-13">
                  <span class="fa fa-star"></span>
                  <span class="fa fa-star"></span>
                  <span class="fa fa-star"></span>
                  <span class="fa fa-star"></span>
                  <span class="fa fa-star"></span>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </article>
      <!-- End Testimonials -->

      <!-- Testimonials -->
      <article class="card rounded mb-3">
        <div class="card-body p-5">
          <blockquote class="text-secondary">The template is really nice and offers quite a large set of options. It's beautiful and the coding is done quickly and seamlessly. I love Space! I love the ease of use, I love the fact that I have total creative freedom. We are incredibly impressed with Space and how well it supports its customers with amazing products and services.</blockquote>
        </div>
        <div class="card-footer px-5">
          <div class="media">
            <img class="u-avatar rounded-circle mr-3" src="../assets/img/100x100/img2.jpg" alt="Image Description">
            <div class="media-body">
              <h4 class="h6 mb-0">Charlotte Moore</h4>
              <ul class="list-inline mb-0">
                <li class="list-inline-item text-warning font-size-13">
                  <span class="fa fa-star"></span>
                  <span class="fa fa-star"></span>
                  <span class="fa fa-star"></span>
                  <span class="fa fa-star"></span>
                  <span class="fa fa-star"></span>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </article>
      <!-- End Testimonials -->

      <!-- Testimonials -->
      <article class="card rounded mb-3">
        <div class="card-body p-5">
          <blockquote class="text-secondary">One simple subscription gives you access to all our tools, plus so much more. Space brings so many benefits to any team that does anything following a process. It is the easiest way for teams to build cool things work—and get results.</blockquote>
        </div>
        <div class="card-footer px-5">
          <div class="media">
            <img class="u-avatar rounded-circle mr-3" src="../assets/img/100x100/img14.jpg" alt="Image Description">
            <div class="media-body">
              <h4 class="h6 mb-0">Ella Brown</h4>
              <ul class="list-inline mb-0">
                <li class="list-inline-item text-warning font-size-13">
                  <span class="fa fa-star"></span>
                  <span class="fa fa-star"></span>
                  <span class="fa fa-star"></span>
                  <span class="fa fa-star"></span>
                  <span class="fa fa-star"></span>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </article>
      <!-- End Testimonials -->

      <!-- Testimonials -->
      <article class="card rounded mb-3">
        <div class="card-body p-5">
          <blockquote class="text-secondary">Just Wow! Space brings so many benefits to any team that does anything following a process. It is the easiest way for teams to build cool things work—and get results.</blockquote>
        </div>
        <div class="card-footer px-5">
          <div class="media">
            <img class="u-avatar rounded-circle mr-3" src="../assets/img/100x100/img15.jpg" alt="Image Description">
            <div class="media-body">
              <h4 class="h6 mb-0">Markus Brown</h4>
              <ul class="list-inline mb-0">
                <li class="list-inline-item text-warning font-size-13">
                  <span class="fa fa-star"></span>
                  <span class="fa fa-star"></span>
                  <span class="fa fa-star"></span>
                  <span class="fa fa-star"></span>
                  <span class="fa fa-star"></span>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </article>
      <!-- End Testimonials -->
    </div>
  </div>
</div>
<!-- End Testimonials -->
Copy

Testimonials #4

Image Description

Maria Muszynska

"The template is really nice and offers quite a large set of options."

Image Description

Alex Pottorf

"It's beautiful and the coding is done quickly and seamlessly."

HTML:

<div class="row justify-content-lg-between">
  <div class="col-md-5 mb-5 mb-md-0">
    <!-- Review -->
    <div class="media">
      <img class="u-avatar rounded-circle mr-3" src="../assets/img/100x100/img1.jpg" alt="Image Description">
      <div class="media-body">
        <h4 class="h6 mb-0">Maria Muszynska</h4>
        <p class="text-muted">"The template is really nice and offers quite a large set of options."</p>
      </div>
    </div>
    <!-- End Review -->
  </div>

  <div class="col-md-5">
    <!-- Review -->
    <div class="media">
      <img class="u-avatar rounded-circle mr-3" src="../assets/img/100x100/img4.jpg" alt="Image Description">
      <div class="media-body">
        <h4 class="h6 mb-0">Alex Pottorf</h4>
        <p class="text-muted">"It's beautiful and the coding is done quickly and seamlessly."</p>
      </div>
    </div>
    <!-- End Review -->
  </div>
</div>
Copy

Testimonials #5

Image Description

Maria Muzynska

"I love Space! I love the ease of use, I love the fact that I have total creative freedom. The template is really nice and offers quite a large set of options. It's beautiful and the coding is done quickly and seamlessly."
Image Description

Markus Brown

"We are incredibly impressed with Space and how well it supports its customers with amazing products and services. One simple subscription gives you access to all our tools, plus so much more."

HTML:

<!-- Testimonials Section -->
<div class="container space-2 space-3--lg">
  <div class="row justify-content-lg-center">
    <div class="col-md-6 col-lg-5 mb-7 mb-md-0">
      <!-- Testimonials -->
      <div class="text-center px-lg-4">
        <div class="mb-2">
          <img class="u-avatar rounded-circle mx-auto mb-2" src="../assets/img/100x100/img1.jpg" alt="Image Description">
          <h4 class="h6">Maria Muzynska</h4>
        </div>
        <blockquote class="text-secondary mb-0">"I love Space! I love the ease of use, I love the fact that I have total creative freedom. The template is really nice and offers quite a large set of options. It's beautiful and the coding is done quickly and seamlessly."</blockquote>
      </div>
      <!-- End Testimonials -->
    </div>

    <div class="col-md-6 col-lg-5">
      <!-- Testimonials -->
      <div class="text-center px-lg-4">
        <div class="mb-2">
          <img class="u-avatar rounded-circle mx-auto mb-2" src="../assets/img/100x100/img15.jpg" alt="Image Description">
          <h4 class="h6">Markus Brown</h4>
        </div>
        <blockquote class="text-secondary mb-0">"We are incredibly impressed with Space and how well it supports its customers with amazing products and services. One simple subscription gives you access to all our tools, plus so much more."</blockquote>
      </div>
      <!-- End Testimonials -->
    </div>
  </div>
</div>
<!-- End Testimonials Section -->
Copy

Testimonials #6

I love Space! I love the ease of use, I love the fact that I have total creative freedom. The template is really nice and offers quite a large set of options. It's beautiful and the coding is done quickly and seamlessly.
Image Description

Maria Muzynska

reacted on Twitter
We are incredibly impressed with Space and how well it supports its customers with amazing products and services. One simple subscription gives you access to all our tools, plus so much more.
Image Description

Mark McManus

reacted on Facebook
One simple subscription gives you access to all our tools, plus so much more. Space brings so many benefits to any team that does anything following a process.
Image Description

Alex Pottorf

reacted on Twitter

HTML:

<!-- Testimonials Section -->
<div class="bg-gray-100">
  <div class="container space-2 space-3--lg">
    <div class="card-deck d-block d-lg-flex">
      <!-- Testimonials -->
      <div class="card card-frame mb-5 mb-lg-0">
        <div class="card-body p-5">
          <blockquote class="text-secondary mb-0">I love Space! I love the ease of use, I love the fact that I have total creative freedom. The template is really nice and offers quite a large set of options. It's beautiful and the coding is done quickly and seamlessly.</blockquote>
        </div>
        <div class="card-footer">
          <div class="media align-items-end">
            <div class="position-relative mr-4">
              <img class="u-md-avatar rounded-circle" src="../assets/img/100x100/img1.jpg" alt="Image Description">
              <span class="badge badge-sm badge-primary badge-icon badge-pos badge-pos--bottom-right-minus-1 rounded-circle">
                <span class="fab fa-twitter"></span>
              </span>
            </div>
            <div class="media-body">
              <h4 class="h6 mb-0">Maria Muzynska</h4>
              <span class="d-block text-muted font-size-14 font-weight-normal">reacted on <a href="#">Twitter</a></span>
            </div>
          </div>
        </div>
      </div>
      <!-- End Testimonials -->

      <!-- Testimonials -->
      <div class="card card-frame mb-5 mb-lg-0">
        <div class="card-body p-5">
          <blockquote class="text-secondary mb-0">We are incredibly impressed with Space and how well it supports its customers with amazing products and services. One simple subscription gives you access to all our tools, plus so much more.</blockquote>
        </div>
        <div class="card-footer">
          <div class="media align-items-end">
            <div class="position-relative mr-4">
              <img class="u-md-avatar rounded-circle" src="../assets/img/100x100/img4.jpg" alt="Image Description">
              <span class="badge badge-sm badge-primary badge-icon badge-pos badge-pos--bottom-right-minus-1 rounded-circle">
                <span class="fab fa-facebook-f"></span>
              </span>
            </div>
            <div class="media-body">
              <h4 class="h6 mb-0">Mark McManus</h4>
              <span class="d-block text-muted font-size-14 font-weight-normal">reacted on <a href="#">Facebook</a></span>
            </div>
          </div>
        </div>
      </div>
      <!-- End Testimonials -->

      <!-- Testimonials -->
      <div class="card card-frame">
        <div class="card-body p-5">
          <blockquote class="text-secondary mb-0">One simple subscription gives you access to all our tools, plus so much more. Space brings so many benefits to any team that does anything following a process.</blockquote>
        </div>
        <div class="card-footer">
          <div class="media align-items-end">
            <div class="position-relative mr-4">
              <img class="u-md-avatar rounded-circle" src="../assets/img/100x100/img15.jpg" alt="Image Description">
              <span class="badge badge-sm badge-primary badge-icon badge-pos badge-pos--bottom-right-minus-1 rounded-circle">
                <span class="fab fa-twitter"></span>
              </span>
            </div>
            <div class="media-body">
              <h4 class="h6 mb-0">Alex Pottorf</h4>
              <span class="d-block text-muted font-size-14 font-weight-normal">reacted on <a href="#">Twitter</a></span>
            </div>
          </div>
        </div>
      </div>
      <!-- End Testimonials -->
    </div>
  </div>
</div>
<!-- End Testimonials Section -->
Copy

Testimonials #7

The template is really nice and offers quite a large set of options. It's beautiful and the coding is done quickly and seamlessly. I love Space! I love the ease of use, I love the fact that I have total creative freedom. We are incredibly impressed with Space and how well it supports its customers with amazing products and services.
Image Description

Maria Muszynska

Senior Front-end developer at Google

HTML:

<!-- Testimonials Section -->
<div class="container">
  <div class="w-md-80 w-lg-60 text-center mx-auto">
    <!-- SVG Quote -->
    <figure class="mx-auto mb-4" style="width: 50px;">
      <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
         viewBox="0 0 8 8" style="enable-background:new 0 0 8 8;" xml:space="preserve">
        <path fill="#e3e6f0" 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 -->

    <div class="mb-5">
      <blockquote class="h5 text-secondary">The template is really nice and offers quite a large set of options. It's beautiful and the coding is done quickly and seamlessly. I love Space! I love the ease of use, I love the fact that I have total creative freedom. We are incredibly impressed with Space and how well it supports its customers with amazing products and services.</blockquote>
    </div>
    <img class="u-md-avatar rounded-circle mb-3 mx-auto" src="../assets/img/100x100/img1.jpg" alt="Image Description">
    <h4 class="h6 mb-0">Maria Muszynska</h4>
    <p>Senior Front-end developer at Google</p>
  </div>
</div>
<!-- End Testimonials Section -->
Copy

Testimonials #8

Image Description
" It's beautiful and the coding is done quickly and seamlessly. I love Space! I love the ease of use, I love the fact that I have total creative freedom. We are incredibly impressed with Space and how well it supports its customers with amazing products and services. "
Image Description

Charlotte Moore

Front-end developer at Google

SVG Shape

HTML:

<!-- Testimonials -->
<div class="position-relative">
  <div class="w-90 w-sm-75 w-md-100 w-lg-75 pt-md-5 mx-auto">
    <img class="img-fluid w-100" src="../assets/img/500x330/img21.jpg" alt="Image Description">
    <div class="bg-white shadow p-5">
      <blockquote class="text-secondary mb-5">" It's beautiful and the coding is done quickly and seamlessly. I love Space! I love the ease of use, I love the fact that I have total creative freedom. We are incredibly impressed with Space and how well it supports its customers with amazing products and services. "</blockquote>

      <div class="media">
        <img class="u-avatar rounded-circle mr-3" src="../assets/img/100x100/img2.jpg" alt="Image Description">
        <div class="media-body">
          <h4 class="h6 mb-0">Charlotte Moore</h4>
          <p class="mb-0">Front-end developer at Google</p>
        </div>
      </div>
    </div>
  </div>

  <!-- SVG Shape -->
  <div class="w-100 h-100 content-centered z-index-minus-1">
    <img class="img-fluid" src="../assets/svg/shapes/shape1.svg" alt="SVG Shape">
  </div>
  <!-- End SVG Shape -->
</div>
<!-- End Testimonials -->
Copy

Testimonials #9

Space brings so many benefits to any team that does anything following a process. It is the easiest way for teams to build cool things work—and get results.

Mark McManus

Associate Director in Spotify

HTML:

<!-- Testimonials Section -->
<div class="container">
  <div class="bg-purple shadow-lg rounded p-5 p-md-9">
    <div class="position-relative">
      <div class="position-absolute-top-left-0--md">
        <!-- SVG Quote -->
        <figure style="width: 50px;">
          <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
             viewBox="0 0 8 8" style="enable-background:new 0 0 8 8;" xml:space="preserve">
            <path fill="#ffffff" d="M3,1.3C2,1.7,1.2,2.7,1.2,3.6c0,0.2,0,0.4,0.1,0.5c0.2-0.2,0.5-0.3,0.9-0.3c0.8,0,1.5,0.6,1.5,1.5c0,0.9-0.7,1.5-1.5,1.5
              C1.4,6.9,1,6.6,0.7,6.1C0.4,5.6,0.3,4.9,0.3,4.5c0-1.6,0.8-2.9,2.5-3.7L3,1.3z M7.1,1.3c-1,0.4-1.8,1.4-1.8,2.3
              c0,0.2,0,0.4,0.1,0.5c0.2-0.2,0.5-0.3,0.9-0.3c0.8,0,1.5,0.6,1.5,1.5c0,0.9-0.7,1.5-1.5,1.5c-0.7,0-1.1-0.3-1.4-0.8
              C4.4,5.6,4.4,4.9,4.4,4.5c0-1.6,0.8-2.9,2.5-3.7L7.1,1.3z"/>
          </svg>
        </figure>
        <!-- End SVG Quote -->
      </div>

      <div class="pl-md-9 space-1-top">
        <!-- Slick Carousel -->
        <div class="js-slick-carousel u-slick pl-md-4"
           data-infinite="true"
           data-autoplay="true"
           data-speed="5000"
           data-fade="true"
           data-pagi-classes="u-slick__pagination u-slick__pagination--white justify-content-end mt-4 mb-0">
          <div class="js-slide">
            <!-- Testimonials -->
            <blockquote class="h4 text-white font-weight-light mb-5">Space brings so many benefits to any team that does anything following a process. It is the easiest way for teams to build cool things work—and get results.</blockquote>
            <h3 class="h6 text-white mb-0">Mark McManus</h3>
            <span class="d-block text-white-50">Associate Director in Spotify</span>
            <!-- End Testimonials -->
          </div>

          <div class="js-slide">
            <!-- Testimonials -->
            <blockquote class="h4 text-white font-weight-light mb-5">One simple subscription gives you access to all our tools, plus so much more. Space brings so many benefits to any team that does anything following a process. It is the easiest way for teams to build cool things work—and get results.</blockquote>
            <h4 class="h6 text-white mb-0">Charlotte Moore</h4>
            <span class="d-block text-white-50">RISC Programme Director of GitHub</span>
            <!-- End Testimonials -->
          </div>

          <div class="js-slide">
            <!-- Testimonials -->
            <blockquote class="h4 text-white font-weight-light mb-5">Just Wow! Space brings so many benefits to any team that does anything following a process. It is the easiest way for teams to build cool things work—and get results.</blockquote>
            <h4 class="h6 text-white mb-0">Markus Brown</h4>
            <span class="d-block text-white-50">Director at Slack</span>
            <!-- End Testimonials -->
          </div>
        </div>
        <!-- End Slick Carousel -->
      </div>
    </div>
  </div>
</div>
<!-- End Testimonials Section -->
Copy

CSS library:

<link rel="stylesheet" href="../../assets/vendor/slick-carousel/slick/slick.css">
Copy

JS library and initialization:

<!-- JS Implementing Plugins -->
<script src="../../assets/vendor/slick-carousel/slick/slick.js"></script>

<!-- JS Space -->
<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>
Copy

Testimonials #10

"I love Space! I love the ease of use, I love the fact that I have total creative freedom. The template is really nice and offers quite a large set of options. It's beautiful and the coding is done quickly and seamlessly."
Image Description

Maria Muszynska

Senior developer at Google

HTML:

<!-- Slick Carousel - Testimonials -->
<div class="js-slick-carousel u-slick"
     data-fade="true"
     data-autoplay="true"
     data-speed="7500"
     data-pagi-classes="u-slick__pagination justify-content-start mt-7">
  <div class="js-slide">
    <!-- Testimonials -->
    <blockquote class="lead mb-5">"I love Space! I love the ease of use, I love the fact that I have total creative freedom. The template is really nice and offers quite a large set of options. It's beautiful and the coding is done quickly and seamlessly."</blockquote>
    <div class="media">
      <img class="u-avatar rounded-circle mr-3" src="../assets/img/100x100/img1.jpg" alt="Image Description">
      <div class="media-body">
        <h3 class="h6 mb-0">Maria Muszynska</h3>
        <span class="text-secondary">Senior developer at <a href="#">Google</a></span>
      </div>
    </div>
    <!-- End Testimonials -->
  </div>

  <div class="js-slide">
    <!-- Testimonials -->
    <blockquote class="lead mb-5">"We are incredibly impressed with Space and how well it supports its customers with amazing products and services. One simple subscription gives you access to all our tools, plus so much more."</blockquote>
    <div class="media">
      <img class="u-avatar rounded-circle mr-3" src="../assets/img/100x100/img4.jpg" alt="Image Description">
      <div class="media-body">
        <h3 class="h6 mb-0">Mark McManus</h3>
        <span class="text-secondary">Software engineer at <a href="#">Slack</a></span>
      </div>
    </div>
    <!-- End Testimonials -->
  </div>

  <div class="js-slide">
    <!-- Testimonials -->
    <blockquote class="lead mb-5">"One simple subscription gives you access to all our tools, plus so much more. Space brings so many benefits to any team that does anything following a process. It is the easiest way for teams to build cool things work—and get results."</blockquote>
    <div class="media">
      <img class="u-avatar rounded-circle mr-3" src="../assets/img/100x100/img14.jpg" alt="Image Description">
      <div class="media-body">
        <h3 class="h6 mb-0">Ella Brown</h3>
        <span class="text-secondary">Head of IT department at <a href="#">Apple</a></span>
      </div>
    </div>
    <!-- End Testimonials -->
  </div>
</div>
<!-- End Slick Carousel - Testimonials -->
Copy

CSS library:

<link rel="stylesheet" href="../../assets/vendor/slick-carousel/slick/slick.css">
Copy

JS library and initialization:

<!-- JS Implementing Plugins -->
<script src="../../assets/vendor/slick-carousel/slick/slick.js"></script>

<!-- JS Space -->
<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>
Copy

Testimonials #11

"I love Space! I love the ease of use, I love the fact that I have total creative freedom. The template is really nice and offers quite a large set of options. It's beautiful and the coding is done quickly and seamlessly."
Image Description

Maria Muszynska

Senior developer at Google
Image Description

HTML:

<!-- Testimonials Section -->
<div class="dzsparallaxer auto-init height-is-based-on-content use-loading mode-scroll bg-white" data-options='{direction: "reverse", animation_duration: "200"}'>
  <div class="container">
    <div class="row justify-content-lg-between align-items-md-center">
      <div class="col-md-6 order-md-2 mb-5 mb-md-0">
        <div class="pl-md-4">
          <!-- Review -->
          <blockquote class="lead mb-5">"I love Space! I love the ease of use, I love the fact that I have total creative freedom. The template is really nice and offers quite a large set of options. It's beautiful and the coding is done quickly and seamlessly."</blockquote>
          <div class="media">
            <img class="u-avatar rounded-circle mr-3" src="../assets/img/100x100/img1.jpg" alt="Image Description">
            <div class="media-body">
              <h4 class="h6 mb-0">Maria Muszynska</h4>
              <span class="text-secondary">Senior developer at <a href="#">Google</a></span>
            </div>
          </div>
          <!-- End Review -->
        </div>
      </div>

      <div class="col-md-6 order-md-1">
        <!-- Image -->
        <div data-parallaxanimation='[{property: "transform", value:" translate3d(0,{{val}}rem,0)", initial:"4", mid:"0", final:"-4"}]'>
          <img class="img-fluid border rounded shadow-sm" src="../assets/img/753x470/img5.jpg" alt="Image Description">
        </div>
        <!-- End Image -->
      </div>
    </div>
  </div>
</div>
<!-- End Testimonials Section -->
Copy

CSS library:

<link rel="stylesheet" href="../../assets/vendor/dzsparallaxer/dzsparallaxer.css">
Copy

JS library and initialization:

<!-- JS Implementing Plugins -->
<script src="../../assets/vendor/dzsparallaxer/dzsparallaxer.js"></script>
</script>
Copy