Reviews & Comments

HTML
Pug

<!-- Review -->
<div class="blockquote comment">
  <div class="d-sm-flex mb-2">
    <h6 class="text-lg mb-0">My husband love his new...</h6>
    <span class="d-none d-sm-inline mx-3 text-muted opacity-50">|</span>
    <div class="rating-stars">
      <i class="fe-icon-star active"></i>
      <i class="fe-icon-star active"></i>
      <i class="fe-icon-star active"></i>
      <i class="fe-icon-star active"></i>
      <i class="fe-icon-star"></i>
    </div>
  </div>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing...</p>
  <footer class="testimonial-footer">
    <div class="testimonial-avatar">
      <img src="path-to-image" alt="Review Author Avatar"/>
    </div>
    <div class="d-table-cell align-middle pl-2">
      <div class="blockquote-footer">
        Barbara Palson
        <cite>August 12, 2018 at 3:10PM</cite>
      </div>
    </div>
  </footer>
</div>

//- Review
.blockquote.comment
  .d-sm-flex.mb-2
    h6.text-lg.mb-0 My husband love his new...
    span.d-none.d-sm-inline.mx-3.text-muted.opacity-50 |
    +rating-stars(4)
  p Lorem ipsum dolor sit amet, consectetur adipisicing...
  footer.testimonial-footer
    .testimonial-avatar
      +image("path-to-image", "Review Author Avatar")
    .d-table-cell.align-middle.pl-2
      .blockquote-footer
        | Barbara Palson
        cite August 12, 2018 at 3:10PM

HTML
Pug

<!-- Comment -->
<div class="blockquote comment">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing...</p>
  <div class="d-sm-flex justify-content-between align-items-center">
    <div class="testimonial-footer">
      <div class="testimonial-avatar">
        <img src="path-to-image" alt="Comment Author Avatar"/>
      </div>
      <div class="d-table-cell align-middle pl-2">
        <div class="blockquote-footer">
          Michael Davis
          <cite>August 12, 2018 at 3:10PM</cite>
        </div>
      </div>
    </div>
    <div class="pt-3">
      <a class="btn btn-primary btn-sm" href="#">
        <i class="fe-icon-corner-up-left"></i>
        &nbsp;Reply
      </a>
    </div>
  </div>
</div>

//- Comment
.blockquote.comment
  p Lorem ipsum dolor sit amet, consectetur adipisicing...
  .d-sm-flex.justify-content-between.align-items-center
    .testimonial-footer
      .testimonial-avatar
        +image("path-to-image", "Comment Author Avatar")
      .d-table-cell.align-middle.pl-2
        .blockquote-footer
          | Michael Davis
          cite August 12, 2018 at 3:10PM
    div.pt-3
      a(href="#").btn.btn-primary.btn-sm
        i.fe-icon-corner-up-left
        | &nbsp;Reply

UI Kit

ALL

A-B

C-F

G-L

M-P

R-S

T-W

Reviews

My husband love his new...

|

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Utenim ad minim veniam, quis nostrud. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est.

Awesome quality for the price

|

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Utenim ad minim veniam, quis nostrud. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est.

Comments

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Utenim ad minim veniam, quis nostrud. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Utenim ad minim veniam, quis nostrud. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Utenim ad minim veniam, quis nostrud. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est.