Testimonials

eCommerce testimonials

Testimonials component designed for eCommerce projects.


Testimonial basic example

Sample
Maria Dolores

Web Designer


Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod eos id officiis hic tenetur quae quaerat ad velit ab hic tenetur.

Sample
Carmen Martinez

Frontend Developer


Sunt laudantium veritatis doloremque tempore, ipsam soluta doloribus praesentium modi totam repudiandae incidunt.

Sample
Hugo Romero

Digital Marketing Analyst


Blanditiis esse impedit, adipisci cum ratione itaque rem labore eos quos aliquam, est inventore repellat vel aut necessitatibus.



          <!--Section: Block Content-->
          <section>

            <!-- Grid row -->
            <div class="row">

              <!-- Grid column -->
              <div class="col-md-4 mb-4">

                <!-- Card -->
                <div class="">

                  <div class="view z-depth-1 rounded-circle avatar-sm mx-auto">
                    <img class="img-fluid w-100" src="https://mdbootstrap.com/img/Photos/Avatars/img%20(1).jpg"
                      alt="Sample">
                  </div>

                  <div class="text-center pt-4">

                    <h5>Maria Dolores</h5>
                    <p class="mb-2 text-muted text-uppercase small">Web Designer</p>
                    <ul class="rating">
                      <li>
                        <i class="fas fa-star fa-sm text-primary"></i>
                      </li>
                      <li>
                        <i class="fas fa-star fa-sm text-primary"></i>
                      </li>
                      <li>
                        <i class="fas fa-star fa-sm text-primary"></i>
                      </li>
                      <li>
                        <i class="fas fa-star fa-sm text-primary"></i>
                      </li>
                      <li>
                        <i class="far fa-star fa-sm text-primary"></i>
                      </li>
                    </ul>
                    <hr>
                    <p class="mb-0">
                      <i class="fas fa-quote-left pr-2"></i>
                      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod
                      eos id officiis hic tenetur quae quaerat ad velit ab hic tenetur.
                    </p>
                  </div>

                </div>
                <!-- Card -->

              </div>
              <!-- Grid column -->

              <!-- Grid column -->
              <div class="col-md-4 mb-4">

                <!-- Card -->
                <div class="">

                  <div class="view z-depth-1 rounded-circle avatar-sm mx-auto">
                    <img class="img-fluid w-100" src="https://mdbootstrap.com/img/Photos/Avatars/img%20(2).jpg"
                      alt="Sample">
                  </div>

                  <div class="text-center pt-4">

                    <h5>Carmen Martinez</h5>
                    <p class="mb-2 text-muted text-uppercase small">Frontend Developer</p>
                    <ul class="rating">
                      <li>
                        <i class="fas fa-star fa-sm text-primary"></i>
                      </li>
                      <li>
                        <i class="fas fa-star fa-sm text-primary"></i>
                      </li>
                      <li>
                        <i class="fas fa-star fa-sm text-primary"></i>
                      </li>
                      <li>
                        <i class="fas fa-star fa-sm text-primary"></i>
                      </li>
                      <li>
                        <i class="fas fa-star fa-sm text-primary"></i>
                      </li>
                    </ul>
                    <hr>
                    <p class="mb-0">
                      <i class="fas fa-quote-left pr-2"></i>
                      Sunt laudantium veritatis doloremque tempore, ipsam soluta doloribus praesentium modi totam
                      repudiandae incidunt.
                    </p>
                  </div>

                </div>
                <!-- Card -->

              </div>
              <!-- Grid column -->

              <!-- Grid column -->
              <div class="col-md-4 mb-4">

                <!-- Card -->
                <div class="">

                  <div class="view z-depth-1 rounded-circle avatar-sm mx-auto">
                    <img class="img-fluid w-100" src="https://mdbootstrap.com/img/Photos/Avatars/img%20(3).jpg"
                      alt="Sample">
                  </div>

                  <div class="text-center pt-4">

                    <h5>Hugo Romero</h5>
                    <p class="mb-2 text-muted text-uppercase small">Digital Marketing Analyst</p>
                    <ul class="rating">
                      <li>
                        <i class="fas fa-star fa-sm text-primary"></i>
                      </li>
                      <li>
                        <i class="fas fa-star fa-sm text-primary"></i>
                      </li>
                      <li>
                        <i class="fas fa-star fa-sm text-primary"></i>
                      </li>
                      <li>
                        <i class="fas fa-star-half-alt fa-sm text-primary"></i>
                      </li>
                      <li>
                        <i class="far fa-star fa-sm text-primary"></i>
                      </li>
                    </ul>
                    <hr>
                    <p class="mb-0">
                      <i class="fas fa-quote-left pr-2"></i>
                      Blanditiis esse impedit, adipisci cum ratione itaque rem labore eos
                      quos aliquam, est inventore repellat vel aut necessitatibus.
                    </p>
                  </div>

                </div>
                <!-- Card -->

              </div>
              <!-- Grid column -->

            </div>
            <!-- Grid row -->

          </section>
          <!--Section: Block Content-->

        

Full version

Sample
Maria Dolores

Web Designer


Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod eos id officiis hic tenetur quae quaerat ad velit ab hic tenetur.



          <!-- Card -->
          <div class="">

            <div class="view z-depth-1 rounded-circle avatar-sm mx-auto">
              <img class="img-fluid w-100" src="https://mdbootstrap.com/img/Photos/Avatars/img%20(1).jpg" alt="Sample">
            </div>

            <div class="text-center pt-4">

              <h5>Maria Dolores</h5>
              <p class="mb-2 text-muted text-uppercase small">Web Designer</p>
              <ul class="rating">
                <li>
                  <i class="fas fa-star fa-sm text-primary"></i>
                </li>
                <li>
                  <i class="fas fa-star fa-sm text-primary"></i>
                </li>
                <li>
                  <i class="fas fa-star fa-sm text-primary"></i>
                </li>
                <li>
                  <i class="fas fa-star fa-sm text-primary"></i>
                </li>
                <li>
                  <i class="far fa-star fa-sm text-primary"></i>
                </li>
              </ul>
              <hr>
              <p class="mb-0">
                <i class="fas fa-quote-left pr-2"></i>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod
                eos id officiis hic tenetur quae quaerat ad velit ab hic tenetur.
              </p>
            </div>

          </div>
          <!-- Card -->

        

Minimalist version

Sample
Maria Dolores

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod eos id officiis hic tenetur quae quaerat ad velit ab hic tenetur.



          <!-- Card -->
          <div class="">

            <div class="view z-depth-1 rounded-circle avatar-sm mx-auto">
              <img class="img-fluid w-100" src="https://mdbootstrap.com/img/Photos/Avatars/img%20(1).jpg" alt="Sample">
            </div>

            <div class="text-center pt-4">

              <h5>Maria Dolores</h5>
              <p class="mb-0">
                <i class="fas fa-quote-left pr-2"></i>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod
                eos id officiis hic tenetur quae quaerat ad velit ab hic tenetur.
              </p>
            </div>

          </div>
          <!-- Card -->

        

Supported content

Image / avatar

Sample


            <div class="view z-depth-1 rounded-circle avatar-sm mx-auto">
              <img class="img-fluid w-100" src="https://mdbootstrap.com/img/Photos/Avatars/img%20(1).jpg" alt="Sample">
            </div>

          

Title

Maria Dolores


            <h5>Maria Dolores</h5>

          

Subtitle

Web Designer



            <p class="mb-2 text-muted text-uppercase small">Web Designer</p>

          

Rating



            <ul class="rating">
              <li>
                <i class="fas fa-star fa-sm text-primary"></i>
              </li>
              <li>
                <i class="fas fa-star fa-sm text-primary"></i>
              </li>
              <li>
                <i class="fas fa-star fa-sm text-primary"></i>
              </li>
              <li>
                <i class="fas fa-star fa-sm text-primary"></i>
              </li>
              <li>
                <i class="far fa-star fa-sm text-primary"></i>
              </li>
            </ul>

          

Divider

Some content here


Some content here



            <!-- Divider -->
            <hr>

          

Paragraph / quotation

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod eos id officiis hic tenetur quae quaerat ad velit ab hic tenetur.



            <p class="mb-0">
              <i class="fas fa-quote-left pr-2"></i>
              Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod
              eos id officiis hic tenetur quae quaerat ad velit ab hic tenetur.
            </p>

          

Adding shadows

Sample
Maria Dolores

Web Designer


Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod eos id officiis hic tenetur quae quaerat ad velit ab hic tenetur.



          <!-- Card -->
          <div class="card">

            <div class="view z-depth-1 rounded-circle avatar-sm mx-auto mt-4">
              <img class="img-fluid w-100" src="https://mdbootstrap.com/img/Photos/Avatars/img%20(1).jpg" alt="Sample">
            </div>

            <div class="card-body text-center">

              <h5>Maria Dolores</h5>
              <p class="mb-2 text-muted text-uppercase small">Web Designer</p>
              <ul class="rating">
                <li>
                  <i class="fas fa-star fa-sm text-primary"></i>
                </li>
                <li>
                  <i class="fas fa-star fa-sm text-primary"></i>
                </li>
                <li>
                  <i class="fas fa-star fa-sm text-primary"></i>
                </li>
                <li>
                  <i class="fas fa-star fa-sm text-primary"></i>
                </li>
                <li>
                  <i class="far fa-star fa-sm text-primary"></i>
                </li>
              </ul>
              <hr>
              <p class="mb-0">
                <i class="fas fa-quote-left pr-2"></i>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod
                eos id officiis hic tenetur quae quaerat ad velit ab hic tenetur.
              </p>
            </div>

          </div>
          <!-- Card -->