Testimonials

HTML
Pug

<!-- Testimonial Left Aligned -->
<div class="blockquote testimonial">
  <p>Lorem ipsum dolor sit amet...</p>
  <footer class="testimonial-footer">
    <div class="testimonial-avatar">
      <img src="path-to-imageg" alt="Testimonial Author Avatar"/>
    </div>
    <div class="d-table-cell align-middle pl-2">
      <div class="blockquote-footer">
        Barbara Palson
        <cite>Graphic Designer</cite>
      </div>
    </div>
  </footer>
</div>

<!-- Testimonial Center Aligned -->
<div class="blockquote testimonial text-center">
  <p>Lorem ipsum dolor sit amet...</p>
  <footer class="testimonial-footer">
    <div class="testimonial-avatar">
      <img src="path-to-image" alt="Testimonial Author Avatar"/>
    </div>
    <div class="d-table-cell align-middle pl-2">
      <div class="blockquote-footer">
        Hinata Nakamura
        <cite>Financial Director</cite>
      </div>
    </div>
  </footer>
</div>

<!-- Testimonial Right Aligned -->
<div class="blockquote testimonial text-right">
  <p>Lorem ipsum dolor sit amet...</p>
  <footer class="testimonial-footer">
    <div class="d-table-cell align-middle pr-2">
      <div class="blockquote-footer">
        Michael Davis
        <cite>Co-Founder, CEO</cite>
      </div>
    </div>
    <div class="testimonial-avatar">
      <img src="path-to-iamge" alt="Testimonial Author Avatar"/>
    </div>
  </footer>
</div>

//- Testimonial Left Aligned
.blockquote.testimonial
  p Lorem ipsum dolor sit amet...
  footer.testimonial-footer
    .testimonial-avatar
      +image("path-to-image", "Testimonial Author Avatar")
    .d-table-cell.align-middle.pl-2
      .blockquote-footer
        | Barbara Palson
        cite Graphic Designer

//- Testimonial Center Aligned
.blockquote.testimonial.text-center
  p Lorem ipsum dolor sit amet...
  footer.testimonial-footer
    .testimonial-avatar
      +image("path-to-image", "Testimonial Author Avatar")
    .d-table-cell.align-middle.pl-2
      .blockquote-footer
        | Hinata Nakamura
        cite Financial Director

//- Testimonial Right Aligned
.blockquote.testimonial.text-right
  p Lorem ipsum dolor sit amet...
  footer.testimonial-footer
    .d-table-cell.align-middle.pr-2
      .blockquote-footer
        | Michael Davis
        cite Co-Founder, CEO
    .testimonial-avatar
      +image("path-to-image", "Testimonial Author Avatar")

HTML
Pug

<!-- Testimonials Inside Carousel. Single Item -->
<div class="owl-carousel testimonials-carousel" data-owl-carousel='{ "nav": false, "dots": true, "loop": true }'>

  <!-- Testimonial -->
  <div class="blockquote testimonial text-center">
    <p>Lorem ipsum dolor sit amet...</p>
    <footer class="testimonial-footer">
      <div class="testimonial-avatar">
        <img src="path-to-image" alt="Testimonial Author Avatar"/>
      </div>
      <div class="d-table-cell align-middle pl-2">
        <div class="blockquote-footer">
          Barbara Palson
          <cite>Graphic Designer</cite>
        </div>
      </div>
    </footer>
  </div>

  <!-- Testimonial -->
  <div class="blockquote testimonial text-center">
    <p>Lorem ipsum dolor sit amet...</p>
    <footer class="testimonial-footer">
      <div class="testimonial-avatar">
        <img src="path-to-image" alt="Testimonial Author Avatar"/>
      </div>
      <div class="d-table-cell align-middle pl-2">
        <div class="blockquote-footer">
          Hinata Nakamura
          <cite>Financial Director</cite>
        </div>
      </div>
    </footer>
  </div>

  <!-- Testimonial -->
  <div class="blockquote testimonial text-center">
    <p>Lorem ipsum dolor sit amet...</p>
    <footer class="testimonial-footer">
      <div class="testimonial-avatar">
        <img src="path-to-image" alt="Testimonial Author Avatar"/>
      </div>
      <div class="d-table-cell align-middle pl-2">
        <div class="blockquote-footer">
          Michael Davis
          <cite>Co-Founder, CEO</cite>
        </div>
      </div>
    </footer>
  </div>
</div>

//- Testimonials Inside Carousel. Single Item
.owl-carousel.testimonials-carousel(data-owl-carousel='{ "nav": false, "dots": true, "loop": true }')

  //- Testimonial
  .blockquote.testimonial.text-center
    p Lorem ipsum dolor sit amet...
    footer.testimonial-footer
      .testimonial-avatar
        +image("path-to-image", "Testimonial Author Avatar")
      .d-table-cell.align-middle.pl-2
        .blockquote-footer
          | Barbara Palson
          cite Graphic Designer

  //- Testimonial
  .blockquote.testimonial.text-center
    p Lorem ipsum dolor sit amet...
    footer.testimonial-footer
      .testimonial-avatar
        +image("path-to-image", "Testimonial Author Avatar")
      .d-table-cell.align-middle.pl-2
        .blockquote-footer
          | Hinata Nakamura
          cite Financial Director

  //- Testimonial
  .blockquote.testimonial.text-center
    p Lorem ipsum dolor sit amet...
    footer.testimonial-footer
      .testimonial-avatar
        +image("path-to-image", "Testimonial Author Avatar")
      .d-table-cell.align-middle.pl-2
        .blockquote-footer
          | Michael Davis
          cite Co-Founder, CEO

HTML
Pug

<!-- Testimonials Inside Carousel. Multiple Items -->
<div class="owl-carousel testimonials-carousel" data-owl-carousel='{ "nav": false, "dots": true, "loop": true, "margin": -15, "autoplay": true, "autoplayTimeout": 4000, "responsive": {"0":{"items":1},"630":{"items":2},"991":{"items":2},"1200":{"items":3}} }'>

  <!-- Testimonial -->
  <div class="blockquote testimonial">
    <p>Lorem ipsum dolor sit amet...</p>
    <footer class="testimonial-footer">
      <div class="testimonial-avatar">
        <img src="path-to-image" alt="Testimonial Author Avatar"/>
      </div>
      <div class="d-table-cell align-middle pl-2">
        <div class="blockquote-footer">
          Barbara Palson
          <cite>Graphic Designer</cite>
        </div>
      </div>
    </footer>
  </div>

  <!-- Testimonial -->
  <div class="blockquote testimonial">
    <p>Lorem ipsum dolor sit amet...</p>
    <footer class="testimonial-footer">
      <div class="testimonial-avatar">
        <img src="path-to-image" alt="Testimonial Author Avatar"/>
      </div>
      <div class="d-table-cell align-middle pl-2">
        <div class="blockquote-footer">
          Hinata Nakamura
          <cite>Financial Director</cite>
        </div>
      </div>
    </footer>
  </div>

  <!-- Testimonial -->
  <div class="blockquote testimonial">
    <p>Lorem ipsum dolor sit amet...</p>
    <footer class="testimonial-footer">
      <div class="testimonial-avatar">
        <img src="path-to-image" alt="Testimonial Author Avatar"/>
      </div>
      <div class="d-table-cell align-middle pl-2">
        <div class="blockquote-footer">
          Michael Davis
          <cite>Co-Founder, CEO</cite>
        </div>
      </div>
    </footer>
  </div>

  <!-- Testimonial -->
  <div class="blockquote testimonial">
    <p>Lorem ipsum dolor sit amet...</p>
    <footer class="testimonial-footer">
      <div class="testimonial-avatar">
        <img src="path-to-image" alt="Testimonial Author Avatar"/>
      </div>
      <div class="d-table-cell align-middle pl-2">
        <div class="blockquote-footer">
          Sophia Johnson
          <cite>Marketing Manager</cite>
        </div>
      </div>
    </footer>
  </div>

  <!-- Testimonial -->
  <div class="blockquote testimonial">
    <p>Lorem ipsum dolor sit amet...</p>
    <footer class="testimonial-footer">
      <div class="testimonial-avatar">
        <img src="path-to-image" alt="Testimonial Author Avatar"/>
      </div>
      <div class="d-table-cell align-middle pl-2">
        <div class="blockquote-footer">
          Christopher Lee
          <cite>Marketing Manager</cite>
        </div>
      </div>
    </footer>
  </div>
</div>

//- Testimonials Inside Carousel. Multiple Items
.owl-carousel.testimonials-carousel(data-owl-carousel='{ "nav": false, "dots": true, "loop": true, "margin": -15, "autoplay": true, "autoplayTimeout": 4000, "responsive": {"0":{"items":1},"630":{"items":2},"991":{"items":2},"1200":{"items":3}} }')

  //- Testimonial
  .blockquote.testimonial
    p Lorem ipsum dolor sit amet...
    footer.testimonial-footer
      .testimonial-avatar
        +image("path-to-image", "Testimonial Author Avatar")
      .d-table-cell.align-middle.pl-2
        .blockquote-footer
          | Barbara Palson
          cite Graphic Designer
  
  //- Testimonial
  .blockquote.testimonial
    p Lorem ipsum dolor sit amet...
    footer.testimonial-footer
      .testimonial-avatar
        +image("path-to-image", "Testimonial Author Avatar")
      .d-table-cell.align-middle.pl-2
        .blockquote-footer
          | Hinata Nakamura
          cite Financial Director

  //- Testimonial
  .blockquote.testimonial
    p Lorem ipsum dolor sit amet...
    footer.testimonial-footer
      .testimonial-avatar
        +image("path-to-image", "Testimonial Author Avatar")
      .d-table-cell.align-middle.pl-2
        .blockquote-footer
          | Michael Davis
          cite Co-Founder, CEO
        
  //- Testimonial
  .blockquote.testimonial
    p Lorem ipsum dolor sit amet...
    footer.testimonial-footer
      .testimonial-avatar
        +image("path-to-image", "Testimonial Author Avatar")
      .d-table-cell.align-middle.pl-2
        .blockquote-footer
          | Sophia Johnson
          cite Marketing Manager
  
  //- Testimonial
  .blockquote.testimonial
    p Lorem ipsum dolor sit amet...
    footer.testimonial-footer
      .testimonial-avatar
        +image("path-to-image", "Testimonial Author Avatar")
      .d-table-cell.align-middle.pl-2
        .blockquote-footer
          | Christopher Lee
          cite Marketing Manager

Testimonials

Alignment

Inside carousel. Single item

Inside carousel. Multiple items

Testimonials

Code

Code

Code

Alignment

Inside carousel. Single item

Inside carousel. Multiple items