Rating
Rating component can be used for taking feedback or review from users. It also helps in getting insights on the quality of a particular item. In order to only use the Rating Component from Blaze UI in your project, copy and paste the below code in the head tag of your html document.
<link rel="stylesheet" href="https://blaze-ui.netlify.app/css/foundation.css" />
<link rel="stylesheet" href="https://blaze-ui.netlify.app/Components/rating/rating.css" />
Static Rating
This is read-only rating. Functional rating will also be added in next update.
If you want to use the same icon as below, you will need to add this highlighted link to the head tag of
your html document: @import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css'); (Credits: font-awesome). Alternatively, you can use any other icons of your choice also.
<div class="rating">
<span class="rating-empty"><i class="fa-regular fa-star"></i></span>
<span class="rating-empty"><i class="fa-regular fa-star"></i></span>
<span class="rating-empty"><i class="fa-regular fa-star"></i></span>
<span class="rating-empty"><i class="fa-regular fa-star"></i></span>
<span class="rating-empty"><i class="fa-regular fa-star"></i></span>
</div>
<div class="rating">
<span class="rating-fill"><i class="fa-solid fa-star"></i></span>
<span class="rating-fill"><i class="fa-solid fa-star"></i></span>
<span class="rating-fill"><i class="fa-solid fa-star"></i></span>
<span class="rating-fill"><i class="fa-solid fa-star"></i></span>
<span class="rating-empty"><i class="fa-regular fa-star"></i></span>
</div>
<div class="rating">
<span class="rating-fill"><i class="fa-solid fa-star"></i></span>
<span class="rating-fill"><i class="fa-solid fa-star"></i></span>
<span class="rating-fill"><i class="fa-solid fa-star"></i></span>
<span class="rating-half"><i class="fa-solid fa-star-half-stroke"></i></span>
<span class="rating-empty"><i class="fa-regular fa-star"></i></span>
<span class="rating-badge">3.5/5</span>
</div>