Open In App

Semantic-UI Item Rating Content

Improve
Improve
Like Article
Like
Save
Share
Report

Semantic UI is a modern framework used in developing seamless designs for the website, It gives the user a lightweight experience with its components. It uses predefined CSS and jQuery to incorporate different frameworks.

Semantic UI Item presents a large collection of similar types of data on a site. The Item can contain an image, heading, description, buttons, date, etc. Item is the collection of items in Semantic UI.

Semantic UI Item Rating Content is used to place icons such as ‘like’, ‘favorite’ actions that respond to user interaction.

Semantic UI Item Rating Content Classes:

  • like icon: Icon signifies rating of liking and hence can be used as rating.
  • favorite icon: Icon signifies rating of favorite and hence can be used as rating.

Syntax: Add any icon that signifies like or favorite actions as follows:

<div class="item">
    ...
    <div class="content">
      ...
      <i class="like icon"></i>
    </div>
</div>

Example: In the following example, we have two icons that signify rating.

HTML




<!DOCTYPE html>
<html>
  
<head>
    <link href=
          rel="stylesheet" />
    <script src=
    </script>
    <script src=
    </script>
    <style>
        body {
            padding: 10px;
            margin: 10px;
        }
    </style>
</head>
  
<body>
    <div class="ui container">
        <center>
            <div class="ui header green">
                <h1>GeeksforGeeks</h1>
            </div>
            <strong>Semantic UI Item Rating Content</strong>
        </center>
    </div>
    <div class="ui items">
        <div class="item">
            <div class="ui small image">
                <img src=
            </div>
            <div class="content">
                <div class="header">Data Structures and Algorithms</div>
                <div class="meta">
                    <i class="like icon"></i>
                    <span class="likes">31 Likes</span>
                </div>
            </div>
        </div>
        <div class="item">
            <div class="ui small image">
                <img src=
            </div>
            <div class="content">
                <div class="header">Machine Learning</div>
                <div class="meta">
                    <i class="favorite icon"></i>
                    <span class="likes">123 Favourites</span>
                </div>
            </div>
        </div>
    </div>
</body>
  
</html>


Output:

Reference: https://semantic-ui.com/views/item.html#rating



Last Updated : 14 Feb, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads