Skip to content
Related Articles

Related Articles

Semantic-UI Placeholder Lines Content

View Discussion
Improve Article
Save Article
  • Last Updated : 24 Feb, 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 look more amazing. Semantic UI Placeholder offers us 4 types of content – lines, header, paragraph, and images. 

In this article, we will learn about the Semantic UI Placeholder Lines content. Semantic UI Placeholder Lines Content is used so the placeholder can contain have lines of text

Semantic-UI Placeholder Lines Content Class:

  • line: This class is used to create lines as a placeholder.

Syntax:

<div class="ui placeholder">
      <div class="line"></div>
      <div class="line"></div>
    ...
</div>

The below example illustrates the Semantic-UI Placeholder Lines Content:

Example 1: In this example, we will put two lines placeholder.

HTML




<!DOCTYPE html>
<html>
  <head>
    <link
      rel="stylesheet"
    />
  </head>
  <body>
    <center>
      <h1 class="ui header green">Geeksforgeeks</h1>
      <strong> Semantic-UI Step Stackable Content </strong>
      <br /><br />
      <strong>Placeholde Lines Content:</strong>
      <div class="ui placeholder">
        <div class="line"></div>
        <div class="line"></div>
      </div>
    </center>
  </body>
</html>


Output:

Semantic-UI Placeholder Lines Content

Semantic-UI Placeholder Lines Content

Example 2: In this example, we will use multiple lines placeholder, notice one thing if we use br tag then the line will become a paragraph and looks like a section is placed as a placeholder.

HTML




<!DOCTYPE html>
<html>
  <head>
    <link
      rel="stylesheet"
    />
  </head>
  <body>
    <center>
      <h1 class="ui header green">Geeksforgeeks</h1>
      <strong> Semantic-UI Step Stackable Content </strong>
      <br /><br />
      <strong>Placeholde Lines Content:</strong>
      <div class="ui placeholder">
        <div class="line"></div>
        <div class="line"></div>
        <div class="line"></div>
        <div class="line"></div>
        <div class="line"></div>
        <br />
        <div class="line"></div>
        <div class="line"></div>
        <div class="line"></div>
        <div class="line"></div>
        <div class="line"></div>
        <div class="line"></div>
        <div class="line"></div>
        <div class="line"></div>
        <div class="line"></div>
      </div>
    </center>
  </body>
</html>


Output:

Semantic-UI Placeholder Lines Content

Semantic-UI Placeholder Lines Content

Reference: https://semantic-ui.com/elements/placeholder.html#lines


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!