Testimonials / reviews

<!-- Testimonial -->
<blockquote class="testimonial">
  <div class="card border-0 shadow-sm">
    <span class="testimonial-mark"></span>
    <div class="card-body fs-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 align-items-center pt-4">
    <img class="rounded" width="50" src="path-to-picture" alt="Mary Grant"/>
    <div class="ps-3">
      <h6 class="fs-sm mb-n1">Mary Alice Grant</h6>
      <span class="fs-ms text-muted">Desperate housewife</span>
    </div>
  </footer>
</blockquote>

// Testimonial
blockquote.testimonial
  .card.border-0.shadow-sm
    span.testimonial-mark
    .card-body.fs-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.align-items-center.pt-4
    img(src="path-to-picture", width="50", "Mary Grant").rounded
    .ps-3
      h6.fs-sm.mb-n1 Mary Alice Grant
      span.fs-ms.text-muted Desperate housewife

<!-- Testimonials carousel -->
<div class="tns-carousel">
  <div class="tns-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="testimonial mb-2">
      <div class="card border-0 shadow-sm"><span class="testimonial-mark"></span>
        <div class="card-body fs-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 align-items-center pt-4">
        <img class="rounded" width="50" src="path-to-picture" alt="Mary Grant"/>
        <div class="ps-3">
          <h6 class="fs-sm mb-n1">Mary Alice Grant</h6>
          <span class="fs-ms text-muted">Desperate housewife</span>
        </div>
      </footer>
    </blockquote>

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

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

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

    blockquote.testimonial.mb-2
      .card.border-0.shadow-sm
        span.testimonial-mark
        .card-body.fs-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.align-items-center.pt-4
        img(src="path-to-picture", width="50", alt="Mary Grant").rounded
        .ps-3
          h6.fs-sm.mb-n1 Mary Alice Grant
          span.fs-ms.text-muted Desperate housewife

    blockquote.testimonial.mb-2
      ...

    //- Add as many testimonials as you need

<!-- Product review -->
<div class="product-review">
  <div class="d-flex mb-3">
    <div class="d-flex align-items-center me-4 pe-2">
      <img class="rounded-circle" width="50" src="path-to-picture" alt="Rafael Marquez"/>
      <div class="ps-3">
        <h6 class="fs-sm mb-0">Rafael Marquez</h6>
        <span class="fs-ms text-muted">June 28, 2019</span>
      </div>
    </div>
    <div>
      <div class="star-rating">
        <i class="star-rating-icon ci-star-filled active"></i>
        <i class="star-rating-icon ci-star-filled active"></i>
        <i class="star-rating-icon ci-star-filled active"></i>
        <i class="star-rating-icon ci-star-filled active"></i>
        <i class="star-rating-icon ci-star"></i>
      </div>
      <div class="fs-ms text-muted">83% of users found this review helpful</div>
    </div>
  </div>
  <p class="fs-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 fs-ms pt-1">
    <li class="mb-1">
      <span class="fw-medium">Pros: </span>Consequuntur magni, voluptatem sequi, tempora
    </li>
    <li class="mb-1">
      <span class="fw-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
    .d-flex.align-items-center.me-4.pe-2
      img(src="path-to-picture", width="50", alt="Rafael Marquez").rounded-circle
      .ps-3
        h6.fs-sm.mb-0 Rafael Marquez
        span.fs-ms.text-muted June 28, 2019
    div
      +star-rating(4)
      .fs-ms.text-muted 83% of users found this review helpful
  p.fs-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.fs-ms.pt-1
    li.mb-1
      span.fw-medium Pros: 
      | Consequuntur magni, voluptatem sequi, tempora
    li.mb-1
      span.fw-medium Cons: 
      | Architecto beatae, quis autem
  .text-nowrap
    button(type="button").btn-like 15
    button(type="button").btn-dislike 3

<!-- Post comment -->
<div class=" d-flex align-items-start">
  <img class="rounded-circle" width="50" src="path-to-picture" alt="Laura Willson"/>
  <div class="ps-3">
    <div class="d-flex justify-content-between align-items-center mb-2">
      <h6 class="fs-md mb-0">Laura Willson</h6>
      <a class="nav-link-style fs-sm fw-medium" href="#">
        <i class="ci-reply me-2"></i>
        Reply
      </a>
    </div>
    <p class="fs-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="fs-ms text-muted">
      <i class="ci-time align-middle me-2"></i>
      Sep 7, 2019
    </span>
  </div>
</div>

// Post comment
.d-flex.align-items-start
  img(src="path-to-picture", width="50", alt="Laura Willson").rounded-circle
  .ps-3
    .d-flex.justify-content-between.align-items-center.mb-2
      h6.fs-md.mb-0 Laura Willson
      a(href="#").nav-link-style.fs-sm.fw-medium
        i.ci-reply.me-2
        | Reply
    p.fs-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.fs-ms.text-muted
      i.ci-time.align-middle.me-2
      | Sep 7, 2019