Open In App

Semantic-UI Item Description Content

Last Updated : 12 Feb, 2022
Improve
Improve
Like Article
Like
Save
Share
Report

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



Like Article
Suggest improvement
Share your thoughts in the comments

Similar Reads