Testimonials / reviews
Component is designed to showcase testimonials from satisfied clients or reviews of the products on your website.
Blockquote based
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.
<!-- Simple blockquote based testimonial -->
<blockquote class="blockquote">
<p>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.</p>
<footer class="d-flex align-items-center">
<img class="rounded-circle me-1" src="path-to-avatar-image" width="48" alt="Avatar">
<div class="ps-2">
<h6 class="fs-base mb-0">Ralph Edwards</h6>
<div class="text-muted fw-normal fs-sm">Co-founder, CEO</div>
</div>
</footer>
</blockquote>
// Simple blockquote based testimonial
blockquote.blockquote
p 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.
footer.d-flex.align-items-center
img(src="path-to-avatar-image", width="48", alt="Avatar").rounded-circle.me-1
.ps-2
h6.fs-base.mb-0 Ralph Edwards
.text-muted.fw-normal.fs-sm Co-founder, CEO
Inside card: Basic
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.
<!-- Testimonial inside card: Basic -->
<div class="card border-0 shadow-sm">
<blockquote class="blockquote card-body">
<p>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.</p>
<footer class="d-flex align-items-center">
<img src="path-to-image" width="56" alt="Logo">
<div class="ps-3">
<h6 class="fs-base mb-0">Zalo Tech Company</h6>
<div class="text-muted fw-normal fs-sm">Floyd Miles, Head of HR Department</div>
</div>
</footer>
</blockquote>
</div>
// Testimonial inside card: Basic
.card.border-0.shadow-sm
blockquote.blockquote.card-body
p 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.
footer.d-flex.align-items-center
img(src="path-to-image", width="56", alt="Logo")
.ps-3
h6.fs-base.mb-0 Zalo Tech Company
.text-muted.fw-normal.fs-sm Floyd Miles, Head of HR Department
Inside card: Compound
"I will select the best accommodation for you"
Amet libero morbi venenatis ut est. Iaculis leo ultricies nunc id ante adipiscing. Vel metus odio at faucibus ac. Neque id placerat et id ut. Scelerisque eu mi ullamcorper sit urna. Est volutpat dignissim elementum nec.
<!-- Testimonial inside card: Compound -->
<div class="card border-0 shadow-sm">
<blockquote class="blockquote card-body">
<h4 style="max-width: 20rem;">"I will select the best accommodation for you"</h4>
<p>Amet libero morbi venenatis ut est. Iaculis leo ultricies nunc id ante adipiscing. Vel metus odio at faucibus ac. Neque id placerat et id ut. Scelerisque eu mi ullamcorper sit urna. Est volutpat dignissim elementum nec.</p>
<footer class="d-flex justify-content-between">
<div class="pe-3">
<h6 class="mb-0">Floyd Miles</h6>
<div class="text-muted fw-normal fs-sm mb-3">Imperial Property Group Agent</div>
<a href="#" class="btn btn-icon btn-light-primary btn-xs shadow-sm rounded-circle me-2 mb-2">
<i class="fi-facebook"></i>
</a>
<a href="#" class="btn btn-icon btn-light-primary btn-xs shadow-sm rounded-circle me-2 mb-2">
<i class="fi-twitter"></i>
</a>
<a href="#" class="btn btn-icon btn-light-primary btn-xs shadow-sm rounded-circle me-2 mb-2">
<i class="fi-linkedin"></i>
</a>
</div>
<div>
<div class="star-rating">
<i class="star-rating-icon fi-star-filled active"></i>
<i class="star-rating-icon fi-star-filled active"></i>
<i class="star-rating-icon fi-star-filled active"></i>
<i class="star-rating-icon fi-star-filled active"></i>
<i class="star-rating-icon fi-star-filled active"></i>
</div>
<div class="text-muted fs-sm mt-1">45 reviews</div>
</div>
</footer>
</blockquote>
</div>
// Testimonial inside card: Compound
.card.border-0.shadow-sm
blockquote.blockquote.card-body
h4(style="max-width: 20rem;")
| "I will select the best accommodation for you"
p Amet libero morbi venenatis ut est. Iaculis leo ultricies nunc id ante adipiscing. Vel metus odio at faucibus ac. Neque id placerat et id ut. Scelerisque eu mi ullamcorper sit urna. Est volutpat dignissim elementum nec.
footer.d-flex.justify-content-between
.pe-3
h6.mb-0 Floyd Miles
.text-muted.fw-normal.fs-sm.mb-3 Imperial Property Group Agent
a(href="#").btn.btn-icon.btn-light-primary.btn-xs.shadow-sm.rounded-circle.me-2.mb-2
i.fi-facebook
a(href="#").btn.btn-icon.btn-light-primary.btn-xs.shadow-sm.rounded-circle.me-2.mb-2
i.fi-twitter
a(href="#").btn.btn-icon.btn-light-primary.btn-xs.shadow-sm.rounded-circle.me-2.mb-2
i.fi-linkedin
div
+star-rating(5)
.text-muted.fs-sm.mt-1 45 reviews
Review
![Avatar](../img/avatars/03.jpg)
Annette Black
Elementum ut quam tincidunt egestas vitae elit, hendrerit. Ullamcorper nulla amet lobortis elit, nibh condimentum enim. Aliquam felis nisl tellus sodales lectus dictum tristique proin vitae. Odio fermentum viverra tortor quis.
<!-- Review -->
<div class="d-flex justify-content-between mb-3">
<div class="d-flex align-items-center pe-2">
<img class="rounded-circle me-1" src="path-to-avatar-image" width="48" alt="Avatar">
<div class="ps-2">
<h6 class="fs-base mb-0">Annette Black</h6>
<div class="star-rating">
<i class="star-rating-icon fi-star-filled active"></i>
<i class="star-rating-icon fi-star-filled active"></i>
<i class="star-rating-icon fi-star-filled active"></i>
<i class="star-rating-icon fi-star-filled active"></i>
<i class="star-rating-icon fi-star"></i>
</div>
</div>
</div>
<span class="text-muted fs-sm">Jan 17, 2021</span>
</div>
<p>Elementum ut quam tincidunt egestas vitae elit, hendrerit. Ullamcorper nulla amet lobortis elit, nibh condimentum enim. Aliquam felis nisl tellus sodales lectus dictum tristique proin vitae. Odio fermentum viverra tortor quis.</p>
<div class="d-flex align-items-center">
<button type="button" class="btn-like">
<i class="fi-like"></i>
<span>(3)</span>
</button>
<div class="border-end me-1"> </div>
<button type="button" class="btn-dislike">
<i class="fi-dislike"></i>
<span>(0)</span>
</button>
</div>
// Review
.d-flex.justify-content-between.mb-3
.d-flex.align-items-center.pe-2
img(src="path-to-avatar-image", width="48", alt="Avatar").rounded-circle.me-1
.ps-2
h6.fs-base.mb-0 Annette Black
+star-rating(4)
span.text-muted.fs-sm Jan 17, 2021
p Elementum ut quam tincidunt egestas vitae elit, hendrerit. Ullamcorper nulla amet lobortis elit, nibh condimentum enim. Aliquam felis nisl tellus sodales lectus dictum tristique proin vitae. Odio fermentum viverra tortor quis.
.d-flex.align-items-center
button(type="button").btn-like
i.fi-like
span (3)
.border-end.me-1
button(type="button").btn-dislike
i.fi-dislike
span (0)
Comment
Elementum ut quam tincidunt egestas vitae elit, hendrerit. Ullamcorper nulla amet lobortis elit, nibh condimentum enim. Aliquam felis nisl tellus sodales lectus dictum tristique proin vitae. Odio fermentum viverra tortor quis.
![Avatar](../img/avatars/06.jpg)
Barbara Palson
3 days agoLorem 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.
![Avatar](../img/avatars/05.jpg)
Daniel Adams
2 days ago<!-- Comment with reply -->
<div class="border-bottom py-4">
<p>Elementum ut quam tincidunt egestas vitae elit, hendrerit. Ullamcorper nulla amet lobortis elit, nibh condimentum enim. Aliquam felis nisl tellus sodales lectus dictum tristique proin vitae. Odio fermentum viverra tortor quis.</p>
<div class="d-flex justify-content-between align-items-center">
<div class="d-flex align-items-center pe-2">
<img class="rounded-circle me-1" src="path-to-avatar-image" width="48" alt="Avatar">
<div class="ps-2">
<h6 class="fs-base mb-0">Barbara Palson</h6>
<span class="text-muted fs-sm">3 days ago</span>
</div>
</div>
<button type="button" class="btn btn-link btn-sm">
<i class="fi-reply fs-lg me-2"></i>
<span class="fw-normal">Reply</span>
</button>
</div>
<!-- Comment reply -->
<div class="border-start border-4 ps-4 ms-4 mt-4">
<p>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.</p>
<div class="d-flex align-items-center pe-2">
<img class="rounded-circle me-1" src="path-to-avatar-image" width="48" alt="Avatar">
<div class="ps-2">
<h6 class="fs-base mb-0">Daniel Adams</h6>
<span class="text-muted fs-sm">2 days ago</span>
</div>
</div>
</div>
</div>
// Comment with reply
.border-bottom.py-4
p Elementum ut quam tincidunt egestas vitae elit, hendrerit. Ullamcorper nulla amet lobortis elit, nibh condimentum enim. Aliquam felis nisl tellus sodales lectus dictum tristique proin vitae. Odio fermentum viverra tortor quis.
.d-flex.justify-content-between.align-items-center
.d-flex.align-items-center.pe-2
img(src="path-to-avatar-image", width="48", alt="Avatar").rounded-circle.me-1
.ps-2
h6.fs-base.mb-0 Barbara Palson
span.text-muted.fs-sm 3 days ago
button(type="button").btn.btn-link.btn-sm
i.fi-reply.fs-lg.me-2
span.fw-normal Reply
// Comment reply
.border-start.border-4.ps-4.ms-4.mt-4
p 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.
.d-flex.align-items-center.pe-2
img(src="path-to-avatar-image", width="48", alt="Avatar").rounded-circle.me-1
.ps-2
h6.fs-base.mb-0 Daniel Adams
span.text-muted.fs-sm 2 days ago
Light version
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.
![Avatar](../img/avatars/03.jpg)
Annette Black
Elementum ut quam tincidunt egestas vitae elit, hendrerit. Ullamcorper nulla amet lobortis elit, nibh condimentum enim. Aliquam felis nisl tellus sodales lectus dictum tristique proin vitae. Odio fermentum viverra tortor quis.
Elementum ut quam tincidunt egestas vitae elit, hendrerit. Ullamcorper nulla amet lobortis elit, nibh condimentum enim. Aliquam felis nisl tellus sodales lectus dictum tristique proin vitae. Odio fermentum viverra tortor quis.
![Avatar](../img/avatars/06.jpg)
Barbara Palson
3 days ago<!-- Light testimonial inside card -->
<div class="card card-light">
<blockquote class="blockquote card-body text-light">
<p class="opacity-70">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.</p>
<footer class="d-flex align-items-center">
<img src="path-to-image" width="56" alt="Logo">
<div class="ps-3">
<h6 class="fs-base text-light mb-0">Elastic Kibana</h6>
<div class="text-light fw-normal fs-sm opacity-50">Floyd Miles, Head of HR Department</div>
</div>
</footer>
</blockquote>
</div>
<!-- Light review -->
<div class="d-flex justify-content-between mb-3">
<div class="d-flex align-items-center pe-2">
<img class="rounded-circle me-1" src="paath-to-avatar-image" width="48" alt="Avatar">
<div class="ps-2">
<h6 class="fs-base text-light mb-0">Annette Black</h6>
<div class="text-light">
<div class="star-rating">
<i class="star-rating-icon fi-star-filled active"></i>
<i class="star-rating-icon fi-star-filled active"></i>
<i class="star-rating-icon fi-star-filled active"></i>
<i class="star-rating-icon fi-star-filled active"></i>
<i class="star-rating-icon fi-star"></i>
</div>
</div>
</div>
</div>
<span class="text-light opacity-50 fs-sm">Jan 17, 2021</span>
</div>
<p class="text-light opacity-70">Elementum ut quam tincidunt egestas vitae elit, hendrerit. Ullamcorper nulla amet lobortis elit, nibh condimentum enim. Aliquam felis nisl tellus sodales lectus dictum tristique proin vitae. Odio fermentum viverra tortor quis.</p>
<div class="d-flex align-items-center">
<button type="button" class="btn-like btn-light">
<i class="fi-like"></i>
<span>(3)</span>
</button>
<div class="border-end border-light me-1"> </div>
<button type="button" class="btn-dislike btn-light">
<i class="fi-dislike"></i>
<span>(0)</span>
</button>
</div>
<!-- Light comment -->
<div class="border-bottom border-light py-4">
<p class="text-light opacity-70">Elementum ut quam tincidunt egestas vitae elit, hendrerit. Ullamcorper nulla amet lobortis elit, nibh condimentum enim. Aliquam felis nisl tellus sodales lectus dictum tristique proin vitae. Odio fermentum viverra tortor quis.</p>
<div class="d-flex justify-content-between align-items-center">
<div class="d-flex align-items-center pe-2">
<img class="rounded-circle me-1" src="path-to-avatar-image" width="48" alt="Avatar">
<div class="ps-2">
<h6 class="fs-base text-light mb-0">Barbara Palson</h6>
<span class="text-light opacity-50 fs-sm">3 days ago</span>
</div>
</div>
<button type="button" class="btn btn-link btn-light btn-sm">
<i class="fi-reply fs-lg me-2"></i>
<span class="fw-normal">Reply</span>
</button>
</div>
</div>
// Light testimonial inside card
.card.card-light
blockquote.blockquote.card-body.text-light
p.opacity-70 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.
footer.d-flex.align-items-center
img(src="path-to-image", width="56", alt="Logo")
.ps-3
h6.fs-base.text-light.mb-0
| Elastic Kibana
.text-light.fw-normal.fs-sm.opacity-50
| Floyd Miles, Head of HR Department
// Light review
.d-flex.justify-content-between.mb-3
.d-flex.align-items-center.pe-2
img(src="path-to-avatar-image", width="48", alt="Avatar").rounded-circle.me-1
.ps-2
h6.fs-base.text-light.mb-0 Annette Black
.text-light
+star-rating(4)
span.text-light.opacity-50.fs-sm Jan 17, 2021
p.text-light.opacity-70 Elementum ut quam tincidunt egestas vitae elit, hendrerit. Ullamcorper nulla amet lobortis elit, nibh condimentum enim. Aliquam felis nisl tellus sodales lectus dictum tristique proin vitae. Odio fermentum viverra tortor quis.
.d-flex.align-items-center
button(type="button").btn-like.btn-light
i.fi-like
span (3)
.border-end.border-light.me-1
button(type="button").btn-dislike.btn-light
i.fi-dislike
span (0)
// Light comment
.border-bottom.border-light.py-4
p.text-light.opacity-70 Elementum ut quam tincidunt egestas vitae elit, hendrerit. Ullamcorper nulla amet lobortis elit, nibh condimentum enim. Aliquam felis nisl tellus sodales lectus dictum tristique proin vitae. Odio fermentum viverra tortor quis.
.d-flex.justify-content-between.align-items-center
.d-flex.align-items-center.pe-2
img(src="path-to-avatar-image", width="48", alt="Avatar").rounded-circle.me-1
.ps-2
h6.fs-base.text-light.mb-0
| Barbara Palson
span.text-light.opacity-50.fs-sm
| 3 days ago
button(type="button").btn.btn-link.btn-light.btn-sm
i.fi-reply.fs-lg.me-2
span.fw-normal Reply