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