Open In App

Semantic-UI Step Size Variation

Last Updated : 16 Feb, 2022
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 Step Size Variations offer us a different variety in steps, Stackable, Fluid, Unstackable, Attached, Evenly Divided, and Size. In this article, we will know about the Semantic UI Step Size Variations Size Variant. This variant is used to create steps in different sizes.

Semantic UI Step Size Variations Size Variant Class:

  • mini: This class is used to set the step size mini.
  • tiny: This class is used to set the step size tiny.
  • small: This class is used to set the step size small.
  • large: This class is used to set the step size large.
  • big: This class is used to set the step size big.
  • huge: This class is used to set the step size huge.
  • massive: This class is used to set the step size massive.

Syntax:

<div class="ui Size-Variant-Class steps">
...
</div>

Below example illustrate the Semantic UI Step Size Variations Size Variant:

Example 1: IN this example we will use 5 of the size classes from mini to big.

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">Geeksforgeeks</h1>
         <strong>
         Semantic-UI Step Variations Size Variant
         </strong>
         <br><br>
      </center>
      <strong>Mini Size Steps:</strong>
      <div class="ui mini steps">
         <div class="step">
            <i class="truck icon green"></i>
            <div class="content">
               <div class="title">Shipping</div>
               <div class="description">
                  Select your Address
               </div>
            </div>
         </div>
         <div class="step">
            <i class="file alternate blue icon"></i>
            <div class="content">
               <div class="title">Billing</div>
               <div class="description">
                  Select your way to pay
               </div>
            </div>
         </div>
         <div class="step">
            <i class="file alternate icon"></i>
            <div class="content">
               <div class="title">Delivered</div>
               <div class="description">
                  Check you package
               </div>
            </div>
         </div>
      </div>
      <br><br>
      <strong>Tiny Size Steps:</strong>
      <div class="ui tiny steps">
         <div class="step">
            <i class="truck icon green"></i>
            <div class="content">
               <div class="title">Shipping</div>
               <div class="description">
                  Select your Address
               </div>
            </div>
         </div>
         <div class="step">
            <i class="file alternate blue icon"></i>
            <div class="content">
               <div class="title">Billing</div>
               <div class="description">
                  Select your way to pay
               </div>
            </div>
         </div>
         <div class="step">
            <i class="file alternate icon"></i>
            <div class="content">
               <div class="title">Delivered</div>
               <div class="description">
                  Check you package
               </div>
            </div>
         </div>
      </div>
      <br><br>
      <strong>Small Size Steps:</strong>
      <div class="ui small steps">
         <div class="step">
            <i class="truck icon green"></i>
            <div class="content">
               <div class="title">Shipping</div>
               <div class="description">
                  Select your Address
               </div>
            </div>
         </div>
         <div class="step">
            <i class="file alternate blue icon"></i>
            <div class="content">
               <div class="title">Billing</div>
               <div class="description">
                  Select your way to pay
               </div>
            </div>
         </div>
         <div class="step">
            <i class="file alternate icon"></i>
            <div class="content">
               <div class="title">Delivered</div>
               <div class="description">
                  Check you package
               </div>
            </div>
         </div>
      </div>
      <br><br>
      <strong>Large Size Steps:</strong>
      <div class="ui large steps">
         <div class="step">
            <i class="truck icon green"></i>
            <div class="content">
               <div class="title">Shipping</div>
               <div class="description">
                  Select your Address
               </div>
            </div>
         </div>
         <div class="step">
            <i class="file alternate blue icon"></i>
            <div class="content">
               <div class="title">Billing</div>
               <div class="description">
                  Select your way to pay
               </div>
            </div>
         </div>
         <div class="step">
            <i class="file alternate icon"></i>
            <div class="content">
               <div class="title">Delivered</div>
               <div class="description">
                  Check you package
               </div>
            </div>
         </div>
      </div>
      <br><br>
      <strong>Big Size Steps:</strong>
      <div class="ui big steps">
         <div class="step">
            <i class="truck icon green"></i>
            <div class="content">
               <div class="title">Shipping</div>
               <div class="description">
                  Select your Address
               </div>
            </div>
         </div>
         <div class="step">
            <i class="file alternate blue icon"></i>
            <div class="content">
               <div class="title">Billing</div>
               <div class="description">
                  Select your way to pay
               </div>
            </div>
         </div>
         <div class="step">
            <i class="file alternate icon"></i>
            <div class="content">
               <div class="title">Delivered</div>
               <div class="description">
                  Check you package
               </div>
            </div>
         </div>
      </div>
   </body>
</html>
 






                        










Output:


Semantic UI Step Size Variations Size Variant
Semantic UI Step Size Variations Size Variant


Example 2: In this example we will use rest of the 2 classes that is Huge and Massive.




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">Geeksforgeeks</h1> 


         <strong> 


         Semantic-UI Step Variations Size Variant 


         </strong> 


         <br><br> 


      </center> 


      <strong>Huge Size Steps:</strong> 


      <div class="ui huge steps"> 


         <div class="step"> 


            <i class="truck icon green"></i> 


            <div class="content"> 


               <div class="title">Shipping</div> 


               <div class="description"> 


                  Select your Address 


               </div> 


            </div> 


         </div> 


         <div class="step"> 


            <i class="file alternate blue icon"></i> 


            <div class="content"> 


               <div class="title">Billing</div> 


               <div class="description"> 


                  Select your way to pay 


               </div> 


            </div> 


         </div> 


         <div class="step"> 


            <i class="file alternate icon"></i> 


            <div class="content"> 


               <div class="title">Delivered</div> 


               <div class="description"> 


                  Check you package 


               </div> 


            </div> 


         </div> 


      </div> 


      <br><br> 


      <strong>Massive Size Steps:</strong> 


      <div class="ui massive steps"> 


         <div class="step"> 


            <i class="truck icon green"></i> 


            <div class="content"> 


               <div class="title">Shipping</div> 


               <div class="description"> 


                  Select your Address 


               </div> 


            </div> 


         </div> 


         <div class="step"> 


            <i class="file alternate blue icon"></i> 


            <div class="content"> 


               <div class="title">Billing</div> 


               <div class="description"> 


                  Select your way to pay 


               </div> 


            </div> 


         </div> 


         <div class="step"> 


            <i class="file alternate icon"></i> 


            <div class="content"> 


               <div class="title">Delivered</div> 


               <div class="description"> 


                  Check you package 


               </div> 


            </div> 


         </div> 


      </div> 


   </body> 


</html>



















                        







                        










Output:


Semantic UI Step Size Variations Size Variant
Semantic UI Step Size Variations Size Variant


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


                                 


                            

                                

                                    Like Article
                                    
                                

                                

                                    
                                    Suggest improvement
                                

                            


                            

                                                            

                                    
                                        
                                        Previous
                                    
                                    
                                    

                                        Semantic-UI Icon Set Payments & Shopping
                                    

                                

                                                            

                                    
                                        Next
                                        
                                    
                                    
                                    

                                        Semantic-UI Card Buttons Content
                                    

                                

                                                        

                            
    

        

            Share your thoughts in the comments
        

        
    
                            

            

                

                    

                    
                
 
                
    
                            

                                

                            


                            


            

        
 
                        

                                                

                        
                                                    

                                

                                    Similar Reads                                    
                                

                                
      
                                    
        
            

                Semantic-UI Step Fluid Variation
            

        
    
        
            

                Semantic-UI Step Stackable Variation
            

        
    
        
            

                Semantic-UI Step Evenly Divided Variation
            

        
    
        
            

                Semantic-UI Step Unstackable Variation
            

        
    
        
            

                Semantic-UI Step Attached Variation
            

        
    
        
            

                Semantic-UI Icon Size Variation
            

        
    
        
            

                Semantic-UI Comment Size Variation
            

        
    
        
            

                Semantic-UI Input Size Variation
            

        
    
        
            

                Semantic-UI Loader Size Variation
            

        
    
        
            

                Semantic-UI Progress Size Variation
            

        
                                    

                            

                                                                        

                                

                                    
                                                                    

                            


                        

                        

                            

                                

                                    

                                        
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