Semantic-UI Rating Type Heart

Last Updated : 24 Feb, 2022

Semantic UI is an open-source framework that uses CSS and jQuery to build great user interfaces. It is the same as a bootstrap for use and has great different elements to use to make your website look more amazing.

Semantic UI offers a Rating component for users to convey their interests on a certain topic from 1 to generally 5. It is used to show the preference level of the user regarding some content. There are different representations of Rating. One of them is heart-type.

Users can take feedback in the form of heart rating. Users can hover over the hearts to express their preferences. Users can even decide the number of hearts to be shown to take the user’s interest. It can be done using the “data-max-rating”. It sets the limit of hearts to be shown (the upper max limit). You can also add the default rating to be shown when the user first loads up the content. It can be done using the “data-rating”. You can add the heart rating type to any content be it below a picture or a text or any particular content where you want to know how much the user liked it.

Semantic-UI Rating Type Heart Class:

heart: This class is used to set the type of rating heart.

Syntax:

 <div class="ui heart rating" ></div>

Example: This example demonstrates the heart rating type. We are asking the user to express his interest level by a question. In this example, the data-max-rating is set to 10 and the data-rating is set to 7 as an average. A script is also added in order for the UI to work. You can customize the script as per your requirement.

HTML

<!DOCTYPE html>
<html>
 
<head>
  <link href=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"
        rel="stylesheet" />
  <script src=
"https://code.jquery.com/jquery-3.1.1.min.js"
            integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
            crossorigin="anonymous">
    </script>
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js">
    </script>
</head>
 
<body>
  <div class="ui container">
    <h2 style="color:green">GeeksforGeeks</h2>
    <b>
       
<p>Semantic UI heart rating type.</p>
 
 
    </b>
    <br />
     
<p>
      On a rate of 1-10 how much would you 
      recommend GFG to your colleague ? 
    </p>
 
 
    <br />
    <div class="ui heart rating"
         data-rating="7"
         data-max-rating="10">
    </div>
    <script>
      $('.rating').rating();
    </script>
  </div>
</body>
 
</html>