Open In App

Semantic-UI List Size Variation

Last Updated : 08 Mar, 2022
Improve
Improve
Like Article
Like
Save
Share
Report

Semantic UI is a framework that is used to build a great user interface. It is an open-source framework that uses CSS and jQuery. It is the same as a bootstrap for use and has great different elements to use to make your website look more amazing.

The Semantic UI List elements are used to display the group of related data under the same type. The Semantic-UI List Size Variation is used to add different sizes of the list elements.

Semantic-UI List Size Variation Used Classes:

  • mini: This class is used to display the list of mini sizes.
  • tiny: This class is used to display the list of tiny sizes.
  • small: This class is used to display the list of small sizes.
  • medium: This class is used to display the list of medium sizes.
  • large: This class is used to display the list of large sizes.
  • big: This class is used to display the list of big sizes.
  • huge: This class is used to display the list of huge sizes.
  • massive: This class is used to display the list of massive sizes.

Syntax:

<div class="ui Size-Variation-Used-Class list">
    ...
</div>

Example 1: In this article, we will describe the Semantic-UI List Size Variation.

HTML




<!DOCTYPE html>
<html>
  
<head>
    <title>
        Semantic-UI List Size Variation
    </title>
  
    <link rel="stylesheet" 
          href=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" />
</head>
  
<body>
    <div class="ui container">
        <h2 style="color:green">
            GeeksforGeeks
        </h2>
  
        <h3>Semantic-UI List Size Variation</h3>
  
        <div class="ui mini horizontal list">
            <div class="item">GeeksforGeeks</div>
            <div class="item">Data Structure</div>
            <div class="item">Algorithm</div>
        </div>
        <br>
  
        <div class="ui tiny horizontal list">
            <div class="item">GeeksforGeeks</div>
            <div class="item">Data Structure</div>
            <div class="item">Algorithm</div>
        </div>
        <br>
  
        <div class="ui small horizontal list">
            <div class="item">GeeksforGeeks</div>
            <div class="item">Data Structure</div>
            <div class="item">Algorithm</div>
        </div>
        <br>
  
        <div class="ui large horizontal list">
            <div class="item">GeeksforGeeks</div>
            <div class="item">Data Structure</div>
            <div class="item">Algorithm</div>
        </div>
        <br>
  
        <div class="ui big horizontal list">
            <div class="item">GeeksforGeeks</div>
            <div class="item">Data Structure</div>
            <div class="item">Algorithm</div>
        </div>
        <br>
  
        <div class="ui huge horizontal list">
            <div class="item">GeeksforGeeks</div>
            <div class="item">Data Structure</div>
            <div class="item">Algorithm</div>
        </div>
        <br>
  
        <div class="ui massive horizontal list">
            <div class="item">GeeksforGeeks</div>
            <div class="item">Data Structure</div>
            <div class="item">Algorithm</div>
        </div>
    </div>
</body>
  
</html>
 






                        










Output:


Semantic-UI List Size Variation


Example 2: In this article, we will describe the Semantic-UI List Size Variation.




HTML














                                    




                                    

                                    




                                    




                                    

                                    

                                    
                                




















<!DOCTYPE html> 


<html> 


  


<head> 


    <title> 


        Semantic-UI List Size Variation 


    </title> 


  


    <link rel="stylesheet"


          href= 


"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" /> 


</head> 


  


<body> 


    <div class="ui container center aligned"> 


        <h2 style="color:green"> 


            GeeksforGeeks 


        </h2> 


  


        <h3>Semantic-UI List Size Variation</h3> 


  


        <div class="ui mini horizontal list"> 


            <div class="item"> 


                <img class="ui avatar image"


                    src= 


"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png"> 


                <div class="content"> 


                    <div class="header">GeeksforGeeks</div> 


                </div> 


            </div> 


            <div class="item"> 


                <img class="ui avatar image"


                    src= 


"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20210203170945/HTML-Tutorials.png"> 


                <div class="content"> 


                    <div class="header">HTML</div> 


                </div> 


            </div> 


            <div class="item"> 


                <img class="ui avatar image"


                    src= 


"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20210203171024/CSSTutorial.png"> 


                <div class="content"> 


                    <div class="header">CSS</div> 


                </div> 


            </div> 


            <div class="item"> 


                <img class="ui avatar image"


                    src= 


"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20210210175213/JavaScriptTutorial.png"> 


                <div class="content"> 


                    <div class="header">JavaScript</div> 


                </div> 


            </div> 


        </div> 


        <br> 


  


  


        <div class="ui tiny horizontal list"> 


            <div class="item"> 


                <img class="ui avatar image"


                    src= 


"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png"> 


                <div class="content"> 


                    <div class="header">GeeksforGeeks</div> 


                </div> 


            </div> 


            <div class="item"> 


                <img class="ui avatar image"


                    src= 


"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20210203170945/HTML-Tutorials.png"> 


                <div class="content"> 


                    <div class="header">HTML</div> 


                </div> 


            </div> 


            <div class="item"> 


                <img class="ui avatar image"


                    src= 


"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20210203171024/CSSTutorial.png"> 


                <div class="content"> 


                    <div class="header">CSS</div> 


                </div> 


            </div> 


            <div class="item"> 


                <img class="ui avatar image"


                    src= 


"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20210210175213/JavaScriptTutorial.png"> 


                <div class="content"> 


                    <div class="header">JavaScript</div> 


                </div> 


            </div> 


        </div> 


        <br> 


  


  


        <div class="ui small horizontal list"> 


            <div class="item"> 


                <img class="ui avatar image"


                    src= 


"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png"> 


                <div class="content"> 


                    <div class="header">GeeksforGeeks</div> 


                </div> 


            </div> 


            <div class="item"> 


                <img class="ui avatar image"


                    src= 


"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20210203170945/HTML-Tutorials.png"> 


                <div class="content"> 


                    <div class="header">HTML</div> 


                </div> 


            </div> 


            <div class="item"> 


                <img class="ui avatar image"


                    src= 


"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20210203171024/CSSTutorial.png"> 


                <div class="content"> 


                    <div class="header">CSS</div> 


                </div> 


            </div> 


            <div class="item"> 


                <img class="ui avatar image"


                    src= 


"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20210210175213/JavaScriptTutorial.png"> 


                <div class="content"> 


                    <div class="header">JavaScript</div> 


                </div> 


            </div> 


        </div> 


        <br> 


  


  


        <div class="ui large horizontal list"> 


            <div class="item"> 


                <img class="ui avatar image"


                    src= 


"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png"> 


                <div class="content"> 


                    <div class="header">GeeksforGeeks</div> 


                </div> 


            </div> 


            <div class="item"> 


                <img class="ui avatar image"


                    src= 


"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20210203170945/HTML-Tutorials.png"> 


                <div class="content"> 


                    <div class="header">HTML</div> 


                </div> 


            </div> 


            <div class="item"> 


                <img class="ui avatar image"


                    src= 


"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20210203171024/CSSTutorial.png"> 


                <div class="content"> 


                    <div class="header">CSS</div> 


                </div> 


            </div> 


            <div class="item"> 


                <img class="ui avatar image"


                    src= 


"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20210210175213/JavaScriptTutorial.png"> 


                <div class="content"> 


                    <div class="header">JavaScript</div> 


                </div> 


            </div> 


        </div> 


        <br> 


  


  


        <div class="ui big horizontal list"> 


            <div class="item"> 


                <img class="ui avatar image"


                    src= 


"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png"> 


                <div class="content"> 


                    <div class="header">GeeksforGeeks</div> 


                </div> 


            </div> 


            <div class="item"> 


                <img class="ui avatar image"


                    src= 


"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20210203170945/HTML-Tutorials.png"> 


                <div class="content"> 


                    <div class="header">HTML</div> 


                </div> 


            </div> 


            <div class="item"> 


                <img class="ui avatar image"


                    src= 


"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20210203171024/CSSTutorial.png"> 


                <div class="content"> 


                    <div class="header">CSS</div> 


                </div> 


            </div> 


            <div class="item"> 


                <img class="ui avatar image"


                    src= 


"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20210210175213/JavaScriptTutorial.png"> 


                <div class="content"> 


                    <div class="header">JavaScript</div> 


                </div> 


            </div> 


        </div> 


        <br> 


  


  


        <div class="ui huge horizontal list"> 


            <div class="item"> 


                <img class="ui avatar image"


                    src= 


"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png"> 


                <div class="content"> 


                    <div class="header">GeeksforGeeks</div> 


                </div> 


            </div> 


            <div class="item"> 


                <img class="ui avatar image"


                    src= 


"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20210203170945/HTML-Tutorials.png"> 


                <div class="content"> 


                    <div class="header">HTML</div> 


                </div> 


            </div> 


            <div class="item"> 


                <img class="ui avatar image"


                    src= 


"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20210203171024/CSSTutorial.png"> 


                <div class="content"> 


                    <div class="header">CSS</div> 


                </div> 


            </div> 


            <div class="item"> 


                <img class="ui avatar image"


                    src= 


"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20210210175213/JavaScriptTutorial.png"> 


                <div class="content"> 


                    <div class="header">JavaScript</div> 


                </div> 


            </div> 


        </div> 


        <br> 


  


  


        <div class="ui massive horizontal list"> 


            <div class="item"> 


                <img class="ui avatar image"


                    src= 


"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png"> 


                <div class="content"> 


                    <div class="header">GeeksforGeeks</div> 


                </div> 


            </div> 


            <div class="item"> 


                <img class="ui avatar image"


                    src= 


"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20210203170945/HTML-Tutorials.png"> 


                <div class="content"> 


                    <div class="header">HTML</div> 


                </div> 


            </div> 


            <div class="item"> 


                <img class="ui avatar image"


                    src= 


"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20210203171024/CSSTutorial.png"> 


                <div class="content"> 


                    <div class="header">CSS</div> 


                </div> 


            </div> 


            <div class="item"> 


                <img class="ui avatar image"


                    src= 


"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20210210175213/JavaScriptTutorial.png"> 


                <div class="content"> 


                    <div class="header">JavaScript</div> 


                </div> 


            </div> 


        </div> 


    </div> 


</body> 


  


</html>



















                        







                        










Output:


Semantic-UI List Size Variation
Semantic-UI List Size Variation


Reference: https://semantic-ui.com/elements/list.html#size


                                 


                            

                                

                                    Like Article
                                    
                                

                                

                                    
                                    Suggest improvement
                                

                            


                            

                                                            

                                    
                                        
                                        Previous
                                    
                                    
                                    

                                        Semantic-UI Icon Set Payments & Shopping
                                    

                                

                                                            

                                    
                                        Next
                                        
                                    
                                    
                                    

                                        Semantic-UI Progress Color Variation
                                    

                                

                                                        

                            
    

        

            Share your thoughts in the comments
        

        
    
                            

            

                

                    

                    
                
 
                
    
                            

                                

                            


                            


            

        
 
                        

                                                

                        
                                                    

                                

                                    Similar Reads                                    
                                

                                
      
                                    
        
            

                Semantic-UI Icon Size Variation
            

        
    
        
            

                Semantic-UI Comment Size Variation
            

        
    
        
            

                Semantic-UI Step Size Variation
            

        
    
        
            

                Semantic-UI Input Size Variation
            

        
    
        
            

                Semantic-UI Loader Size Variation
            

        
    
        
            

                Semantic-UI Progress Size Variation
            

        
    
        
            

                Semantic-UI Popup Size Variation
            

        
    
        
            

                Semantic-UI Breadcrumb Size Variation
            

        
    
        
            

                Semantic-UI Modal Size Variation
            

        
    
        
            

                Semantic-UI Form Size Variation
            

        
                                    

                            

                                                                        

                                

                                    
                                                                    

                            


                        

                        

                            

                                

                                    

                                        
P

        

            
        

        

                                    


                                    

                                        ppatelkap                                

                            

                            

            
                                

                            

                                                                    

                                        
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