Open In App

Semantic-UI Item Types

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 types offer us Items that have been used to create multiple items. The Item view presents large collections of site content for display.

Semantic-UI Item Type Class:

  • Items: This is the only type in the Item.

Syntax:

<div class="ui items">
...
</div>

Below examples illustrate the Semantic-UI Item Type:

Example 1:

HTML




<!DOCTYPE html>
<html>
   <head>
      <link href=
            rel="stylesheet" />
   </head>
   <body>
      <center>
         <h1 class="ui header green">
            GeeksforGeeks
         </h1>
         <strong>Semantic-UI Item Types</strong>
      </center>
      <br><br>
      <strong>Items Type:</strong>
      <br>
      <div class="ui divided items container">
         <div class="item">
            <div class="image">
               <img src=
            </div>
            <div class="content">
               <a class="header"
                  href="https://www.geeksforgeeks.org/">
               Geeksforgeeks
               </a>
               <div class="meta">
                  <span>A Computer Science Portal for Geeks</span>
               </div>
               <div class="extra">
                  This is where GeeksforGeeks comes 
                  into picture - A computer science portal
                  for geeks, by geeks. ...GeeksforGeeks.org
                  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 Type

Semantic-UI Item Type

Example 2:

HTML




<!DOCTYPE html>
<html>
   <head>
      <link href=
            rel="stylesheet" />
   </head>
   <body>
      <center>
         <h1 class="ui header green">
            GeeksforGeeks
         </h1>
         <strong>Semantic-UI Item Types</strong>
      </center>
      <br><br>
      <strong>Items Type:</strong>
      <br>
      <div class="ui divided items container">
         <div class="item">
            <div class="image">
               <img src=
            </div>
            <div class="content">
               <a class="header"
                  href="https://www.geeksforgeeks.org/">
               Geeksforgeeks
               </a>
               <div class="meta">
                  <span>A Computer Science Portal for Geeks</span>
               </div>
               <div class="extra">
                  This is where GeeksforGeeks comes 
                  into picture - A computer science portal
                  for geeks, by geeks. ...GeeksforGeeks.org
                  was created with a goal in mind to provide
                  well written, well thought and well 
                  explained solutions for selected questions.
               </div>
            </div>
         </div>
         <div class="item">
            <div class="image">
               <img src=
            </div>
            <div class="content">
               <a class="header">Sandeep Jain</a>
               <div class="meta">
                  <span>Founder of Geeksforgeeks</span>
               </div>
               <div class="extra">
                  <p>
                     Expert Advice series, we’re constantly 
                     trying to provide you with several
                     enriching advice and mentorship every
                     month to resolve all your career-related
                     concerns and make your journey smoother.
                  </p>
  
                  <div class="ui right floated green button">
                     Connect
                  </div>
               </div>
            </div>
         </div>
      </div>
   </body>
</html>


Output:

Semantic-UI Item Type

Semantic-UI Item Type

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



Last Updated : 16 Feb, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads