→ Emily Thompson
→ Customer Rating Statistics Card

Customer Rating Statistics Card

This Example is contributed by Emily Thompson, on 17-Feb-2025. It is responsive. similar terms for this example are Vote,Statistic,Data Visualization,Statistical Overview,Statistics Display,Stats,Info,Show info,Statistics

Rating Stats Display

Author Emily Thompson

Fork Fullscreen

<div class="rating-section">
  <h2>Customer Ratings</h2>
  <div class="overall-rating">
    <span class="rating-number">4.5</span>
    <div class="stars">
      <span class="star">&#9733;</span>
      <span class="star">&#9733;</span>
      <span class="star">&#9733;</span>
      <span class="star">&#9733;</span>
      <span class="star half">&#9733;</span>
    </div>
    <span class="total-reviews">(120 Reviews)</span>
  </div>
  <div class="rating-breakdown">
    <div class="rating-bar">
      <span class="rating-label">5 Stars</span>
      <div class="bar-container">
        <div class="bar" style="width: 75%;"></div>
      </div>
      <span class="rating-percentage">75%</span>
    </div>
    <div class="rating-bar">
      <span class="rating-label">4 Stars</span>
      <div class="bar-container">
        <div class="bar" style="width: 15%;"></div>
      </div>
      <span class="rating-percentage">15%</span>
      <div class="user-avatars">
      </div>
    </div>
       <div class="rating-bar">
      <span class="rating-label">3 Stars</span>
      <div class="bar-container">
        <div class="bar" style="width: 5%;"></div>
      </div>
      <span class="rating-percentage">5%</span>
      <div class="user-avatars">
      </div>
    </div>
       <div class="rating-bar">
      <span class="rating-label">2 Stars</span>
      <div class="bar-container">
        <div class="bar" style="width: 3%;"></div>
      </div>
      <span class="rating-percentage">3%</span>
    </div>
       <div class="rating-bar">
      <span class="rating-label">1 Star</span>
      <div class="bar-container">
        <div class="bar" style="width: 2%;"></div>
      </div>
      <span class="rating-percentage">2%</span>
      <div class="user-avatars">
      </div>
    </div>
  </div>
</div>

Related Examples

Star Rating Component with Feedback
Get user feedback with the interactive star rating. Perfect for engaging customers.

Author:
David Wilson

2 months ago
Star Rating System For Product Reviews
A responsive star rating component that allows users to provide feedback on a scale of 1 to 5 stars, featuring interactive hover effects and selection capability.

Author:
Morgan Reynolds

1 month ago
Star Rating
Enhance user engagement with our interactive star rating component, featuring hover effects and dynamic visual feedback for seamless user input.

Author:
Anonymous

2 months ago
Bold Impact Stats Showcase for Product Metrics
A visually striking statistics component with bold typography and modern design to highlight your product's key performance metrics and achievements.

Author:
Alex Morgan

1 month ago
Star Rating Component with Feedback
Boost user engagement with our interactive star rating component. Capture precise feedback with a dynamic rating system and customizable visual cues.

Author:
David Wilson

2 months ago
Key Metrics Overview
Showcase your expertise with key metrics, including years of experience, client satisfaction, project completion, and awards won.

Author:
M. Johnson

2 months ago
Star Rating Component with Hover Effects

Author:
Linda Miller

2 months ago
Admin Panel Statistic Cards

Author:
Anonymous

2 months ago
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.

Author:
Marcus Thornton

1 month ago
Dark Theme Statistics Display Cards

Author:
Maya Johnson

1 month ago
KPI Blocks for Dashboard
Showcase your business metrics with this elegant KPI block group featuring trend indicators, percentages, and responsive design.

Author:
Priya Sharma

1 month ago
Client Testimonial Card with Avatar Display

Author:
Lukas Novak

2 months ago

Didn't find component you were looking for?

Search from 500+ components