Semantic-UI Placeholder Content

Last Updated : 09 Mar, 2022

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 is equipped with pre-built Semantic components that help create responsive layouts using user-friendly HTML, and it uses predefined CSS and JQuery to incorporate different frameworks.

In this article, we are going to learn about Semantic-UI Placeholder Content. A placeholder is used to reserve space for content that soon will appear in a layout. It can be used on four types of content: paragraphs, headers, headers, and images.

Semantic-UI Placeholder Content:

Lines: It is used so the placeholder can contain have lines of text
Paragraphs: It is used to display the placeholder for paragraph content layout. Multiple paragraphs are used to group the lines together.
Headers: It is used to display the placeholder for header content. The block size of header content is slightly larger than the block size of the paragraph.
Images: It is used to display the placeholder layout for image content. Also, use .square and .rectangular classes to set the aspect ratio of the image placeholder layout.

Syntax:

<div class="ui placeholder">
    <div class="line"></div>
    ...
    <div class="header">
        <div class="line"></div>'
        ...
    </div>
    ...
    <div class="paragraph">
        <div class="line"></div>
        ...
    </div>
    ...
    <div class="image">
        ...
    </div>
</div>

Example 1: The below example illustrates using lines in Placeholder Content.

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> 
    <center> 
        <h1 class="ui header green">GeeksforGeeks</h1> 
        <h2>Semantic UI Placeholder Content</h2> 
    </center> 
  
    <div class="ui placeholder"> 
        <div class="line"></div> 
        <div class="line"></div> 
        <div class="line"></div> 
        <div class="line"></div> 
        <div class="line"></div> 
    </div> 
</body> 
  
</html>

Output:

Example 2: The below example illustrates using the image header as Placeholder Content.

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> 
    <center> 
        <h1 class="ui header green">GeeksforGeeks</h1> 
        <h2>Semantic UI Placeholder Content</h2> 
    </center> 
  
    <div class="ui placeholder"> 
        <div class="image header"> 
            <div class="line"></div> 
            <div class="line"></div> 
        </div> 
    </div> 
</body> 
  
</html>

Output:

Example 3: The below example illustrates a paragraph as Placeholder Content.

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> 
    <center> 
        <h1 class="ui header green">GeeksforGeeks</h1> 
        <h2>Semantic UI Placeholder Content</h2> 
    </center> 
  
    <div class="ui placeholder"> 
        <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 class="paragraph"> 
            <div class="line"></div> 
            <div class="line"></div> 
            <div class="line"></div> 
        </div> 
    </div> 
</body> 
  
</html>

Output:

Example 4: The below example illustrates an image as Placeholder Content.

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> 
    <center> 
        <h1 class="ui header green">GeeksforGeeks</h1> 
        <h2>Semantic UI Placeholder Content</h2> 
    </center> 
  
    <div class="ui placeholder"> 
        <div class="image"></div> 
    </div> 
</body> 
  
</html>