Open In App

Semantic-UI Segment Types

Last Updated : 29 Mar, 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 has a bunch of components for user interface design. One of them is the Segments component. Segments are used to display different sections of relatable content. Depending on the requirements of the usage of segments there are different types of it.

Semantic UI Segment Types:

  • Segment: Basic segment displaying content.
  • Placeholder Segment: This class is used to display conditional content.
  • Raised: This class is used to elevate the segment.
  • Stacked: This class is used to show segments composed of multiple pages.
  • Piled: This class is used to make the segment look like a pile of pages.
  • Vertical Segment: This class is used to format segments vertically.

Syntax:

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

Example: The below example illustrates different types of segments.

HTML




<!DOCTYPE html>
<html>
  
<head>
    <link rel="stylesheet" href=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" />
</head>
  
<body>
    <div class="ui container">
        <br/><br />
        <h2 class="ui header green">
            GeeksforGeeks
        </h2>
        <b>Semantic UI Segment Types</b>
        <hr>
  
        <div class="ui segment" style="width:700px;">
            <h3>Segment</h3>
            <p>
                GeeksforGeeks Courses - Interactive 
                LIVE & Self-Paced Courses. 
            </p>
        </div>
  
        <div class="ui raised segment" style="width:700px;">
            <h3>Raised Segment</h3>
            <p>
                Data Structures and Algorithms - Self Paced. 
                Most popular course on DSA trusted by over 
                6 ,000 students!
            </p>
        </div>
  
        <div class="ui piled segment" style="width:700px;">
            <h3>Piled Segment</h3>
            <p>
                Complete Interview Preparation - Self 
                Paced. A placement preparation pack 
                built with years of expertise.
            </p>
        </div>
        <div class="ui stacked segment" style="width:700px;">
            <h3>Stacked Segment</h3>
  
            <p>
                Amazon SDE Preparation Test Series. 
                A test series that will help you 
                prepare for coding interviews for 
                Amazon.
            </p>
        </div>
    </div>
</body>
  
</html> 






                        










Output:


Segment Types


Reference: https://semantic-ui.com/elements/segment.html


                                 


                            

                                

                                    Like Article
                                    
                                

                                

                                    
                                    Suggest improvement
                                

                            


                            

                                                            

                                    
                                        
                                        Previous
                                    
                                    
                                    

                                        Semantic-UI | Segment
                                    

                                

                                                            

                                    
                                        Next
                                        
                                    
                                    
                                    

                                        Semantic-UI Segment Groups
                                    

                                

                                                        

                            
    

        

            Share your thoughts in the comments
        

        
    
                            

            

                

                    

                    
                
 
                
    
                            

                                

                            


                            


            

        
 
                        

                                                

                        
                                                    

                                

                                    Similar Reads                                    
                                

                                
      
                                    
        
            

                Semantic-UI Segment Vertical Segment Type
            

        
    
        
            

                Semantic-UI | Segment
            

        
    
        
            

                Semantic-UI Segment States
            

        
    
        
            

                Semantic-UI Segment Floated Variation
            

        
    
        
            

                ReactJS Semantic UI Segment Element
            

        
    
        
            

                Semantic-UI Segment Clearing Variation
            

        
    
        
            

                Semantic-UI Segment Stacked Type
            

        
    
        
            

                Semantic-UI Segment Raised Type
            

        
    
        
            

                Semantic-UI Segment Colored Variation
            

        
    
        
            

                Semantic-UI Segment Inverted Variation
            

        
                                    

                            

                                                                        

                                

                                    
                                                                    

                            


                        

                        

                            

                                

                                    

                                        
author
        

            
        

        

                                    


                                    

                                        namankedia                                

                            

                            

            
                                

                            

                                                                    

                                        
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