Testimonials / reviews

<!-- Testimonial -->
<blockquote class="cz-testimonial">
  <div class="card border-0 box-shadow-sm">
    <span class="cz-testimonial-mark"></span>
    <div class="card-body font-size-md">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
  </div>
  <footer class="d-flex justify-content-center pt-4">
    <div class="media align-items-center">
      <img class="rounded" width="50" src="path-to-picture" alt="Mary Grant"/>
      <div class="media-body pl-3">
        <h6 class="font-size-sm mb-n1">Mary Alice Grant</h6>
        <span class="font-size-ms text-muted">Desperate housewife</span>
      </div>
    </div>
  </footer>
</blockquote>

// Testimonial
blockquote.cz-testimonial
  .card.border-0.box-shadow-sm
    span.cz-testimonial-mark
    .card-body.font-size-md
      | Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  footer.d-flex.justify-content-center.pt-4
    .media.align-items-center
      +image("path-to-picture", "Mary Grant")(width="50").rounded
      .media-body.pl-3
        h6.font-size-sm.mb-n1 Mary Alice Grant
        span.font-size-ms.text-muted Desperate housewife

<!-- Testimonials carousel -->
<div class="cz-carousel">
  <div class="cz-carousel-inner" data-carousel-options='{"items": 2, "controls": false, "responsive": {"0":{"items":1},"750":{"items":2, "gutter": 20},"991":{"items":3, "gutter": 30}}}'>
    <blockquote class="cz-testimonial mb-2">
      <div class="card border-0 box-shadow-sm"><span class="cz-testimonial-mark"></span>
        <div class="card-body font-size-md">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
      </div>
      <footer class="d-flex justify-content-center pt-4">
        <div class="media align-items-center">
          <img class="rounded" width="50" src="path-to-picture" alt="Mary Grant"/>
          <div class="media-body pl-3">
            <h6 class="font-size-sm mb-n1">Mary Alice Grant</h6>
            <span class="font-size-ms text-muted">Desperate housewife</span>
          </div>
        </div>
      </footer>
    </blockquote>

    <blockquote class="cz-testimonial mb-2">
      ...
    </blockquote>

    <!-- Add as many testimonials as you need -->
  </div>
</div>

// Testimonials carousel
.cz-carousel
  .cz-carousel-inner(data-carousel-options='{"items": 2, "controls": false, "responsive": {"0":{"items":1},"750":{"items":2, "gutter": 20},"991":{"items":3, "gutter": 30}}}')

    blockquote.cz-testimonial.mb-2
      .card.border-0.box-shadow-sm
        span.cz-testimonial-mark
        .card-body.font-size-md
          | Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
      footer.d-flex.justify-content-center.pt-4
        .media.align-items-center
          +image("path-to-picture", "Mary Grant")(width="50").rounded
          .media-body.pl-3
            h6.font-size-sm.mb-n1 Mary Alice Grant
            span.font-size-ms.text-muted Desperate housewife

    blockquote.cz-testimonial.mb-2
      ...

    //- Add as many testimonials as you need

<!-- Product review -->
<div class="product-review">
  <div class="d-flex mb-3">
    <div class="media media-ie-fix align-items-center mr-4 pr-2">
      <img class="rounded-circle" width="50" src="path-to-picture" alt="Rafael Marquez"/>
      <div class="media-body pl-3">
        <h6 class="font-size-sm mb-0">Rafael Marquez</h6>
        <span class="font-size-ms text-muted">June 28, 2019</span>
      </div>
    </div>
    <div>
      <div class="star-rating">
        <i class="sr-star czi-star-filled active"></i>
        <i class="sr-star czi-star-filled active"></i>
        <i class="sr-star czi-star-filled active"></i>
        <i class="sr-star czi-star-filled active"></i>
        <i class="sr-star czi-star"></i>
      </div>
      <div class="font-size-ms text-muted">83% of users found this review helpful</div>
    </div>
  </div>
  <p class="font-size-md mb-2">Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est...</p>
  <ul class="list-unstyled font-size-ms pt-1">
    <li class="mb-1">
      <span class="font-weight-medium">Pros: </span>Consequuntur magni, voluptatem sequi, tempora
    </li>
    <li class="mb-1">
      <span class="font-weight-medium">Cons: </span>Architecto beatae, quis autem
    </li>
  </ul>
  <div class="text-nowrap">
    <button class="btn-like" type="button">15</button>
    <button class="btn-dislike" type="button">3</button>
  </div>
</div>

// Product review
.product-review
  .d-flex.mb-3
    .media.media-ie-fix.align-items-center.mr-4.pr-2
      +image("path-to-picture", "Rafael Marquez")(width="50").rounded-circle
      .media-body.pl-3
        h6.font-size-sm.mb-0 Rafael Marquez
        span.font-size-ms.text-muted June 28, 2019
    div
      +star-rating(4)
      .font-size-ms.text-muted 83% of users found this review helpful
  p.font-size-md.mb-2 Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est...
  ul.list-unstyled.font-size-ms.pt-1
    li.mb-1
      span.font-weight-medium Pros: 
      | Consequuntur magni, voluptatem sequi, tempora
    li.mb-1
      span.font-weight-medium Cons: 
      | Architecto beatae, quis autem
  .text-nowrap
    button(type="button").btn-like 15
    button(type="button").btn-dislike 3

<!-- Post comment -->
<div class="media">
  <img class="rounded-circle" width="50" src="path-to-picture" alt="Laura Willson"/>
  <div class="media-body pl-3">
    <div class="d-flex justify-content-between align-items-center mb-2">
      <h6 class="font-size-md mb-0">Laura Willson</h6>
      <a class="nav-link-style font-size-sm font-weight-medium" href="#">
        <i class="czi-reply mr-2"></i>
        Reply
      </a>
    </div>
    <p class="font-size-md mb-1">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    <span class="font-size-ms text-muted">
      <i class="czi-time align-middle mr-2"></i>
      Sep 7, 2019
    </span>
  </div>
</div>

// Post comment
.media
  +image("path-to-picture", "Laura Willson")(width="50").rounded-circle
  .media-body.pl-3
    .d-flex.justify-content-between.align-items-center.mb-2
      h6.font-size-md.mb-0 Laura Willson
      a(href="#").nav-link-style.font-size-sm.font-weight-medium
        i.czi-reply.mr-2
        | Reply
    p.font-size-md.mb-1 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
    span.font-size-ms.text-muted
      i.czi-time.align-middle.mr-2
      | Sep 7, 2019