Testimonials

Bubbles

Light Dark

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.

Michael Doe

<blockquote class="blockquote blockquote-2 boxed">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</p>
  <footer class="blockquote-footer">Michael Doe</footer>
</blockquote>

You can place bubbles inside <div class="blockquote-list">...<div> to make them look like in example.

component

code

reference

Review

7.0
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Michael Doe

<div class="owl-carousel review-listing" data-items="[2]">
  <blockquote class="review">
    <span class="review-score bg-orange">7.0</span>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    <hr>
    <span>Michael Doe</span>
  </blockquote>
  ...
</div>

Testimonial

<div class="owl-carousel visible accent" data-dots="true" data-loop="true" data-margin="100" data-autoplay="true">
  <blockquote class="blockquote blockquote-1">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    <footer class="blockquote-footer">
      <div class="media align-items-center">
        <img class="avatar user-rounded" src="path/to/image" alt="Avatar">
        <div class="media-body ml-2">
          <span class="d-block mb-0 text-black">Michael Doe</span>
          <small>Google CEO</small>
        </div>
      </div>
    </footer>
  </blockquote>
  ...
</div>