Semantic-UI Placeholder Paragraph 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 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. Semantic-UI Placeholder Paragraph Content is used to display the placeholder for paragraph content layout. The multiple paragraphs are used to group the lines together.
Semantic-UI Placeholder Paragraph Content Used Class:
- paragraph: This class is used to create placeholder layout for paragraph element.
Syntax:
<div class="ui placeholder"> <div class="paragraph"> ... </div> </div>
Example 1: In this example, we will create a layout for paragraph element using Semantic-UI Placeholder Paragraph Content.
HTML
<!DOCTYPE html> < html > < head > < title > Semantic-UI Placeholder Paragraph Content </ title > < link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" /> </ head > < body > < div class = "ui container center aligned" > < h2 style = "color:green" > w3wiki </ h2 > < h3 >Semantic-UI Placeholder Paragraph Content</ h3 > </ div > < br >< br > < div class = "ui container placeholder" > < div class = "paragraph" > < 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 will create a layout for paragraph element using Semantic-UI Placeholder Paragraph Content.
HTML
<!DOCTYPE html> < html > < head > < title > Semantic-UI Placeholder Paragraph Content </ title > < link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" /> </ head > < body > < div class = "ui container center aligned" > < h2 style = "color:green" > w3wiki </ h2 > < h3 >Semantic-UI Placeholder Paragraph 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 = "paragraph" > < 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 = "paragraph" > < 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 = "paragraph" > < 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 = "paragraph" > < 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 = "paragraph" > < 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 > </ body > </ html > |
Output:
Reference: https://semantic-ui.com/elements/placeholder.html#paragraph
Contact Us