Open In App

Semantic-UI Item

Last Updated : 22 Apr, 2022
Improve
Improve
Like Article
Like
Save
Share
Report

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">GeeksforGeeks</h1>
      <strong>Semantic-UI Item</strong>
   </center>
   <br><br>
 
    <div class="ui items container">
       <div class="item">
          <div class="image">
             <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20220123013311/gfg.png">
          </div>
 
          <div class="content">
             <a class="header">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 
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">GeeksforGeeks</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.geeksforgeeks.org/wp-content/uploads/20220123013311/gfg.png">


         </div>


 


         <div class="middle aligned content">


            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 class="item">


         <div class="ui tiny image">


            <img src=


   "https://media.geeksforgeeks.org/wp-content/uploads/20220123013311/gfg.png">


         </div>


 


         <div class="middle aligned content">


            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 class="item">


         <div class="ui tiny image">


            <img src=


"https://media.geeksforgeeks.org/wp-content/uploads/20220123013311/gfg.png">


         </div>


 


         <div class="middle aligned content">


            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>


</body>


 


</html>



















                        







                        










Output:


Semantic UI Item 
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">GeeksforGeeks</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.geeksforgeeks.org/wp-content/uploads/20220123013311/gfg.png">


         </div>


 


         <div class="middle aligned content">


            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 class="extra">


            <div class="ui right floated button">


               Explore


            </div>


         </div>


      </div>


   </div>


</body>


 


</html>



















                        







                        










Output:


Semantic UI Item 
Semantic UI Item 


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


                                 


                            

                                

                                    Like Article
                                    
                                

                                

                                    
                                    Suggest improvement
                                

                            


                            

                                                            

                                    
                                        
                                        Previous
                                    
                                    
                                    

                                        Semantic-UI Feed Variations
                                    

                                

                                                            

                                    
                                        Next
                                        
                                    
                                    
                                    

                                        Semantic-UI Item Types
                                    

                                

                                                        

                            
    

        

            Share your thoughts in the comments
        

        
    
                            

            

                

                    

                    
                
 
                
    
                            

                                

                            


                            


            

        
 
                        

                                                

                        
                                                    

                                

                                    Similar Reads                                    
                                

                                
      
                                    
        
            

                Semantic-UI Item Vertical Alignment Variation
            

        
    
        
            

                ReactJS Semantic UI Item Views
            

        
    
        
            

                Semantic-UI Item Content Header
            

        
    
        
            

                Semantic-UI Item Description Content
            

        
    
        
            

                Semantic-UI Item Floated Content Variation
            

        
    
        
            

                Semantic-UI Item Link Content
            

        
    
        
            

                Semantic-UI Item Image Content
            

        
    
        
            

                Semantic-UI Item Metadata Content
            

        
    
        
            

                Semantic-UI Item Rating Content
            

        
    
        
            

                Semantic-UI Item Extra Content
            

        
                                    

                            

                                                                        

                                

                                    
                                                                    

                            


                        

                        

                            

                                

                                    

                                        
S

        

            
        

        

                                    


                                    

                                        skyridetim                                

                            

                            

            
                                

                            

                                                                    

                                        
Article Tags : 

                                        
                                    

                                                                                            

                                                                                    

                              

                            

                                                        
                        

                    

                

            

        
        


        

                


			
		
		                
        

    

    

        

            

            

        

    












	

    
  

  
  








    
        We use cookies to ensure you have the best browsing experience on our website. By using our site, you
        acknowledge that you have read and understood our
        Cookie Policy &
        Privacy Policy
            
    







   Lightbox