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 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

  • selected rating is:


            <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);
              });
            });