Semantic-UI Placeholder Lines Content
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 Placeholder offers us 4 types of content – lines, header, paragraph, and images.
In this article, we will learn about the Semantic UI Placeholder Lines content. Semantic UI Placeholder Lines Content is used so the placeholder can contain have lines of text
Semantic-UI Placeholder Lines Content Class:
- line: This class is used to create lines as a placeholder.
Syntax:
<div class="ui placeholder">
<div class="line"></div>
<div class="line"></div>
...
</div>The below example illustrates the Semantic-UI Placeholder Lines Content:
Example 1: In this example, we will put two lines placeholder.
HTML
<!DOCTYPE html><html> <head> <link rel="stylesheet" /> </head> <body> <center> <h1 class="ui header green">Geeksforgeeks</h1> <strong> Semantic-UI Step Stackable Content </strong> <br /><br /> <strong>Placeholde Lines Content:</strong> <div class="ui placeholder"> <div class="line"></div> <div class="line"></div> </div> </center> </body></html> |
Output:
Semantic-UI Placeholder Lines Content
Example 2: In this example, we will use multiple lines placeholder, notice one thing if we use br tag then the line will become a paragraph and looks like a section is placed as a placeholder.
HTML
<!DOCTYPE html><html> <head> <link rel="stylesheet" /> </head> <body> <center> <h1 class="ui header green">Geeksforgeeks</h1> <strong> Semantic-UI Step Stackable Content </strong> <br /><br /> <strong>Placeholde Lines Content:</strong> <div class="ui placeholder"> <div class="line"></div> <div class="line"></div> <div class="line"></div> <div class="line"></div> <div class="line"></div> <br /> <div class="line"></div> <div class="line"></div> <div class="line"></div> <div class="line"></div> <div class="line"></div> <div class="line"></div> <div class="line"></div> <div class="line"></div> <div class="line"></div> </div> </center> </body></html> |
Output:
Semantic-UI Placeholder Lines Content
Reference: https://semantic-ui.com/elements/placeholder.html#lines
Please Login to comment...