Skip to content
Related Articles

Related Articles

Semantic-UI Card Description Content

View Discussion
Improve Article
Save Article
  • Last Updated : 20 Feb, 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 make your website look more amazing. In this article, we are going to learn about card description content.  

It is equipped with pre-built semantic components that help create responsive layouts using user-friendly HTML, and it uses predefined CSS and jQuery to incorporate different frameworks.

A card displays website content in a manner similar to a playing card, and it can contain a description with one or more paragraphs.

Semantic UI Card Description Content Class:

  • description: This class is used to set descriptions with one or more paragraphs.

Syntax:

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

Example 1: The below example illustrates the Semantic UI card description content.

HTML




<!DOCTYPE html>
<html>
  
<head>
    <link href=
        rel="stylesheet" />
</head>
  
<body>
    <center>
        <h1 class="ui header green">GeeksforGeeks</h1>
        <strong>Semantic UI Card Description Content</strong>
  
        <div class="ui card">
            <div class="content">
                <div class="header">
                    competitive programming
                </div>
                <div class="meta">2 days ago</div>
                <div class="description">
                    <p>
                        Whether you are looking to be a 
                        programmer for a top company or 
                        wishing to top the charts of 
                        leading coding competitions,
                        you have come to the right place!
                    </p>
                    <p>
                        This live course will help you 
                        enhance your problem-solving 
                        skills, one code at a time.
                    </p>
                </div>
            </div>
        </div>
    </center>
</body>
  
</html>

Output:

Semantic-UI Card Description Content

Semantic-UI Card Description Content

Example 2: The below example illustrates the Semantic UI card description content of 2 cards.

HTML




<!DOCTYPE html>
<html>
  
<head>
    <link href=
        rel="stylesheet" />
    <style>
        body {
            margin-left: 10px;
            margin-right: 10px;
        }
    </style>
</head>
  
<body>
    <h1 class="ui header green">GeeksforGeeks</h1>
    <strong>Semantic UI Card Description Content</strong>
    <br /><br />
    <div class="ui cards">
        <div class="ui card">
            <div class="content">
                <div class="header">
                    competitive programming
                </div>
                <div class="meta">2 days ago</div>
                <div class="description">
                    <p>
                        Whether you are looking to be a 
                        programmer for a top company or 
                        wishing to top the charts of
                        leading coding competitions, you 
                        have come to the right place!
                    </p>
  
                    <p>
                        This live course will help you 
                        enhance your problem-solving 
                        skills, one code at a time.
                    </p>
                </div>
            </div>
        </div>
  
        <div class="ui card">
            <div class="content">
                <div class="header">DSA course</div>
                <div class="meta">3 days ago</div>
                <div class="description">
                    <p>
                        A LIVE classroom program designed 
                        for SDEs looking to switch to top 
                        product-based companies. Mentored 
                        by industry experts and complimentary 
                        DSA course content made by the CEO, 
                        practice questions, doubt assistance, 
                        contests & more!
                    </p>
  
                    <p>
                        This live course will help you 
                        enhance your problem-solving 
                        skills, one code at a time.
                    </p>
                </div>
            </div>
        </div>
    </div>
</body>
  
</html>

Output:

Semantic-UI Card Description Content

Semantic-UI Card Description Content

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


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!