Semantic-UI Card Content Block

Last Updated : 20 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 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, and description. In this article, we will learn about the content block of the Semantic UI card.

Semantic UI card content block organizes the card content in sections. To add content to the Card in Semantic UI, we use the content class. In a single card, there can be multiple <div> with the class content. We use the “content” class of Semantic UI to add content to the Semantic UI card.

Semantic-UI Card Content Block Class:

content: This class is used to divide cards into sections and contains the most important information in the card which is to be emphasized the most.

Syntax:a

<div class="ui card">
    <div class="content">
     ...
    </div>
</div>

Example 1: The following example demonstrates the basic card with a content section using Semantic UI.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <meta charset="UTF-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <meta name="viewport" content= 
        "width=device-width, initial-scale=1.0"> 
    <link rel="stylesheet" href= 
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"> 
</head> 
  
<body style="padding: 20px;"> 
    <center> 
        <h1 style="color: green">GeeksforGeeks</h1> 
        <strong>Semantic UI card content block</strong> 
    </center><br> 
      
    <div class="ui card"> 
        <div class="content"> 
            <h1 style="color: green">GeeksforGeeks</h1> 
            This is a basic card made using Semantic UI. 
        </div> 
    </div> 
</body> 
  
</html> 

Output:

Semantic-UI Card Content Block

Example 2: The following example demonstrates the multiple content blocks in a single semantic UI card. We can observe different sections of the card with the content class.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <meta charset="UTF-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <meta name="viewport" content= 
        "width=device-width, initial-scale=1.0"> 
    <link rel="stylesheet" href= 
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"> 
</head> 
  
<body style="padding: 20px;"> 
    <center> 
        <h1 style="color: green">GeeksforGeeks</h1> 
        <strong>Semantic UI card content block</strong> 
    </center><br> 
    <div class="ui card"> 
        <div class="content"> 
            <div class="header" style="color: green;"> 
                GeeksforGeeks 
            </div> 
        </div> 
  
        <div class="image"> 
            <img src= 
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png"> 
        </div> 
        <div class="content"> 
            <h4 class="ui sub header">Goal</h4> 
            <div class="ui small feed"> 
                <div class="content"> 
                    <div class="summary"> 
                        To provide best in class computer  
                        science education in the world. 
                    </div> 
                </div> 
            </div> 
        </div> 
        <div class="extra content"> 
            <button class="ui green button"> 
                Visit Website 
            </button> 
        </div> 
    </div> 
</body> 
  
</html> 