Skip to content
Related Articles

Related Articles

Semantic-UI Item Description Content

View Discussion
Improve Article
Save Article
  • Last Updated : 12 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 use to make your website look more amazing.

Semantic-UI Item Content offers us different content like image, content, header, metadata, link, description, extra content, and rating. In this article, we will discuss and learn about the description content which plays an important role in item content.

Semantic-UI Item Content Description class is used to create an item’s description, which is one of the most required things in the content.

Semantic-UI Item Content Description Class:

  • description: This class is used to create the description part of the content.

Syntax:

<div class="description">
     <p>...</p>
</div>

Below example illustrate the Semantic-UI Item Content Description:

Example: In this article as a item we will use Geeksforgeeks, we will attach an image(GFG logo) beside that we will put the header and description.

HTML




<!DOCTYPE html>
<html>
  
<head>
    <title>Semantic-UI Item Content Description</title>
    <link href=
        rel="stylesheet" />
</head>
  
<body>
    <center>
        <h1 style="color:green">
            GeeksforGeeks
        </h1>
          
        <strong>Semantic-UI Item Content Description</strong>
        <br><br>
    </center>
  
    <div class="ui items">
        <div class="item">
            <a class="ui small image">
                <img src=
            </a>
  
            <div class="content">
                <a class="header">GeeksforGeeks</a>
                <div class="description">
                    <p>
                        Free Tutorials, Millions of Articles,
                        Live, Online and Classroom Courses, 
                        Frequent Coding Competitions, 
                        Webinars by Industry Experts,
                        Internship opportunities and Job 
                        Opportunities.
                    </p>
                </div>
            </div>
        </div>
    </div>
</body>
  
</html>

Output:

Semantic-UI Item Content Description

Semantic-UI Item Content Description

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


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!