→ Marcus Thornton
→ Customer Product Review Card with Rating...

Customer Product Review Card with Rating System

A customizable product review card displaying customer feedback, star ratings, and user information to build trust with potential buyers.

This Example is contributed by Marcus Thornton, on 26-Mar-2025. It is responsive. similar terms for this example are Testimonials,endorsement,review,Vote

Testimonial Rating E-commerce Feedback

Author Marcus Thornton

Fork Fullscreen

<div class="review-card">
  <div class="review-header">
    <div class="user-info">
      <div class="avatar">
        <img src="https://randomuser.me/api/portraits/women/42.jpg" alt="User Avatar">
      </div>
      <div class="user-details">
        <h3 class="user-name">Sarah Johnson</h3>
        <span class="user-handle">@sjohnson92</span>
        <span class="verified-badge">Verified Purchase</span>
      </div>
    </div>
    <div class="review-date">June 15, 2023</div>
  </div>
  
  <div class="rating">
    <div class="stars">
      <span class="star filled">★</span>
      <span class="star filled">★</span>
      <span class="star filled">★</span>
      <span class="star filled">★</span>
      <span class="star half">★</span>
    </div>
    <div class="rating-value">4.5/5</div>
  </div>
  
  <div class="review-content">
    <h4 class="review-title">Exceeded my expectations!</h4>
    <p class="review-text">I was skeptical at first, but this product completely transformed my daily routine. The quality is outstanding, and it's incredibly easy to use. I've already recommended it to several friends!</p>
  </div>
  
  <div class="product-info">
    <div class="product-image">
      <img src="https://images.unsplash.com/photo-1585386959984-a4155224a1ad?ixlib=rb-4.0.3&auto=format&fit=crop&w=300&q=80" alt="Product Image">
    </div>
    <div class="product-details">
      <h5 class="product-name">Wireless Noise-Cancelling Headphones</h5>
      <span class="product-price">$129.99</span>
    </div>
  </div>
  
  <div class="review-footer">
    <div class="review-actions">
      <button class="action-btn helpful"><span class="icon">👍</span> Helpful (24)</button>
      <button class="action-btn report"><span class="icon">🚩</span> Report</button>
    </div>
    <button class="action-btn share"><span class="icon">↗️</span> Share</button>
  </div>
</div>

Related Examples