Open In App

Semantic-UI | Placeholder

Last Updated : 11 May, 2020
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. It uses a class to add CSS to the elements. A placeholder is used to reserve space for content that soon will appear in a layout.

Below are examples of the different types of placeholders.

Example 1:




<!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>
        <div class="ui container">
            <h2>Placeholder</h2>
            <div class="ui placeholder">
                <div class="image header">
                    <div class="line"></div>
                    <div class="line"></div>
                </div>
                <div class="paragraph">
                    <div class="line"></div>
                    <div class="line"></div>
                    <div class="line"></div>
                    <div class="line"></div>
                    <div class="line"></div>
                </div>
            </div>
        </div>
        <script src=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js">
    </script>
    </body>
</html> 






                        








Output




Example 2:











                                    




                                    

                                    




                                    




                                    

                                    

                                    
                                




















<!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> 


        <div class="ui container"> 


            <h3>Inline Card Placeholder</h3> 


            <div class="ui four column grid"> 


                <div class="column"> 


                    <div class="ui raised segment"> 


                        <div class="ui placeholder"> 


                            <div class="image header"> 


                                <div class="short line"></div> 


                                <div class="medium line"></div> 


                            </div> 


                            <div class="paragraph"> 


                                <div class="large line"></div> 


                                <div class="medium line"></div> 


                            </div> 


                        </div> 


                    </div> 


                </div> 


                <div class="column"> 


                    <div class="ui raised segment"> 


                        <div class="ui placeholder"> 


                            <div class="image header"> 


                                <div class="short line"></div> 


                                <div class="medium line"></div> 


                            </div> 


                            <div class="paragraph"> 


                                <div class="large line"></div> 


                                <div class="medium line"></div> 


                            </div> 


                        </div> 


                    </div> 


                </div> 


                <div class="column"> 


                    <div class="ui raised segment"> 


                        <div class="ui placeholder"> 


                            <div class="image header"> 


                                <div class="short line"></div> 


                                <div class="medium line"></div> 


                            </div> 


                            <div class="paragraph"> 


                                <div class="large line"></div> 


                                <div class="medium line"></div> 


                            </div> 


                        </div> 


                    </div> 


                </div> 


                <div class="column"> 


                    <div class="ui raised segment"> 


                        <div class="ui placeholder"> 


                            <div class="image header"> 


                                <div class="short line"></div> 


                                <div class="medium line"></div> 


                            </div> 


                            <div class="paragraph"> 


                                <div class="large line"></div> 


                                <div class="medium line"></div> 


                            </div> 


                        </div> 


                    </div> 


                </div> 


            </div> 


        </div> 


        <script src= 


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


    </script> 


    </body> 


</html> 



















                        







                        








Output


Example 3: This is the placeholder for Image.











                                    




                                    

                                    




                                    




                                    

                                    

                                    
                                




















<!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> 


        <div class="ui container"> 


            <h3>Placeholder for Images</h3> 


            <div style="width: 150px;" 


                 class="ui placeholder"> 


                <div class="image"></div> 


            </div> 


            <div style="width: 150px;" 


                 class="ui placeholder"> 


                <div class="image"></div> 


            </div> 


        </div> 


        <script src= 


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


        </script> 


    </body> 


</html> 



















                        







                        








Output


Example 4: This is for the inverted Placeholders.











                                    




                                    

                                    




                                    




                                    

                                    

                                    
                                




















<!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> 


        <div class="ui container"> 


            <h3>Inverted Placeholders</h3> 


            <div class="ui inverted segment"> 


                <div class="ui active inverted placeholder"> 


                    <div class="image header"> 


                        <div class="line"></div> 


                        <div class="line"></div> 


                    </div> 


                    <div class="paragraph"> 


                        <div class="line"></div> 


                        <div class="line"></div> 


                        <div class="line"></div> 


                    </div> 


                </div> 


            </div> 


            <div class="ui inverted segment"> 


                <div class="ui active inverted placeholder"> 


                    <div class="image header"> 


                        <div class="line"></div> 


                        <div class="line"></div> 


                    </div> 


                    <div class="paragraph"> 


                        <div class="line"></div> 


                        <div class="line"></div> 


                        <div class="line"></div> 


                    </div> 


                </div> 


            </div> 


        </div> 


        <script src= 


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


</script> 


    </body> 


</html> 



















                        







                        








Output


                                 


                            

                                

                                    Like Article
                                    
                                

                                

                                    
                                    Suggest improvement
                                

                            


                            

                                                            

                                    
                                        
                                        Previous
                                    
                                    
                                    

                                        Semantic-UI Loader Variations
                                    

                                

                                                            

                                    
                                        Next
                                        
                                    
                                    
                                    

                                        Semantic-UI Placeholder Types
                                    

                                

                                                        

                            
    

        

            Share your thoughts in the comments
        

        
    
                            

            

                

                    

                    
                
 
                
    
                            

                                

                            


                            


            

        
 
                        

                                                

                        
                                                    

                                

                                    Similar Reads                                    
                                

                                
      
                                    
        
            

                ReactJS Semantic UI Placeholder Element
            

        
    
        
            

                Semantic-UI Placeholder Content
            

        
    
        
            

                Semantic-UI Placeholder Lines Content
            

        
    
        
            

                Semantic-UI Placeholder Variations
            

        
    
        
            

                Semantic-UI Placeholder Line Length Variation
            

        
    
        
            

                Semantic-UI Placeholder Image Content
            

        
    
        
            

                Semantic-UI Placeholder Paragraph Content
            

        
    
        
            

                Semantic-UI Placeholder Headers Content
            

        
    
        
            

                Semantic-UI Placeholder Types
            

        
    
        
            

                Semantic-UI Placeholder Fluid Variation
            

        
                                    

                            

                                                                        

                                

                                    
                                                                    

                            


                        

                        

                            

                                

                                    

                                        
I

        

            
        

        

                                    


                                    

                                        iamsahil1910                                

                            

                            

            
                                

                            

                                                                    

                                        
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