RATING

Rating shows the opinion of others and their experience with the product, you can use stars or other custom icons in it.

Rating

Rating are available in 4 types - empty, filled, custom and emoji. Use the rating class for the component and the classes empty-rating, filled-rating, custom-rating or emoji-rating according to your usecase. You can copy html part from below code snippet.

Empty Code Example

<div class="rating-container">
                    <ul class="empty-rating">
                        <li><i class="fa fa-star"></i></li>
                        <li><i class="fa fa-star"></i></li>
                        <li><i class="fa fa-star"></i></li>
                        <li><i class="fa fa-star"></i></li>
                        <li><i class="fa fa-star"></i></li>
                    </ul>
                </div>

Filled Code Example

<div class="rating-container">
                    <ul class="filled-rating">
                        <li><i class="fa fa-star"></i></li>
                        <li><i class="fa fa-star"></i></li>
                        <li><i class="fa fa-star"></i></li>
                        <li><i class="fa fa-star"></i></li>
                        <li><i class="fa fa-star"></i></li>
                    </ul>
                </div>

Custom Code Example

<div class="rating-container">
                        <ul class="custom-rating">
                            <div class="custom-rating filled">
                                <li><i class="fa fa-heart"></i></li>
                                <li><i class="fa fa-heart"></i></li>
                                <li><i class="fa fa-heart"></i></li>
                            </div>
                            <div class="custom-rating unfilled">
                                <li><i class="fa fa-heart"></i></li>
                                <li><i class="fa fa-heart"></i></li>
                            </div>
                        </ul>
                    </div>

Emoji Code Example

<div class="rating-container">
                        <ul class="emoji-rating">
                            <li><i class="fa fa-sad-cry"></i></li>
                            <li><i class="fa fa-frown"></i></li>
                            <li><i class="fa fa-smile"></i></li>
                            <li><i class="fa fa-grin"></i></li>
                            <li><i class="fa fa-grin-stars"></i></li>
                        </ul>
                    </div>