Testimonials / reviews

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

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

<!-- 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 -->
<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 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 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">&nbsp;</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