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 looks more amazing. In this article, we are going to learn about Placeholder Variations.
The Semantic-UI Placeholder is used to reserve the space for content that will soon appear in a webpage layout. The Placeholder Headers Content 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.
Semantic-UI Placeholder Headers Content Used Class:
- header: This class is used to create a header content block layout.
Syntax:
<div class="ui placeholder">
<div class="header">
...
</div>
</div>Example 1: In this example, we will describe the layout for header content using Semantic-UI Placeholder Headers Content.
<!DOCTYPE html> <html>
<head>
<title>
Semantic-UI Placeholder Headers Content
</title>
<link rel="stylesheet" href=
</head>
<body>
<div class="ui container center aligned">
<h2 style="color:green">
GeeksforGeeks
</h2>
<h3>Semantic-UI Placeholder Headers Content</h3>
</div>
<br><br>
<div class="ui container placeholder">
<div class="image header">
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
</div>
<div class="image header">
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
</div>
</div>
</body>
</html>
|
Output:
Example 2: In this example, we will describe the layout for header content using Semantic-UI Placeholder Headers Content.
<!DOCTYPE html> <html>
<head>
<title>
Semantic-UI Placeholder Headers Content
</title>
<link rel="stylesheet" href=
</head>
<body>
<div class="ui container center aligned">
<h2 style="color:green">
GeeksforGeeks
</h2>
<h3>Semantic-UI Placeholder Headers Content</h3>
</div>
<br><br>
<div class="ui container five column grid">
<div class="column">
<div class="ui raised segment">
<div class="ui placeholder">
<div class="image header">
<div class="line"></div>
<div class="line"></div>
</div>
</div>
</div>
</div>
<div class="column">
<div class="ui raised segment">
<div class="ui placeholder">
<div class="image header">
<div class="line"></div>
<div class="line"></div>
</div>
</div>
</div>
</div>
<div class="column">
<div class="ui raised segment">
<div class="ui placeholder">
<div class="image header">
<div class="line"></div>
<div class="line"></div>
</div>
</div>
</div>
</div>
<div class="column">
<div class="ui raised segment">
<div class="ui placeholder">
<div class="image header">
<div class="line"></div>
<div class="line"></div>
</div>
</div>
</div>
</div>
<div class="column">
<div class="ui raised segment">
<div class="ui placeholder">
<div class="image header">
<div class="line"></div>
<div class="line"></div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
|
Output:
Reference: https://semantic-ui.com/elements/placeholder.html#headers