Around Buy now

Testimonials / reviews

Component is designed to showcase testimonials from satisfied clients or reviews of the products on your website.

Around component

Default style

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis ipsum suspendisse ultrices gravida dignissimos ducimus qui blanditiis praesentium voluptatum. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Emma Brown
Emma Brown
<!-- Default testimonial -->
<blockquote class="blockquote">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>
  <footer class="media align-items-center">
    <img src="path-to-image" class="rounded-circle" width="42" alt="Emma Brown"/>
    <div class="media-body text-heading font-size-md font-weight-medium pl-2 ml-1">Emma Brown</div>
  </footer>
</blockquote>
// Default testimonial
blockquote.blockquote
  p Lorem ipsum dolor sit amet, consectetur adipiscing elit...
  footer.media.align-items-center
    +image("path-to-image", "Emma Brown")(width="42").rounded-circle
    .media-body.text-heading.font-size-md.font-weight-medium.pl-2.ml-1
      | Emma Brown

Inside card

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis ipsum suspendisse ultrices gravida dignissimos ducimus. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt.

Tim Brooks
Tim Brooks

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis ipsum suspendisse ultrices gravida dignissimos ducimus...

Sarah Cole
Sarah Cole
<!-- Testimonial inside card: Border -->
<div class="card mr-sm-4">
  <div class="card-body">
    <blockquote class="blockquote font-size-sm">
      <p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>
    </blockquote>
  </div>
  <footer class="font-size-sm px-4 pb-4">
    <div class="media align-items-center border-top mb-n2 pt-3">
      <img class="rounded-circle" width="42" src="path-to-image" alt="Tim Brooks"/>
      <div class="media-body text-heading font-weight-medium pl-2 ml-1 mt-n1">Tim Brooks</div>
    </div>
  </footer>
</div>

<!-- Testimonial inside card: Shadow -->
<div class="card border-0 box-shadow">
  <div class="card-body">
    <blockquote class="blockquote font-size-sm">
      <p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>
    </blockquote>
  </div>
  <footer class="font-size-sm px-4 pb-4">
    <div class="media align-items-center border-top mb-n2 pt-3">
      <img class="rounded-circle" width="42" src="path-to-image" alt="Sarah Cole"/>
      <div class="media-body text-heading font-weight-medium pl-2 ml-1 mt-n1">Sarah Cole</div>
    </div>
  </footer>
</div>
// Testimonial inside card: Border
.card
  .card-body
    blockquote.blockquote.font-size-sm
      p.mb-0 Lorem ipsum dolor sit amet, consectetur adipiscing elit...
  footer.font-size-sm.px-4.pb-4
    .media.align-items-center.border-top.mb-n2.pt-3
      +image("path-to-image", "Tim Brooks")(width="42").rounded-circle
      .media-body.text-heading.font-weight-medium.pl-2.ml-1.mt-n1
        | Tim Brooks

// Testimonial inside card: Shadow
.card.border-0.box-shadow
  .card-body
    blockquote.blockquote.font-size-sm
      p.mb-0 Lorem ipsum dolor sit amet, consectetur adipiscing elit...
  footer.font-size-sm.px-4.pb-4
    .media.align-items-center.border-top.mb-n2.pt-3
      +image("path-to-image", "Sarah Cole")(width="42").rounded-circle
      .media-body.text-heading.font-weight-medium.pl-2.ml-1.mt-n1
        | Sarah Cole

From Instagram

<!-- From Instagram: Card border -->
<a class="card" href="#">
  <span class="card-floating-icon">
    <i class="fe-instagram"></i>
  </span>
  <img class="card-img-top" src="path-to-image" alt="Image"/>
  <footer class="font-size-sm mt-auto py-2 px-4">
    <div class="media align-items-center py-2">
      <img class="rounded-circle" width="42" src="path-to-image" alt="@sarah.cole"/>
      <div class="media-body text-heading font-weight-medium pl-2 ml-1 mt-n1">@sarah.cole</div>
    </div>
  </footer>
</a>

<!-- From Instagram: Card shadow -->
<a class="card border-0 box-shadow" href="#">
  <span class="card-floating-icon">
    <i class="fe-instagram"></i>
  </span>
  <img class="card-img-top" src="path-to-image" alt="Image"/>
  <footer class="font-size-sm mt-auto py-2 px-4">
    <div class="media align-items-center py-2">
      <img class="rounded-circle" width="42" src="path-to-image" alt="@morni.janeffel"/>
      <div class="media-body text-heading font-weight-medium pl-2 ml-1 mt-n1">@morni.janeffel</div>
    </div>
  </footer>
</a>
// From Instagram: Card border
a(href="#").card
  span.card-floating-icon
    i.fe-instagram
  +image("path-to-image", "Image").card-img-top
  footer.font-size-sm.mt-auto.py-2.px-4
    .media.align-items-center.py-2
      +image("path-to-image", "@sarah.cole")(width="42").rounded-circle
      .media-body.text-heading.font-weight-medium.pl-2.ml-1.mt-n1
        | @sarah.cole

// From Instagram: Card shadow
a(href="#").card.border-0.box-shadow
  span.card-floating-icon
    i.fe-instagram
  +image("path-to-image", "Image").card-img-top
  footer.font-size-sm.mt-auto.py-2.px-4
    .media.align-items-center.py-2
      +image("path-to-image", "@morni.janeffel")(width="42").rounded-circle
      .media-body.text-heading.font-weight-medium.pl-2.ml-1.mt-n1
        | @morni.janeffel

Inside carousel: Style 1

slide 2 of 4

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis ipsum suspendisse ultrices gravida dignissimos ducimus. Excepteur sint occaecat cupidatat non proident sunt in culpa.

LogoLogoLogoLogoLogoLogoLogoLogo
<!-- Testimonials carousel: Style 1 -->
<div class="cs-carousel">

  <!-- Actual carousel -->
  <div class="cs-carousel-inner" data-carousel-options='{"nav": false, "controls": false, "gutter": 20}'>
    <blockquote class="blockquote text-center">
      <p class="lead text-heading font-weight-medium">Lorem ipsum dolor sit amet...</p>
    </blockquote>
    <blockquote class="blockquote text-center">
      <p class="lead text-heading font-weight-medium">Lorem ipsum dolor sit amet...</p>
    </blockquote>
    <blockquote class="blockquote text-center">
      <p class="lead text-heading font-weight-medium">Lorem ipsum dolor sit amet...</p>
    </blockquote>
    <blockquote class="blockquote text-center">
      <p class="lead text-heading font-weight-medium">Lorem ipsum dolor sit amet...</p>
    </blockquote>
  </div>

  <!-- Custom pager -->
  <div class="cs-carousel-pager d-flex flex-wrap justify-content-center align-items-center">
    <a href="#" class="cs-swap-image active mx-4 my-3" data-goto="1">
      <img src="path-to-color-image" class="cs-swap-to" width="100" alt="Logo"/>
      <img src="path-to-grayscale-image" class="cs-swap-from" width="100" alt="Logo"/>
    </a>
    <a href="#" class="cs-swap-image mx-4 my-3" data-goto="2">
      <img src="path-to-color-image" class="cs-swap-to" width="100" alt="Logo"/>
      <img src="path-to-grayscale-image" class="cs-swap-from" width="100" alt="Logo"/>
    </a>
    <a href="#" class="cs-swap-image mx-4 my-3" data-goto="3">
      <img src="path-to-color-image" class="cs-swap-to" width="100" alt="Logo"/>
      <img src="path-to-grayscale-image" class="cs-swap-from" width="100" alt="Logo"/>
    </a>
    <a href="#" class="cs-swap-image mx-4 my-3" data-goto="4">
      <img src="path-to-color-image" class="cs-swap-to" width="100" alt="Logo"/>
      <img src="path-to-grayscale-image" class="cs-swap-from" width="100" alt="Logo"/>
    </a>
  </div>
</div>
// Testimonials carousel: Style 1
.cs-carousel

  // Actual carousel
  .cs-carousel-inner(data-carousel-options = '{"nav": false, "controls": false, "gutter": 20}')
    blockquote.blockquote.text-center
      p.lead.text-heading.font-weight-medium Lorem ipsum dolor sit amet...
    blockquote.blockquote.text-center
      p.lead.text-heading.font-weight-medium Lorem ipsum dolor sit amet...
    blockquote.blockquote.text-center
      p.lead.text-heading.font-weight-medium Lorem ipsum dolor sit amet...
    blockquote.blockquote.text-center
      p.lead.text-heading.font-weight-medium Lorem ipsum dolor sit amet...

  // Custom pager
  .cs-carousel-pager.d-flex.flex-wrap.justify-content-center.align-items-center
    a(href="#" data-goto="1").cs-swap-image.active.mx-4.my-3
      +image("path-to-color-image", "Logo")(width="100").cs-swap-to
      +image("path-to-grayscale-image", "Logo")(width="100").cs-swap-from
    a(href="#" data-goto="2").cs-swap-image.mx-4.my-3
      +image("path-to-color-image", "Logo")(width="100").cs-swap-to
      +image("path-to-grayscale-image", "Logo")(width="100").cs-swap-from
    a(href="#" data-goto="3").cs-swap-image.mx-4.my-3
      +image("path-to-color-image", "Logo")(width="100").cs-swap-to
      +image("path-to-grayscale-image", "Logo")(width="100").cs-swap-from
    a(href="#" data-goto="4").cs-swap-image.mx-4.my-3
      +image("path-to-color-image", "Logo")(width="100").cs-swap-to
      +image("path-to-grayscale-image", "Logo")(width="100").cs-swap-from

Inside carousel: Style 2

slide 2 of 4

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis ipsum suspendisse ultrices gravida dignissimos ducimus qui blanditiis praesentium voluptatum.

Mattis enim ut tellus elementum sagittis vitae et leo duis.

Emma Brown
Emma Brown
LogoLogoLogoLogoLogoLogoLogoLogo
<!-- Testimonials carousel: Style 2 -->
<div class="cs-carousel row">

  <!-- Actual carousel -->
  <div class="col-md-8">
    <div class="cs-carousel-inner" data-carousel-options='{"nav": false, "gutter": 20}'>
      <blockquote class="blockquote mt-3 mb-0">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>
        <footer class="media align-items-center">
          <img src="path-to-image" class="rounded-circle" width="42" alt="Emma Brown"/>
          <div class="media-body text-heading font-size-md font-weight-medium pl-2 ml-1">Emma Brown</div>
        </footer>
      </blockquote>
      <blockquote class="blockquote mt-3 mb-0">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>
        <footer class="media align-items-center">
          <img src="path-to-image" class="rounded-circle" width="42" alt="Tim Brooks"/>
          <div class="media-body text-heading font-size-md font-weight-medium pl-2 ml-1">Tim Brooks</div>
        </footer>
      </blockquote>
      <blockquote class="blockquote mt-3 mb-0">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>
        <footer class="media align-items-center">
          <img src="path-to-image" class="rounded-circle" width="42" alt="Sanomi Smith"/>
          <div class="media-body text-heading font-size-md font-weight-medium pl-2 ml-1">Sanomi Smith</div>
        </footer>
      </blockquote>
      <blockquote class="blockquote mt-3 mb-0">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>
        <footer class="media align-items-center">
          <img src="path-to-image" class="rounded-circle" width="42" alt="Charlie Welch"/>
          <div class="media-body text-heading font-size-md font-weight-medium pl-2 ml-1">Charlie Welch</div>
        </footer>
      </blockquote>
    </div>
  </div>

  <!-- Custom pager -->
  <div class="col-md-4">
    <div class="cs-carousel-pager d-flex flex-wrap flex-md-column justify-content-center align-items-center align-items-md-start border-left pt-4 mt-4 pl-md-3 pt-md-0 mt-md-0">
      <a href="#" class="cs-swap-image active mx-4 my-3 my-md-4" data-goto="1">
        <img src="path-to-color-image" class="cs-swap-to" width="100" alt="Logo"/>
        <img src="path-to-grayscale-image" class="cs-swap-from" width="100" alt="Logo"/>
      </a>
      <a href="#" class="cs-swap-image mx-4 my-3 my-md-4" data-goto="2">
        <img src="path-to-color-image" class="cs-swap-to" width="100" alt="Logo"/>
        <img src="path-to-grayscale-image" class="cs-swap-from" width="100" alt="Logo"/>
      </a>
      <a href="#" class="cs-swap-image mx-4 my-3 my-md-4" data-goto="3">
        <img src="path-to-color-image" class="cs-swap-to" width="100" alt="Logo"/>
        <img src="path-to-grayscale-image" class="cs-swap-from" width="100" alt="Logo"/>
      </a>
      <a href="#" class="cs-swap-image mx-4 my-3 my-md-4" data-goto="4">
        <img src="path-to-color-image" class="cs-swap-to" width="100" alt="Logo"/>
        <img src="path-to-grayscale-image" class="cs-swap-from" width="100" alt="Logo"/>
      </a>
    </div>
  </div>
</div>
// Testimonials carousel: Style 2
.cs-carousel.row
  
  // Actual carousel
  .col-md-8
    .cs-carousel-inner(data-carousel-options = '{"nav": false, "gutter": 20}')
      blockquote.blockquote.mt-3.mb-0
        p Lorem ipsum dolor sit amet, consectetur adipiscing elit...
        footer.media.align-items-center
          +image("path-to-image", "Emma Brown")(width="42").rounded-circle
          .media-body.text-heading.font-size-md.font-weight-medium.pl-2.ml-1
            | Emma Brown
      blockquote.blockquote.mt-3.mb-0
        p Lorem ipsum dolor sit amet, consectetur adipiscing elit...
        footer.media.align-items-center
          +image("path-to-image", "Tim Brooks")(width="42").rounded-circle
          .media-body.text-heading.font-size-md.font-weight-medium.pl-2.ml-1
            | Tim Brooks
      blockquote.blockquote.mt-3.mb-0
        p Lorem ipsum dolor sit amet, consectetur adipiscing elit...
        footer.media.align-items-center
          +image("path-to-image", "Sanomi Smith")(width="42").rounded-circle
          .media-body.text-heading.font-size-md.font-weight-medium.pl-2.ml-1
            | Sanomi Smith
      blockquote.blockquote.mt-3.mb-0
        p Lorem ipsum dolor sit amet, consectetur adipiscing elit...
        footer.media.align-items-center
          +image("path-to-image", "Charlie Welch")(width="42").rounded-circle
          .media-body.text-heading.font-size-md.font-weight-medium.pl-2.ml-1
            | Charlie Welch
  
  // Custom pager
  .col-md-4
    .cs-carousel-pager.d-flex.flex-wrap.flex-md-column.justify-content-center.align-items-center.align-items-md-start.border-left.pt-4.mt-4.pl-md-3.pt-md-0.mt-md-0
      a(href="#" data-goto="1").cs-swap-image.active.mx-4.my-3.my-md-4
        +image("path-to-color-image", "Logo")(width="100").cs-swap-to
        +image("path-to-grayscale-image", "Logo")(width="100").cs-swap-from
      a(href="#" data-goto="2").cs-swap-image.mx-4.my-3.my-md-4
        +image("path-to-color-image", "Logo")(width="100").cs-swap-to
        +image("path-to-grayscale-image", "Logo")(width="100").cs-swap-from
      a(href="#" data-goto="3").cs-swap-image.mx-4.my-3.my-md-4
        +image("path-to-color-image", "Logo")(width="100").cs-swap-to
        +image("path-to-grayscale-image", "Logo")(width="100").cs-swap-from
      a(href="#" data-goto="4").cs-swap-image.mx-4.my-3.my-md-4
        +image("path-to-color-image", "Logo")(width="100").cs-swap-to
        +image("path-to-grayscale-image", "Logo")(width="100").cs-swap-from

Inside carousel: Style 3

slide 7 to 9 of 4

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis ipsum suspendisse ultrices gravida dignissimos ducimus...

Sarah Cole
Sarah Cole

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis ipsum suspendisse ultrices gravida dignissimos ducimus. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim.

Charlie Welch
Charlie Welch
<!-- Testimonials carousel: Style 3 -->
<div class="cs-carousel">
  <div class="cs-carousel-inner" data-carousel-options='{"items": 2, "controls": false, "responsive": {"0":{"items":1, "gutter": 16},"576":{"items":2, "gutter": 16},"900":{"items":3, "gutter": 16}, "1100":{"items":3, "gutter": 23}}}'>

    <!-- Testimonial: Card-->
    <div class="py-2">
      <div class="card h-100 border-0 box-shadow mx-1">
        <div class="card-body">
          <blockquote class="blockquote font-size-sm">
            <p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>
          </blockquote>
        </div>
        <footer class="font-size-sm px-4 pb-4">
          <div class="media align-items-center border-top mb-n2 pt-3">
            <img class="rounded-circle" width="42" src="path-to-image" alt="Sarah Cole"/>
            <div class="media-body text-heading font-weight-medium pl-2 ml-1 mt-n1">Sarah Cole</div>
          </div>
        </footer>
      </div>
    </div>

    <!-- From Instagram-->
    <div class="py-2">
      <a class="card h-100 border-0 box-shadow mx-1" href="#">
        <span class="card-floating-icon">
          <i class="fe-instagram"></i>
        </span>
        <img class="card-img-top" src="path-to-image" alt="Image"/>
        <footer class="font-size-sm mt-auto py-2 px-4">
          <div class="media align-items-center py-2">
            <img class="rounded-circle" width="42" src="path-to-image" alt="@morni.janeffel"/>
            <div class="media-body text-heading font-weight-medium pl-2 ml-1 mt-n1">@morni.janeffel</div>
          </div>
        </footer>
      </a>
    </div>

    <!-- Add as many testimonials as you need-->
  </div>
</div>
// Testimonials carousel: Style 3
.cs-carousel
  .cs-carousel-inner(data-carousel-options='{"items": 2, "controls": false, "responsive": {"0":{"items":1, "gutter": 16},"576":{"items":2, "gutter": 16},"900":{"items":3, "gutter": 16}, "1100":{"items":3, "gutter": 23}}}')

    // Testimonial: Card
    .py-2
      .card.h-100.border-0.box-shadow.mx-1
        .card-body
          blockquote.blockquote.font-size-sm
            p.mb-0 Lorem ipsum dolor sit amet, consectetur adipiscing elit...
        footer.font-size-sm.px-4.pb-4
          .media.align-items-center.border-top.mb-n2.pt-3
            +image("path-to-image", "Sarah Cole")(width="42").rounded-circle
            .media-body.text-heading.font-weight-medium.pl-2.ml-1.mt-n1
              | Sarah Cole

    // From Instagram
    .py-2
      a(href="#").card.h-100.border-0.box-shadow.mx-1
        span.card-floating-icon
          i.fe-instagram
        +image("path-to-image", "Image").card-img-top
        footer.font-size-sm.mt-auto.py-2.px-4
          .media.align-items-center.py-2
            +image("path-to-image", "@morni.janeffel")(width="42").rounded-circle
            .media-body.text-heading.font-weight-medium.pl-2.ml-1.mt-n1
              | @morni.janeffel

    // Add as many testimonials as you need

Inside carousel: Style 4

slide 1 of 2
<!-- Testimonials carousel: Style 4 -->
<div class="cs-carousel">
  <div class="cs-carousel-inner" data-carousel-options='{"mode": "gallery", "nav": false}'>

    <!-- Item -->
    <div>
      <div class="pb-3 pb-md-0 pl-md-7 ml-md-3">
        <div class="bg-size-cover bg-position-center rounded-lg py-7" style="background-image: url(path-to-background-image);">
          <div class="d-md-flex align-items-center ml-md-n7 text-center text-md-left">
            <div class="card card-body d-none d-md-flex py-grid-gutter px-grid-gutter border-0 box-shadow-lg mr-6 cs-scale-up">
              <blockquote class="blockquote">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>
                <footer class="blockquote-footer">Paul Anderson, CEO Company Ltd.</footer>
              </blockquote>
            </div>
            <a href="link-to-youtube/vimeo-video" class="cs-video-btn cs-video-btn-sm my-4" data-sub-html='<h6 class="font-size-sm text-light">Video caption</h6>'></a>
          </div>
        </div>
        <div class="d-md-none mt-n6 px-3 cs-scale-up">
          <div class="card card-body py-grid-gutter px-grid-gutter border-0 box-shadow mx-auto">
            <blockquote class="blockquote">
              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>
              <footer class="blockquote-footer">Paul Anderson, CEO Company Ltd.</footer>
            </blockquote>
          </div>
        </div>
      </div>
    </div>

    <!-- Add as many items as you need -->
  </div>
</div>
// Testimonials carousel: Style 4
.cs-carousel
  .cs-carousel-inner(data-carousel-options='{"mode": "gallery", "nav": false}')

    // Item
    div
      .pb-3.pb-md-0.pl-md-7.ml-md-3
        .bg-size-cover.bg-position-center.rounded-lg.py-7(style="background-image: url(path-to-background-image);")
          .d-md-flex.align-items-center.ml-md-n7.text-center.text-md-left
            .card.card-body.d-none.d-md-flex.py-grid-gutter.px-grid-gutter.border-0.box-shadow-lg.mr-6.cs-scale-up(style"max-width: 28rem;")
              blockquote.blockquote
                p Lorem ipsum dolor sit amet, consectetur adipiscing elit...
                footer.blockquote-footer Paul Anderson, CEO Company Ltd.
            a(href="link-to-youtube/vimeo-video", data-sub-html='<h6 class="font-size-sm text-light">Video caption</h6>').cs-video-btn.cs-video-btn-sm.my-4
        .d-md-none.mt-n6.px-3.cs-scale-up
          .card.card-body.py-grid-gutter.px-grid-gutter.border-0.box-shadow.mx-auto(style="max-width: 28rem;")
            blockquote.blockquote
              p Lorem ipsum dolor sit amet, consectetur adipiscing elit...
              footer.blockquote-footer Paul Anderson, CEO Company Ltd.

    // Add as many items as you need

Product review: Default

76% of users found this review helpful

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 cumque nihil impedit quo minus.

Barbara Palson
Barbara Palson
3 days ago 
<!-- Product review: Default -->
<div class="cs-product-review">
  <div class="d-flex align-items-center mb-2 pb-1">
    <div class="star-rating star-rating-lg mr-2">
      <i class="sr-star fe-star-filled active"></i>
      <i class="sr-star fe-star-filled active"></i>
      <i class="sr-star fe-star-filled active"></i>
      <i class="sr-star fe-star-filled active"></i>
      <i class="sr-star fe-star"></i>
    </div>
    <span class="font-size-sm text-muted">76% of users found this review helpful</span>
  </div>
  <p class="font-size-md">Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>
  <div class="d-flex align-items-center justify-content-between">
    <div class="media media-ie-fix align-items-center mr-3">
      <img src="path-to-image" class="rounded-circle" width="42" alt="Barbara Palson"/>
      <div class="media-body pl-2 ml-1">
        <h6 class="font-size-sm mb-n1">Barbara Palson</h6>
        <span class="font-size-xs text-muted">3 days ago</span>
      </div>
    </div>
    <div class="text-nowrap">
      <button class="btn-like" type="button">15</button>
      <button class="btn-dislike" type="button">3</button>
    </div>
  </div>
</div>
// Product review: Default
.cs-product-review
  .d-flex.align-items-center.mb-2.pb-1
    +star-rating(4).star-rating-lg.mr-2
    span.font-size-sm.text-muted 76% of users found this review helpful
  p.font-size-md Lorem ipsum dolor sit amet, consectetur adipiscing elit...
  .d-flex.align-items-center.justify-content-between
    .media.media-ie-fix.align-items-center.mr-3
      +image("path-to-image", "Barbara Palson")(width="42").rounded-circle
      .media-body.pl-2.ml-1
        h6.font-size-sm.mb-n1 Barbara Palson
        span.font-size-xs.text-muted 3 days ago
    .text-nowrap
      button.btn-like(type="button") 15
      button.btn-dislike(type="button") 3

Product review: Card

Product thumb
Running Sneakers, Sports Collection

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

Tim Brooks
Tim Brooks
Product thumb
Wireless Bluetooth Headset

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis ipsum suspendisse ultrices gravida. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia.

Sarah Cole
Sarah Cole
<!-- Product review: Card border -->
<div class="card">
  <div class="card-body">
    <a class="media align-items-center nav-heading mb-3" href="#">
      <img width="60" src="path-to-image" alt="Product thumb"/>
      <div class="media-body font-size-md font-weight-medium pl-2 ml-1">
        Running Sneakers, Sports Collection
      </div>
    </a>
    <div class="mb-2 pb-1 star-rating">
      <i class="sr-star fe-star-filled active"></i>
      <i class="sr-star fe-star-filled active"></i>
      <i class="sr-star fe-star-filled active"></i>
      <i class="sr-star fe-star-filled active"></i>
      <i class="sr-star fe-star-filled active"></i>
    </div>
    <p class="font-size-sm mb-0">Lorem ipsum dolor sit amet...</p>
  </div>
  <footer class="font-size-sm px-4 pb-4">
    <div class="media align-items-center border-top mb-n2 pt-3">
      <img class="rounded-circle" width="42" src="path-to-image" alt="Tim Brooks"/>
      <div class="media-body text-heading font-weight-medium pl-2 ml-1 mt-n1">
        Tim Brooks
      </div>
    </div>
  </footer>
</div>

<!-- Product review: Card shadow -->
<div class="card border-0 box-shadow">
  <div class="card-body">
    <a class="media align-items-center nav-heading mb-3" href="#">
      <img width="60" src="path-to-image" alt="Product thumb"/>
      <div class="media-body font-size-md font-weight-medium pl-2 ml-1">
        Wireless Bluetooth Headset
      </div>
    </a>
    <div class="mb-2 pb-1 star-rating">
      <i class="sr-star fe-star-filled active"></i>
      <i class="sr-star fe-star-filled active"></i>
      <i class="sr-star fe-star-filled active"></i>
      <i class="sr-star fe-star-filled active"></i>
      <i class="sr-star fe-star"></i>
    </div>
    <p class="font-size-sm mb-0">Lorem ipsum dolor sit amet...</p>
  </div>
  <footer class="font-size-sm px-4 pb-4">
    <div class="media align-items-center border-top mb-n2 pt-3">
      <img class="rounded-circle" width="42" src="path-to-image" alt="Sarah Cole"/>
      <div class="media-body text-heading font-weight-medium pl-2 ml-1 mt-n1">
        Sarah Cole
      </div>
    </div>
  </footer>
</div>
// Product review: Card border
.card
  .card-body
    a(href="#").media.align-items-center.nav-heading.mb-3
      +image("path-to-image", "Product thumb")(width="60")
      .media-body.font-size-md.font-weight-medium.pl-2.ml-1
        | Running Sneakers, Sports Collection
    +star-rating(5).mb-2.pb-1
    p.font-size-sm.mb-0 Lorem ipsum dolor sit amet...
  footer.font-size-sm.px-4.pb-4
    .media.align-items-center.border-top.mb-n2.pt-3
      +image("path-to-image", "Tim Brooks")(width="42").rounded-circle
      .media-body.text-heading.font-weight-medium.pl-2.ml-1.mt-n1
        | Tim Brooks

// Product review: Card shadow
.card.border-0.box-shadow
  .card-body
    a(href="#").media.align-items-center.nav-heading.mb-3
      +image("path-to-image", "Product thumb")(width="60")
      .media-body.font-size-md.font-weight-medium.pl-2.ml-1
        | Wireless Bluetooth Headset
    +star-rating(4).mb-2.pb-1
    p.font-size-sm.mb-0 Lorem ipsum dolor sit amet...
  footer.font-size-sm.px-4.pb-4
    .media.align-items-center.border-top.mb-n2.pt-3
      +image("path-to-image", "Sarah Cole")(width="42").rounded-circle
      .media-body.text-heading.font-weight-medium.pl-2.ml-1.mt-n1
        | Sarah Cole
Top