Semantic-UI Item Types

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= 
"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 Types</strong> 
      </center> 
      <br><br> 
      <strong>Items Type:</strong> 
      <br> 
      <div class="ui divided 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"
                  href="https://www.w3wiki.net/"> 
               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 Type

Example 2:

HTML

<!DOCTYPE html> 
<html> 
   <head> 
      <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 Types</strong> 
      </center> 
      <br><br> 
      <strong>Items Type:</strong> 
      <br> 
      <div class="ui divided 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"
                  href="https://www.w3wiki.net/"> 
               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 class="item"> 
            <div class="image"> 
               <img src= 
"https://media.w3wiki.net/wp-content/uploads/20220211141617/Screenshot20220211141558-200x189.png"> 
            </div> 
            <div class="content"> 
               <a class="header">Sandeep Jain</a> 
               <div class="meta"> 
                  <span>Founder of w3wiki</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

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

HTML

HTML

Contact Us