Semantic-UI Placeholder Image Content
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 is used to reserve the space for content that will soon appear in a webpage layout. The Semantic-UI Placeholder Image Content is used to display the placeholder layout for image content. Also, use .square and .rectangular classes to set the aspect ratio of image placeholder layout.
Semantic-UI Placeholder Image Content Used Classes:
- image: This class is used to display the placeholder layout for image content.
- square: This class is used to display the image placeholder layout in square shape (1:1 ratio).
- rectangular: This class is used to display the image placeholder layout in square share (4:3 ratio).
Syntax:
<div class="ui placeholder">
<div class="image"></div>
</div>
Example 1: In this example, we will create a simple layout of blog that contains image and header content.
HTML
<!DOCTYPE html>
< html >
< head >
< title >
Semantic-UI Placeholder Image Content
</ title >
< link rel = "stylesheet" href =
</ head >
< body >
< div class = "ui container center aligned" >
< h2 style = "color:green" >
GeeksforGeeks
</ h2 >
< h3 >Semantic-UI Placeholder Image Content</ 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 = "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 create a simple card layout that contains image and content.
HTML
<!DOCTYPE html>
< html >
< head >
< title >
Semantic-UI Placeholder Image Content
</ title >
< link rel = "stylesheet" href =
</ head >
< body >
< div class = "ui container center aligned" >
< h2 style = "color:green" >
GeeksforGeeks
</ h2 >
< h3 >Semantic-UI Placeholder Image 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" ></ 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 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" ></ 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 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" ></ div >
</ div >
</ div >
</ div >
</ div >
</ body >
</ html >
|
Output:
Example 3: In this example, we will create a simple image layout that contains square and rectangle shapes.
HTML
<!DOCTYPE html>
< html >
< head >
< title >
Semantic-UI Placeholder Image Content
</ title >
< link rel = "stylesheet" href =
</ head >
< body >
< div class = "ui container center aligned" >
< h2 style = "color:green" >
GeeksforGeeks
</ h2 >
< h3 >Semantic-UI Placeholder Image Content</ h3 >
</ div >
< br >< br >
< div class = "ui container three column grid" >
< div class = "column" >
< div class = "ui raised segment" >
< div class = "ui placeholder" >
< div class = "square image" ></ div >
</ div >
</ div >
</ div >
< div class = "column" >
< div class = "ui raised segment" >
< div class = "ui placeholder" >
< div class = "rectangle image" ></ div >
</ div >
</ div >
</ div >
< div class = "column" >
< div class = "ui raised segment" >
< div class = "ui placeholder" >
< div class = "square image" ></ div >
</ div >
</ div >
</ div >
</ div >
</ body >
</ html >
|
Output:
Reference: https://semantic-ui.com/elements/placeholder.html#image
Share your thoughts in the comments
Please Login to comment...