Rating
A component for content rating.
Example
The rating component uses a list with a desired quantity of items. The component works in conjunction with
icons from Font Awesome.
The attribute data-rating is mandatory.
<ul class="rating" data-rating>
<li class="rating-item"><i class="fas fa-star"></i></li>
<li class="rating-item"><i class="fas fa-star"></i></li>
<li class="rating-item"><i class="fas fa-star"></i></li>
<li class="rating-item"><i class="fas fa-star"></i></li>
<li class="rating-item"><i class="fas fa-star"></i></li>
</ul>
Active items
Use .active to make an item active.
<ul class="rating" data-rating>
<li class="rating-item active"><i class="fas fa-star"></i></li>
<li class="rating-item active"><i class="fas fa-star"></i></li>
<li class="rating-item active"><i class="fas fa-star"></i></li>
<li class="rating-item"><i class="fas fa-star"></i></li>
<li class="rating-item"><i class="fas fa-star"></i></li>
</ul>
Quantity
Use as many items as you want. Below a example with 10 items.
<ul class="rating" data-rating>
<li class="rating-item active"><i class="fas fa-star"></i></li>
<li class="rating-item active"><i class="fas fa-star"></i></li>
<li class="rating-item active"><i class="fas fa-star"></i></li>
<li class="rating-item active"><i class="fas fa-star"></i></li>
<li class="rating-item active"><i class="fas fa-star"></i></li>
<li class="rating-item active"><i class="fas fa-star"></i></li>
<li class="rating-item active"><i class="fas fa-star"></i></li>
<li class="rating-item"><i class="fas fa-star"></i></li>
<li class="rating-item"><i class="fas fa-star"></i></li>
<li class="rating-item"><i class="fas fa-star"></i></li>
</ul>