Rating
eCommerce rating
Rating components dedicated to building eCommerce projects.
Basic example
<ul class="rating">
<li>
<i class="fas fa-star fa-sm text-primary"></i>
</li>
<li>
<i class="fas fa-star fa-sm text-primary"></i>
</li>
<li>
<i class="fas fa-star fa-sm text-primary"></i>
</li>
<li>
<i class="fas fa-star fa-sm text-primary"></i>
</li>
<li>
<i class="far fa-star fa-sm text-primary"></i>
</li>
</ul>
Rating with links
<ul class="rating">
<li>
<a href="#!">
<i class="fas fa-star fa-sm text-primary"></i>
</a>
</li>
<li>
<a href="#!">
<i class="fas fa-star fa-sm text-primary"></i>
</a>
</li>
<li>
<a href="#!">
<i class="fas fa-star fa-sm text-primary"></i>
</a>
</li>
<li>
<a href="#!">
<i class="fas fa-star fa-sm text-primary"></i>
</a>
</li>
<li>
<a href="#!">
<i class="far fa-star fa-sm text-primary"></i>
</a>
</li>
</ul>
Rating with reviews
<ul class="rating">
<li>
<i class="fas fa-star fa-sm text-primary"></i>
</li>
<li>
<i class="fas fa-star fa-sm text-primary"></i>
</li>
<li>
<i class="fas fa-star fa-sm text-primary"></i>
</li>
<li>
<i class="fas fa-star fa-sm text-primary"></i>
</li>
<li>
<i class="fas fa-star-half-alt fa-sm text-primary"></i>
</li>
<span class="ml-1">4.9/50 <a href="#!" class="material-tooltip-main card-link" data-toggle="tooltip" data-placement="top" title="Read reviews">(542 reviews)</a></span>
</ul>
Interactive examples
Stars rating
<ul class="rating interactive-rating">
<li>
<i class="far fa-star fa-sm text-primary"></i>
</li>
<li>
<i class="far fa-star fa-sm text-primary"></i>
</li>
<li>
<i class="far fa-star fa-sm text-primary"></i>
</li>
<li>
<i class="far fa-star fa-sm text-primary"></i>
</li>
<li>
<i class="far fa-star fa-sm text-primary"></i>
</li>
</ul>
Rating with tooltips and feedback
<ul class="rating interactive-rating feedback">
<li>
<i class="far fa-star fa-sm text-primary" title="Very bad"></i>
</li>
<li>
<i class="far fa-star fa-sm text-primary" title="Poor"></i>
</li>
<li>
<i class="far fa-star fa-sm text-primary" title="OK"></i>
</li>
<li>
<i class="far fa-star fa-sm text-primary" title="Good"></i>
</li>
<li>
<i class="far fa-star fa-sm text-primary" title="Excellent"></i>
</li>
</ul>
Faces rating
<ul class="rating interactive-rating mb-0">
<li>
<i class="far fa-angry fa-lg text-primary"></i>
</li>
<li>
<i class="far fa-frown fa-lg text-primary"></i>
</li>
<li>
<i class="far fa-meh fa-lg text-primary"></i>
</li>
<li>
<i class="far fa-smile fa-lg text-primary"></i>
</li>
<li>
<i class="far fa-grin-stars fa-lg text-primary"></i>
</li>
</ul>
Hearts rating
<ul class="rating interactive-rating mb-0">
<li>
<i class="far fa-heart fa-sm text-primary"></i>
</li>
<li>
<i class="far fa-heart fa-sm text-primary"></i>
</li>
<li>
<i class="far fa-heart fa-sm text-primary"></i>
</li>
<li>
<i class="far fa-heart fa-sm text-primary"></i>
</li>
<li>
<i class="far fa-heart fa-sm text-primary"></i>
</li>
</ul>
Supported options
Feedback
Feedback gives customer the opportunity to express an opinion about your product.
To use this option, just add a feedback class.
<ul class="rating interactive-rating feedback">
<li>
<i class="far fa-star fa-sm text-primary"></i>
</li>
<li>
<i class="far fa-star fa-sm text-primary"></i>
</li>
<li>
<i class="far fa-star fa-sm text-primary"></i>
</li>
<li>
<i class="far fa-star fa-sm text-primary"></i>
</li>
<li>
<i class="far fa-star fa-sm text-primary"></i>
</li>
</ul>
Tooltips
Tooltips shows hints for the selected rating. You can personalize them according to your needs by adding the title attribute to the rating icon.
<ul class="rating interactive-rating">
<li>
<i class="far fa-star fa-sm text-primary" title="Very bad"></i>
</li>
<li>
<i class="far fa-star fa-sm text-primary" title="Poor"></i>
</li>
<li>
<i class="far fa-star fa-sm text-primary" title="OK"></i>
</li>
<li>
<i class="far fa-star fa-sm text-primary" title="Good"></i>
</li>
<li>
<i class="far fa-star fa-sm text-primary" title="Excellent"></i>
</li>
</ul>
Number of icons
if you want to display more or less icons in your rating, all you have to do is add as many icons as you like inside the <ul> tag.
<ul class="rating interactive-rating">
<li>
<i class="far fa-star fa-sm text-primary"></i>
</li>
<li>
<i class="far fa-star fa-sm text-primary"></i>
</li>
<li>
<i class="far fa-star fa-sm text-primary"></i>
</li>
<li>
<i class="far fa-star fa-sm text-primary"></i>
</li>
<li>
<i class="far fa-star fa-sm text-primary"></i>
</li>
<li>
<i class="far fa-star fa-sm text-primary"></i>
</li>
<li>
<i class="far fa-star fa-sm text-primary"></i>
</li>
<li>
<i class="far fa-star fa-sm text-primary"></i>
</li>
<li>
<i class="far fa-star fa-sm text-primary"></i>
</li>
<li>
<i class="far fa-star fa-sm text-primary"></i>
</li>
</ul>
Change icons color
You can change the icon color similar like text-color by changing the icon color class. A list of available colors can be found here: Colors list
<ul class="rating interactive-rating">
<li>
<i class="far fa-star fa-sm deep-purple-text"></i>
</li>
<li>
<i class="far fa-star fa-sm indigo-text"></i>
</li>
<li>
<i class="far fa-star fa-sm blue-text"></i>
</li>
<li>
<i class="far fa-star fa-sm light-blue-text"></i>
</li>
<li>
<i class="far fa-star fa-sm cyan-text"></i>
</li>
</ul>
Replace icon dynamically.
You can make you rating more dynamically by adding replace-previous-icon="true" attr
<ul class="rating interactive-rating" replace-previous-icon="true">
<li>
<i class="far fa-angry fa-lg deep-purple-text"></i>
</li>
<li>
<i class="far fa-frown fa-lg indigo-text"></i>
</li>
<li>
<i class="far fa-meh fa-lg blue-text"></i>
</li>
<li>
<i class="far fa-smile fa-lg light-blue-text"></i>
</li>
<li>
<i class="far fa-grin-stars fa-lg cyan-text"></i>
</li>
</ul>
Styling active elements
You can use active class to set different styles for selected elements
<ul class="rating interactive-rating mb-0">
<li>
<i class="far fa-star fa-sm text-primary"></i>
</li>
<li>
<i class="far fa-star fa-sm text-primary"></i>
</li>
<li>
<i class="far fa-star fa-sm text-primary"></i>
</li>
<li>
<i class="far fa-star fa-sm text-primary"></i>
</li>
<li>
<i class="far fa-star fa-sm text-primary"></i>
</li>
</ul>
.active {
color: #00c851 !important
}
Get selected rating
Selected rating is saved as result attribute
<ul class="rating interactive-rating mb-0">
<li>
<i class="far fa-star fa-sm text-primary"></i>
</li>
<li>
<i class="far fa-star fa-sm text-primary"></i>
</li>
<li>
<i class="far fa-star fa-sm text-primary"></i>
</li>
<li>
<i class="far fa-star fa-sm text-primary"></i>
</li>
<li>
<i class="far fa-star fa-sm text-primary"></i>
</li>
<span class="ml-1">selected rating is: </span><span id="result"></span>
</ul>
$(document).ready(function () {
$('.interactive-rating i').on('click', () => {
const rating = $('.interactive-rating').attr('result');
$('#result').text(rating);
});
});
Questions or feedback?
Let us know