Skip to content
Related Articles

Related Articles

Semantic-UI Card Content

View Discussion
Improve Article
Save Article
  • Last Updated : 22 Mar, 2022
View Discussion
Improve Article
Save Article

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 using the Semantic UI classes like a playing card. 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. The Semantic UI card content block is used to contain the main contents in the card. It is essentially the body of the card. We use the content class to add content to the Card in Semantic UI. There can be multiple <div> with the class content in a single card.

Semantic-UI Card Content Block Class:

  • content: This class is used to add blocks of content to the Semantic UI card.

Syntax:

<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 href=
        rel="stylesheet" />
</head>
  
<body style="padding: 20px;">
    <center>
        <h1 style="color: green">GeeksforGeeks</h1>
        <strong>Semantic UI Card Content</strong>
        <br>
    </center>
    
    <div class="ui card">
        <div class="content">
            Here content block starts.
            <h1 style="color: green">GeeksforGeeks</h1>
            <div class="description">
                This is a basic card made using Semantic UI.
            </div>
            Here, content block ends.
        </div>
    </div>
</body>
  
</html>


Output:

Output

Example 2: The following example demonstrates the basic card with multiple content sections 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 href=
        rel="stylesheet" />
</head>
  
<body style="padding: 20px;">
    <center>
        <h1 style="color: green">GeeksforGeeks</h1>
        <strong>Semantic UI Card Content</strong>
        <br>
    </center>
    
    <div class="ui card">
        <div class="content">
            First Content block.
        </div>
        <div class="image">
            <img src=
        </div>
        <div class="content">
            Second content block.
        </div>
    </div>
</body>
  
</html>


Output:

Output

Reference: https://semantic-ui.com/views/card.html#content


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!