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