Around | Testimonials / reviews

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

<!-- Default testimonial -->
<blockquote class="blockquote">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>
  <footer class="d-flex align-items-center">
    <img src="path-to-image" class="rounded-circle" width="42" alt="Emma Brown"/>
    <div class="text-heading fs-md fw-medium ps-2 ms-1">Emma Brown</div>
  </footer>
</blockquote>

// Default testimonial
blockquote.blockquote
  p Lorem ipsum dolor sit amet, consectetur adipiscing elit...
  footer.d-flex.align-items-center
    img(src="path-to-image", "Emma Brown", width="42").rounded-circle
    .text-heading.fs-md.fw-medium.ps-2.ms-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.

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...

<!-- Testimonial inside card: Border -->
<div class="card me-sm-4">
  <div class="card-body">
    <blockquote class="blockquote fs-sm">
      <p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>
    </blockquote>
  </div>
  <footer class="fs-sm px-4 pb-4">
    <div class="d-flex align-items-center border-top mb-n2 pt-3">
      <img class="rounded-circle" width="42" src="path-to-image" alt="Tim Brooks"/>
      <div class="text-heading fw-medium ps-2 ms-1 mt-n1">Tim Brooks</div>
    </div>
  </footer>
</div>

<!-- Testimonial inside card: Shadow -->
<div class="card border-0 shadow">
  <div class="card-body">
    <blockquote class="blockquote fs-sm">
      <p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>
    </blockquote>
  </div>
  <footer class="fs-sm px-4 pb-4">
    <div class="d-flex align-items-center border-top mb-n2 pt-3">
      <img class="rounded-circle" width="42" src="path-to-image" alt="Sarah Cole"/>
      <div class="text-heading fw-medium ps-2 ms-1 mt-n1">Sarah Cole</div>
    </div>
  </footer>
</div>

// Testimonial inside card: Border
.card
  .card-body
    blockquote.blockquote.fs-sm
      p.mb-0 Lorem ipsum dolor sit amet, consectetur adipiscing elit...
  footer.fs-sm.px-4.pb-4
    .d-flex.align-items-center.border-top.mb-n2.pt-3
      img(src="path-to-image", alt="Tim Brooks", width="42").rounded-circle
      .text-heading.fw-medium.ps-2.ms-1.mt-n1
        | Tim Brooks

// Testimonial inside card: Shadow
.card.border-0.shadow
  .card-body
    blockquote.blockquote.fs-sm
      p.mb-0 Lorem ipsum dolor sit amet, consectetur adipiscing elit...
  footer.fs-sm.px-4.pb-4
    .d-flex.align-items-center.border-top.mb-n2.pt-3
      img(src="path-to-image", alt="Sarah Cole", width="42").rounded-circle
      .text-heading.fw-medium.ps-2.ms-1.mt-n1
        | Sarah Cole

From Instagram

<!-- From Instagram: Card border -->
<a class="card" href="#">
  <span class="card-floating-icon">
    <i class="ai-instagram"></i>
  </span>
  <img class="card-img-top" src="path-to-image" alt="Image"/>
  <footer class="fs-sm mt-auto py-2 px-4">
    <div class="d-flex align-items-center py-2">
      <img class="rounded-circle" width="42" src="path-to-image" alt="@sarah.cole"/>
      <div class="text-heading fw-medium ps-2 ms-1 mt-n1">@sarah.cole</div>
    </div>
  </footer>
</a>

<!-- From Instagram: Card shadow -->
<a class="card border-0 shadow" href="#">
  <span class="card-floating-icon">
    <i class="ai-instagram"></i>
  </span>
  <img class="card-img-top" src="path-to-image" alt="Image"/>
  <footer class="fs-sm mt-auto py-2 px-4">
    <div class="d-flex align-items-center py-2">
      <img class="rounded-circle" width="42" src="path-to-image" alt="@morni.janeffel"/>
      <div class="text-heading fw-medium ps-2 ms-1 mt-n1">@morni.janeffel</div>
    </div>
  </footer>
</a>

// From Instagram: Card border
a(href="#").card
  span.card-floating-icon
    i.ai-instagram
  img(src="path-to-image", alt="Image").card-img-top
  footer.fs-sm.mt-auto.py-2.px-4
    .d-flex.align-items-center.py-2
      img(src="path-to-image", alt="@sarah.cole", width="42").rounded-circle
      .text-heading.fw-medium.ps-2.ms-1.mt-n1
        | @sarah.cole

// From Instagram: Card shadow
a(href="#").card.border-0.shadow
  span.card-floating-icon
    i.ai-instagram
  img(src="path-to-image", alt="Image").card-img-top
  footer.fs-sm.mt-auto.py-2.px-4
    .d-flex.align-items-center.py-2
      img(src="path-to-image", alt="@morni.janeffel", width="42").rounded-circle
      .text-heading.fw-medium.ps-2.ms-1.mt-n1
        | @morni.janeffel

Inside carousel: Style 1

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.

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

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

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

// Testimonials carousel: Style 1
.tns-carousel

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

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

Inside carousel: Style 2

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

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.

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 qui blanditiis praesentium voluptatum.

Mattis enim ut tellus elementum sagittis vitae et leo duis.

Sanomi Smith

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.

Charlie Welch

<!-- Testimonials carousel: Style 2 -->
<div class="tns-carousel-wrapper row">

  <!-- Actual carousel -->
  <div class="col-md-8">
    <div class="tns-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="d-flex align-items-center">
          <img src="path-to-image" class="rounded-circle" width="42" alt="Emma Brown"/>
          <div class="text-heading fs-md fw-medium ps-2 ms-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="d-flex align-items-center">
          <img src="path-to-image" class="rounded-circle" width="42" alt="Tim Brooks"/>
          <div class="text-heading fs-md fw-medium ps-2 ms-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="d-flex align-items-center">
          <img src="path-to-image" class="rounded-circle" width="42" alt="Sanomi Smith"/>
          <div class="text-heading fs-md fw-medium ps-2 ms-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="d-flex align-items-center">
          <img src="path-to-image" class="rounded-circle" width="42" alt="Charlie Welch"/>
          <div class="text-heading fs-md fw-medium ps-2 ms-1">Charlie Welch</div>
        </footer>
      </blockquote>
    </div>
  </div>

  <!-- Custom pager -->
  <div class="col-md-4">
    <div class="tns-carousel-pager d-flex flex-wrap flex-md-column justify-content-center align-items-center align-items-md-start border-start pt-4 mt-4 ps-md-3 pt-md-0 mt-md-0">
      <a href="#" class="swap-image active mx-4 my-3 my-md-4" data-goto="1">
        <img src="path-to-color-image" class="swap-to" width="100" alt="Logo"/>
        <img src="path-to-grayscale-image" class="swap-from" width="100" alt="Logo"/>
      </a>
      <a href="#" class="swap-image mx-4 my-3 my-md-4" data-goto="2">
        <img src="path-to-color-image" class="swap-to" width="100" alt="Logo"/>
        <img src="path-to-grayscale-image" class="swap-from" width="100" alt="Logo"/>
      </a>
      <a href="#" class="swap-image mx-4 my-3 my-md-4" data-goto="3">
        <img src="path-to-color-image" class="swap-to" width="100" alt="Logo"/>
        <img src="path-to-grayscale-image" class="swap-from" width="100" alt="Logo"/>
      </a>
      <a href="#" class="swap-image mx-4 my-3 my-md-4" data-goto="4">
        <img src="path-to-color-image" class="swap-to" width="100" alt="Logo"/>
        <img src="path-to-grayscale-image" class="swap-from" width="100" alt="Logo"/>
      </a>
    </div>
  </div>
</div>

// Testimonials carousel: Style 2
.tns-carousel-wrapper.row
  
  // Actual carousel
  .col-md-8
    .tns-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.d-flex.align-items-center
          img(src="path-to-image", alt="Emma Brown", width="42").rounded-circle
          .text-heading.fs-md.fw-medium.ps-2.ms-1
            | Emma Brown
      blockquote.blockquote.mt-3.mb-0
        p Lorem ipsum dolor sit amet, consectetur adipiscing elit...
        footer.d-flex.align-items-center
          img(src="path-to-image", alt="Tim Brooks", width="42").rounded-circle
          .text-heading.fs-md.fw-medium.ps-2.ms-1
            | Tim Brooks
      blockquote.blockquote.mt-3.mb-0
        p Lorem ipsum dolor sit amet, consectetur adipiscing elit...
        footer.d-flex.align-items-center
          img(src="path-to-image", alt="Sanomi Smith", width="42").rounded-circle
          .text-heading.fs-md.fw-medium.ps-2.ms-1
            | Sanomi Smith
      blockquote.blockquote.mt-3.mb-0
        p Lorem ipsum dolor sit amet, consectetur adipiscing elit...
        footer.d-flex.align-items-center
          img(src="path-to-image", alt="Charlie Welch", width="42").rounded-circle
          .text-heading.fs-md.fw-medium.ps-2.ms-1
            | Charlie Welch
  
  // Custom pager
  .col-md-4
    .tns-carousel-pager.d-flex.flex-wrap.flex-md-column.justify-content-center.align-items-center.align-items-md-start.border-start.pt-4.mt-4.ps-md-3.pt-md-0.mt-md-0
      a(href="#" data-goto="1").swap-image.active.mx-4.my-3.my-md-4
        img(src="path-to-color-image", alt="Logo", width="100").swap-to
        img(src="path-to-grayscale-image", alt="Logo", width="100").swap-from
      a(href="#" data-goto="2").swap-image.mx-4.my-3.my-md-4
        img(src="path-to-color-image", alt="Logo", width="100").swap-to
        img(src="path-to-grayscale-image", alt="Logo", width="100").swap-from
      a(href="#" data-goto="3").swap-image.mx-4.my-3.my-md-4
        img(src="path-to-color-image", alt="Logo", width="100").swap-to
        img(src="path-to-grayscale-image", alt="Logo", width="100").swap-from
      a(href="#" data-goto="4").swap-image.mx-4.my-3.my-md-4
        img(src="path-to-color-image", alt="Logo", width="100").swap-to
        img(src="path-to-grayscale-image", alt="Logo", width="100").swap-from

Inside carousel: Style 3

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...

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.

<!-- Testimonials carousel: Style 3 -->
<div class="tns-carousel-wrapper">
  <div class="tns-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 shadow mx-1">
        <div class="card-body">
          <blockquote class="blockquote fs-sm">
            <p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>
          </blockquote>
        </div>
        <footer class="fs-sm px-4 pb-4">
          <div class="d-flex align-items-center border-top mb-n2 pt-3">
            <img class="rounded-circle" width="42" src="path-to-image" alt="Sarah Cole"/>
            <div class="text-heading fw-medium ps-2 ms-1 mt-n1">Sarah Cole</div>
          </div>
        </footer>
      </div>
    </div>

    <!-- From Instagram-->
    <div class="py-2">
      <a class="card h-100 border-0 shadow mx-1" href="#">
        <span class="card-floating-icon">
          <i class="ai-instagram"></i>
        </span>
        <img class="card-img-top" src="path-to-image" alt="Image"/>
        <footer class="fs-sm mt-auto py-2 px-4">
          <div class="d-flex align-items-center py-2">
            <img class="rounded-circle" width="42" src="path-to-image" alt="@morni.janeffel"/>
            <div class="text-heading fw-medium ps-2 ms-1 mt-n1">@morni.janeffel</div>
          </div>
        </footer>
      </a>
    </div>

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

// Testimonials carousel: Style 3
.tns-carousel-wrapper
  .tns-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.shadow.mx-1
        .card-body
          blockquote.blockquote.fs-sm
            p.mb-0 Lorem ipsum dolor sit amet, consectetur adipiscing elit...
        footer.fs-sm.px-4.pb-4
          .d-flex.align-items-center.border-top.mb-n2.pt-3
            img(src="path-to-image", alt="Sarah Cole", width="42").rounded-circle
            .text-heading.fw-medium.ps-2.ms-1.mt-n1
              | Sarah Cole

    // From Instagram
    .py-2
      a(href="#").card.h-100.border-0.shadow.mx-1
        span.card-floating-icon
          i.ai-instagram
        img(src="path-to-image", alt="Image").card-img-top
        footer.fs-sm.mt-auto.py-2.px-4
          .d-flex.align-items-center.py-2
            img(src="path-to-image", alt="@morni.janeffel", width="42").rounded-circle
            .text-heading.fw-medium.ps-2.ms-1.mt-n1
              | @morni.janeffel

    // Add as many testimonials as you need

Inside carousel: Style 4

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.

Paul Anderson, CEO Company Ltd.

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.

Miguel Sánchez, CEO Company Ltd.

<!-- Testimonials carousel: Style 4 -->
<div class="tns-carousel-wrapper">
  <div class="tns-carousel-inner" data-carousel-options='{"mode": "gallery", "nav": false}'>

    <!-- Item -->
    <div>
      <div class="pb-3 pb-md-0 ps-md-7 ms-md-3">
        <div class="bg-size-cover bg-position-center rounded-3 py-7" style="background-image: url(path-to-background-image);">
          <div class="d-md-flex align-items-center ms-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 shadow-lg me-6 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="btn-video btn-video-sm my-4" data-sub-html='<h6 class="fs-sm text-light">Video caption</h6>'></a>
          </div>
        </div>
        <div class="d-md-none mt-n6 px-3 scale-up">
          <div class="card card-body py-grid-gutter px-grid-gutter border-0 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
.tns-carousel-wrapper
  .tns-carousel-inner(data-carousel-options='{"mode": "gallery", "nav": false}')

    // Item
    div
      .pb-3.pb-md-0.ps-md-7.ms-md-3
        .bg-size-cover.bg-position-center.rounded-3.py-7(style="background-image: url(path-to-background-image);")
          .d-md-flex.align-items-center.ms-md-n7.text-center.text-md-left
            .card.card-body.d-none.d-md-flex.py-grid-gutter.px-grid-gutter.border-0.shadow-lg.me-6.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="fs-sm text-light">Video caption</h6>').btn-video.btn-video-sm.my-4
        .d-md-none.mt-n6.px-3.scale-up
          .card.card-body.py-grid-gutter.px-grid-gutter.border-0.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

3 days ago

<!-- Product review: Default -->
<div class="d-flex align-items-center mb-2 pb-1">
  <div class="star-rating star-rating-lg me-2">
    <i class="sr-star ai-star-filled active"></i>
    <i class="sr-star ai-star-filled active"></i>
    <i class="sr-star ai-star-filled active"></i>
    <i class="sr-star ai-star-filled active"></i>
    <i class="sr-star ai-star"></i>
  </div>
  <span class="fs-sm text-muted">76% of users found this review helpful</span>
</div>
<p class="fs-md">Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>
<div class="d-flex align-items-center justify-content-between">
  <div class="d-flex d-flex align-items-center me-3">
    <img src="path-to-image" class="rounded-circle" width="42" alt="Barbara Palson"/>
    <div class="ps-2 ms-1">
      <h6 class="fs-sm mb-n1">Barbara Palson</h6>
      <span class="fs-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>

// Product review: Default
.d-flex.align-items-center.mb-2.pb-1
  +star-rating(4).star-rating-lg.me-2
  span.fs-sm.text-muted 76% of users found this review helpful
p.fs-md Lorem ipsum dolor sit amet, consectetur adipiscing elit...
.d-flex.align-items-center.justify-content-between
  .align-items-center.me-3
    img(src="path-to-image", alt="Barbara Palson", width="42").rounded-circle
    .ps-2.ms-1
      h6.fs-sm.mb-n1 Barbara Palson
      span.fs-xs.text-muted 3 days ago
  .text-nowrap
    button.btn-like(type="button") 15
    button.btn-dislike(type="button") 3

Product review: Card

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.

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.

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

<!-- Product review: Card shadow -->
<div class="card border-0 shadow">
  <div class="card-body">
    <a class="d-flex align-items-center nav-heading mb-3" href="#">
      <img width="60" src="path-to-image" alt="Product thumb"/>
      <div class="fs-md fw-medium ps-2 ms-1">
        Wireless Bluetooth Headset
      </div>
    </a>
    <div class="mb-2 pb-1 star-rating">
      <i class="sr-star ai-star-filled active"></i>
      <i class="sr-star ai-star-filled active"></i>
      <i class="sr-star ai-star-filled active"></i>
      <i class="sr-star ai-star-filled active"></i>
      <i class="sr-star ai-star"></i>
    </div>
    <p class="fs-sm mb-0">Lorem ipsum dolor sit amet...</p>
  </div>
  <footer class="fs-sm px-4 pb-4">
    <div class="d-flex align-items-center border-top mb-n2 pt-3">
      <img class="rounded-circle" width="42" src="path-to-image" alt="Sarah Cole"/>
      <div class="text-heading fw-medium ps-2 ms-1 mt-n1">
        Sarah Cole
      </div>
    </div>
  </footer>
</div>

// Product review: Card border
.card
  .card-body
    a(href="#").d-flex.align-items-center.nav-heading.mb-3
      img(src="path-to-image", alt="Product thumb", width="60")
      .fs-md.fw-medium.ps-2.ms-1
        | Running Sneakers, Sports Collection
    +star-rating(5).mb-2.pb-1
    p.fs-sm.mb-0 Lorem ipsum dolor sit amet...
  footer.fs-sm.px-4.pb-4
    .d-flex.align-items-center.border-top.mb-n2.pt-3
      img(src="path-to-image", alt="Tim Brooks", width="42").rounded-circle
      .text-heading.fw-medium.ps-2.ms-1.mt-n1
        | Tim Brooks

// Product review: Card shadow
.card.border-0.shadow
  .card-body
    a(href="#").d-flex.align-items-center.nav-heading.mb-3
      img(src="path-to-image", alt="Product thumb", width="60")
      .fs-md.fw-medium.ps-2.ms-1
        | Wireless Bluetooth Headset
    +star-rating(4).mb-2.pb-1
    p.fs-sm.mb-0 Lorem ipsum dolor sit amet...
  footer.fs-sm.px-4.pb-4
    .d-flex.align-items-center.border-top.mb-n2.pt-3
      img(src="path-to-image", alt="Sarah Cole", width="42").rounded-circle
      .text-heading.fw-medium.ps-2.ms-1.mt-n1
        | Sarah Cole