Semantic-UI Card Approval Content

Last Updated : 03 Mar, 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 and responsive.

The semantic UI Card element displays site content in a manner similar to a playing card using the Semantic UI classes. Semantic UI cards have multiple sections such as content, extra-content, approval, and description. In this article, we will learn about the Approval block of the Semantic UI card.

Semantic UI card approval block contains a like or star action. This helps users to show approval or disapproval of the content. To add an approval block to the Card in semantic UI, we use the icon and shape classes. In a single card, there can be multiple approval blocks.

Semantic-UI Card Approval Block Class:

icon: This class is used to add icons provided by semantic UI.
star/heart: this class is used to add either the heart icon or the star icon.

Syntax:

<div class="ui card">
   <i class="right/left floated star/heart icon"></i>
</div>

Example 1: The following example demonstrates the approval block of the semantic UI card with a like button.

HTML

<!DOCTYPE html>
<html lang="en">
 
<head>
  <link rel="stylesheet"
     href=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css">
</head>
 
<body style="padding: 20px;">
  <h1 style="color:green">GeeksforGeeks</h1>
  <strong>Semantic UI card Approval block</strong>
  <br>
 
  <div class="ui card">
    <div class="content">
     <div class="header">Geeksforgeeks</div>
     <div class="description">
          
<p>This is from GeeksforGeeks.</p>
 
     </div>
    </div>
 
    <div class="extra content">
     <span class="left floated like">
        <i class="like icon"></i>
        Like
     </span>
    </div>
  </div>    
</body>
 
</html>

Output:

Output

Example 2: The following example demonstrates the approval block of the semantic UI card with the top floated star and like button.

HTML

<!DOCTYPE html>
<html lang="en">
 
<head>
    <link rel="stylesheet"
        href=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css">
</head>
 
<body style="padding: 20px;">
  <h1 style="color:green">GeeksforGeeks</h1>
  <strong>Semantic UI card Approval block</strong>
  <br>
 
  <div class="ui card">
    <div class="content">
       <i class="right floated like icon"></i>
       <i class="right floated star icon"></i>
       <div class="header">GeeksforGeeks</div>
       <div class="description">
           
<p>This is from geeksforgeeks.</p>
 
       </div>
    </div>
 
    <div class="extra content">
       Priyank Mishra
    </div>
  </div>
</body>
 
</html>