Semantic-UI Item

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 offers us Item types, Item content and Item variations. Items are the components that have been used to create web-pages more interactive. Semantic UI item view presents large collections of site content for display.

Semantic UI Item:

Semantic UI Item Type: There is only one type of item which is item itself, to create multiple items we need to add the items class in the parent element.
Semantic UI Item Content: There are 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 the each type of content we have different articles.
Semantic UI Item Variations: There are 6 types of variations that can be used as an item in Semantic UI like Stacking, Divided, Relaxed, Link Item, Vertical Alignment, Floating Content.

Semantic UI Item Class:

item: This class is must to work with the item in Semantic-UI 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:

Example 1: In this example we will create a simple item that will contain Image, Header and Description content.

HTML

<!DOCTYPE html>
<html>
 
<head>
   <title>Semantic UI</title>
   <link href=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"
      rel="stylesheet" />
</head>
 
<body>
   <center>
      <h1 class="ui header green">w3wiki</h1>
      <strong>Semantic-UI Item</strong>
   </center>
   <br><br>
 
    <div class="ui items container">
       <div class="item">
          <div class="image">
             <img src=
"https://media.w3wiki.net/wp-content/uploads/20220123013311/gfg.png">
          </div>
 
          <div class="content">
             <a class="header">w3wiki</a>
             <div class="meta">
                <span>A Computer Science Portal for Beginner</span>
             </div>
 
             <div class="extra">
                This is where w3wiki comes into picture
                - A computer science portal for Beginner, by Beginner. ...
                w3wiki.net was created with a goal in mind to
                provide well written, well thought and well explained
                solutions for selected questions.
             </div>
          </div>
       </div>
    </div>
</body>
 
</html>

Output:

Semantic UI Item

Example 2: In this example we will create three section of item that contain different contents.

HTML

<!DOCTYPE html>
<html>
 
<head>
   <title>Semantic UI</title>
   <link href=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"
      rel="stylesheet" />
</head>
 
<body>
   <center>
      <h1 class="ui header green">w3wiki</h1>
      <strong>Semantic-UI Item</strong>
   </center>
   <br><br>
 
   <div class="ui divided items container">
      <div class="item">
         <div class="ui tiny image">
            <img src=
   "https://media.w3wiki.net/wp-content/uploads/20220123013311/gfg.png">
         </div>
 
         <div class="middle aligned content">
            This is where w3wiki comes into picture
            - A computer science portal for Beginner, by Beginner. ...
            w3wiki.net was created with a goal in mind to
            provide well written, well thought and well explained
            solutions for selected questions.
         </div>
      </div>
 
      <div class="item">
         <div class="ui tiny image">
            <img src=
   "https://media.w3wiki.net/wp-content/uploads/20220123013311/gfg.png">
         </div>
 
         <div class="middle aligned content">
            This is where w3wiki comes into picture
            - A computer science portal for Beginner, by Beginner. ...
            w3wiki.net was created with a goal in mind to
            provide well written, well thought and well explained
            solutions for selected questions.
         </div>
      </div>
 
      <div class="item">
         <div class="ui tiny image">
            <img src=
"https://media.w3wiki.net/wp-content/uploads/20220123013311/gfg.png">
         </div>
 
         <div class="middle aligned content">
            This is where w3wiki comes into picture
            - A computer science portal for Beginner, by Beginner. ...
            w3wiki.net was created with a goal in mind to
            provide well written, well thought and well explained
            solutions for selected questions.
         </div>
      </div>
   </div>
</body>
 
</html>

Output:

Semantic UI Item

Example 3: In this example we will use on variant of item that is floated content.

HTML

<!DOCTYPE html>
<html>
 
<head>
   <title>Semantic UI</title>
   <link href=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"
      rel="stylesheet" />
</head>
 
<body>
   <center>
      <h1 class="ui header green">w3wiki</h1>
      <strong>Semantic-UI Item</strong>
   </center>
   <br><br>
 
   <div class="ui divided items container">
      <div class="item">
         <div class="ui tiny image">
            <img src=
"https://media.w3wiki.net/wp-content/uploads/20220123013311/gfg.png">
         </div>
 
         <div class="middle aligned content">
            This is where w3wiki comes into picture
            - A computer science portal for Beginner, by Beginner. ...
            w3wiki.net was created with a goal in mind to
            provide well written, well thought and well explained
            solutions for selected questions.
         </div>
 
         <div class="extra">
            <div class="ui right floated button">
               Explore
            </div>
         </div>
      </div>
   </div>
</body>
 
</html>

Output:

Semantic UI Item

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

HTML

HTML

HTML

Contact Us