Semantic-UI Placeholder 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. 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= </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= </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= </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= </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> |
Output:
Reference: https://semantic-ui.com/elements/placeholder.html
Please Login to comment...