Back to Testimonials
Testimonials

Three Quote Cards

Star ratings and customer quotes.

#testimonials#reviews#stars

Live preview

Source code

html
<section class="py-5 bg-light">
  <div class="container py-4 text-center">
    <h6 class="text-danger fw-bold text-uppercase">Testimonials</h6>
    <h2 class="display-6 fw-bold mb-5">What Our Guests Say</h2>
    <div class="row g-4">
      <div class="col-md-4">
        <div class="card h-100 border-0 shadow-sm rounded-4 p-4 text-start">
          <div class="text-warning mb-2"><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i></div>
          <h5 class="fw-bold">"Absolute Perfection!"</h5>
          <p class="text-muted fst-italic">"The risotto was out of this world. Service was top-notch."</p>
          <div class="d-flex align-items-center mt-3 pt-3 border-top">
            <img src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=80" class="rounded-circle me-3" style="width:48px;height:48px;object-fit:cover;">
            <div>
              <div class="fw-bold">Sarah Jenkins</div><small class="text-muted">Local Guide</small>
            </div>
          </div>
        </div>
      </div>
      <div class="col-md-4">
        <div class="card h-100 border-0 shadow-sm rounded-4 p-4 text-start">
          <div class="text-warning mb-2"><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-half"></i></div>
          <h5 class="fw-bold">"A Hidden Gem"</h5>
          <p class="text-muted fst-italic">"We stumbled upon this place and what a find!"</p>
          <div class="d-flex align-items-center mt-3 pt-3 border-top">
            <img src="https://images.unsplash.com/photo-1500648767791-00dcc994a43e?w=80" class="rounded-circle me-3" style="width:48px;height:48px;object-fit:cover;">
            <div>
              <div class="fw-bold">Michael Chen</div><small class="text-muted">Food Critic</small>
            </div>
          </div>
        </div>
      </div>
      <div class="col-md-4">
        <div class="card h-100 border-0 shadow-sm rounded-4 p-4 text-start">
          <div class="text-warning mb-2"><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i></div>
          <h5 class="fw-bold">"Best Date Night Ever"</h5>
          <p class="text-muted fst-italic">"They made our anniversary unforgettable. Thanks!"</p>
          <div class="d-flex align-items-center mt-3 pt-3 border-top">
            <img src="https://images.unsplash.com/photo-1487412720507-e7ab37603c6f?w=80" class="rounded-circle me-3" style="width:48px;height:48px;object-fit:cover;">
            <div>
              <div class="fw-bold">Emily Davis</div><small class="text-muted">Regular Customer</small>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

More designs in this section