Testimonials / reviews
Component is designed to showcase testimonials from satisfied clients or reviews of the products on your website.
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="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.
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 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
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="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
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="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
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="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
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="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
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 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>
// Product review: Default
.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
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis ipsum suspendisse ultrices gravida.
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="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