Skip to content
Related Articles

Related Articles

Semantic-UI Item Content

Improve Article
Save Article
  • Last Updated : 13 Jun, 2022
Improve Article
Save Article

Semantic UI is a modern framework used in developing seamless designs for the website, It gives the user a lightweight experience with its components. It uses predefined CSS and jQuery to incorporate different frameworks.

Semantic UI Item Content offers us 8 types of content that can be used as an item in Semantic UI like Image, Content, Header, Metadata, Link, Description, Extra Content, and Rating. For each type of content, we have different articles.

Semantic UI Item Content:

  • Image: This is used to add the image content in the Item.
  • Content: This is used to add the content in the Item.
  • Header: This is used to add the header content in the Item.
  • Metadata: This is used to add the metadata content in the Item.
  • Link: This is used to add the link content in the Item.
  • Description: This is used to add the description content in the Item.
  • Extra Content: This is used to add the extra content in the Item.
  • Rating: This is used to add the rating content in the Item.

Syntax:

<div class="ui item-variations-class item-type-class">
  <div class="item">
    <div class=" item-content-class">
       ..
    </div>
  </div>
</div>

Below examples illustrate the Semantic UI Item Content:

Example 1: In this example we will use 4 content as Image, header, Content and Metadata content.

HTML




<!DOCTYPE html>
<html>
 
<head>
    <title>Semantic UI</title>
    <link href=
      rel="stylesheet" />
</head>
 
<body>
    <center>
      <h1 class="ui header green">GeeksforGeeks</h1>
      <strong>Semantic-UI Item Content</strong>
    </center>
    <br><br>
 
    <div class="ui divided items container">
        <div class="item">
          <div class="image" title="Image">
            <img src=
          </div>
 
          <div class="content"
            title="Header, Content">
            <a class="ui header green">
               Geeksforgeeks
            </a>
          </div>
 
          <div class="meta" title="Metadata">
            <span class="estd">Estd: 2009</span>
          </div>
        </div>
    </div>
</body>
 
</html>


Output:

Semantic UI Item Content

Semantic UI Item Content

Example 2: In this example we cover other content as well.

HTML




<!DOCTYPE html>
<html>
 
<head>
    <title>Semantic UI</title>
    <link href=
        rel="stylesheet" />
</head>
 
<body>
    <center>
      <h1 class="ui header green">GeeksforGeeks</h1>
      <strong>Semantic-UI Item Content</strong>
    </center>
    <br><br>
 
    <div class="ui divided items container">
      <div class="item">
          <div class="image" title="Image">
            <img src=
          </div>
 
          <div class="content"
             title="Header, Content & Link">
            <i class="heart icon" title="Rating"></i>
            <a class="ui header green"
              href="https://www.geeksforgeeks.org/">
              Geeksforgeeks
            </a><br><br>
 
            <div class="description" title="Description">
               
<p>
                This is where GeeksforGeeks comes into picture
                - A computer science portal for geeks, by geeks.
                ... GeeksforGeeks.
              </p>
 
            </div>
          </div>
 
          <div class="meta" title="Metadata">
            <span class="estd">Estd: 2009</span>
          </div>
      </div>
 
      <div class="description" title="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>
</body>
 
</html>


Output:

Semantic UI Item Content

Semantic UI Item Content

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


My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!