Horje
Semantic-UI Placeholder Lines 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 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




Reffered: https://www.geeksforgeeks.org


CSS

Related
Foundation CSS Typography Helpers Subheader Foundation CSS Typography Helpers Subheader
Semantic-UI Sidebar Visible State Semantic-UI Sidebar Visible State
Foundation CSS Typography Helpers Text Alignment Foundation CSS Typography Helpers Text Alignment
Media Queries in Desktop First Approach Media Queries in Desktop First Approach
Foundation CSS Kitchen Sink Menu Foundation CSS Kitchen Sink Menu

Type:
Geek
Category:
Coding
Sub Category:
Tutorial
Uploaded by:
Admin
Views:
9