Semantic-UI Placeholder Types
Last Updated :
05 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 looks more amazing. In this article, we are going to learn about Placeholder Variations.
The Semantic-UI Placeholder Type is used to reserve the space for content that will soon appear in a webpage layout.
Semantic-UI Placeholder Type Used Classes:
- placeholder: This class is used to display the reserved space layout for content that will display soon.
Syntax:
<div class="ui placeholder">
...
</div>
Example 1: In this example, we are creating a simple blog layout using Semantic-UI Placeholder Type.
HTML
<!DOCTYPE html>
<html>
<head>
<title>
Semantic-UI Placeholder Types
</title>
<link rel="stylesheet" href=
</head>
<body>
<div class="ui container center aligned">
<h2 style="color:green">
GeeksforGeeks
</h2>
<h3>Semantic-UI Placeholder Types</h3>
</div>
<div class="ui container placeholder">
<div class="image header">
<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>
<br><br>
<div class="image header">
<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 2: In this example, we are creating a five-column card layout that will display content very soon using Semantic-UI Placeholder Type.
HTML
<!DOCTYPE html>
<html>
<head>
<title>
Semantic-UI Placeholder Types
</title>
<link rel="stylesheet" href=
</head>
<body>
<div class="ui container center aligned">
<h2 style="color:green">
GeeksforGeeks
</h2>
<h3>Semantic-UI Placeholder Types</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 class="paragraph">
<div class="line"></div>
<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 class="paragraph">
<div class="line"></div>
<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 class="paragraph">
<div class="line"></div>
<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 class="paragraph">
<div class="line"></div>
<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 class="paragraph">
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
|
Output:
Reference: https://semantic-ui.com/elements/placeholder.html#placeholder
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...