Semantic-UI Placeholder Segment Type

Last Updated : 25 Mar, 2022

Semantic UI is an open-source development framework that provides pre-defined classes to make our website look beautiful, amazing, and responsive. It is similar to Bootstrap which has predefined classes. It uses jQuery and CSS to create the interfaces. It can also be directly used via CDN like bootstrap.

A Segment is used to group similar content which makes the user experience better and helps users to navigate through your content efficiently. The placeholder segment is used to store space for the conditionally displayed content.

Semantic-UI Placeholder Segment Type classes:

placeholder: This class is used on the segment element to storage space for the conditionally displayed content.

Syntax:

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

Example 1: Below is the code that demonstrates the use of Placeholder Segment Type.

HTML

<html> 
  
<head> 
    <title>Semantic-UI Placeholder Segment Type</title> 
  
    <link href= 
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"
          rel="stylesheet" /> 
</head> 
  
<body> 
    <center> 
        <br><br><br> 
        <h1 class="ui header green"> 
            Geeksforgeeks 
        </h1> 
  
        <h3> 
            Semantic-UI Placeholder Segment Type 
        </h3> 
  
        <div class="ui placeholder segment"> 
            <div class="ui icon header"> 
                <i class="share square outline icon"></i> 
            </div> 
  
            <div class="ui primary button"> 
                Share 
            </div> 
        </div> 
    </center> 
</body> 
  
</html>

Output:

Semantic-UI Placeholder Segment Type

Example 2: Below is the code that demonstrates the use of Placeholder Segment Type using the inline class.

HTML

<html> 
  
<head> 
    <title>Semantic-UI Placeholder Segment Type</title> 
  
    <link href= 
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" 
          rel="stylesheet" /> 
</head> 
  
<body> 
    <center> 
        <br><br><br> 
        <h1 class="ui header green"> 
            Geeksforgeeks 
        </h1> 
  
        <h3> 
            Semantic-UI Placeholder Segment Type 
        </h3> 
  
        <div class="ui placeholder segment"> 
            <div class="ui icon header"> 
                <i class="search icon"></i> 
                Search for any course at Geeksforgeeks 
            </div> 
  
            <div class="inline"> 
                <div class="ui button"> 
                    View course outline 
                </div> 
  
                <div class="ui button green"> 
                    Purchase 
                </div> 
            </div> 
        </div> 
    </center> 
</body> 
  
</html>