Ratings

Ratings allow us to see user experience with the product and service available on their plateform. We can also give our opinions using ratings.

Basic Rating

This is the basic rating.

star

expand_more

<div class="rating flex star-1">
  <section href="#" class="rating__item star-1">
    <span class="material-icons rating__star">star</span>
  </section>
  <section href="#" class="rating__item star-2">
    <span class="material-icons rating__star">star</span>
  </section>
  <section href="#" class="rating__item star-3">
    <span class="material-icons rating__star">star</span>
  </section>
  <section href="#" class="rating__item star-4">
    <span class="material-icons rating__star">star</span>
  </section>
  <section href="#" class="rating__item star-5">
    <span class="material-icons rating__star">star</span>
  </section>
</div>

Dynamic Rating

If you want more fancy looking ratings then you can use them.

expand_more

<div class="nova-rating">
  <input type="radio" id="nova-five" name="simple-rating" value="5" class="sr-only" >
  <label for="nova-five">
    <!--Add star svg here -->
  </label>
  <input type="radio" id="nova-four" name="simple-rating" value="4" class="sr-only">
  <label for="nova-four">
    <!--Add star svg here -->
  </label>
  <input type="radio" id="nova-three" name="simple-rating" value="3" class="sr-only">
  <label for="nova-three">
    <!--Add star svg here -->
  </label>
  <input type="radio" id="nova-two" name="simple-rating" value="2" class="sr-only">
  <label for="nova-two">
    <!--Add star svg here -->
  </label>
  <input type="radio" id="nova-one" name="simple-rating" value="1" class="sr-only">
  <label for="nova-one">
    <!--Add star svg here -->
  </label>
</div>