Spectre Empty states

The Spectre Empty states are important as a placeholder when you have an uploading layout. Empty states/blank slates are commonly used as placeholders for first-time use, empty data and error screens.

There are lots of things that you can include in an empty state component like icons, messages, buttons, a combination of any component.

Spectre Empty states Class:

empty: This class is used to create an empty theme, that will be in grey colour.
empty-icon: This class is used to create an empty-icon theme.
empty-title: This class is used to create an empty-title theme. Here you have to set the font size by using the h1 to h6 class.
empty-subtitle: This class is used to create an empty-subtitle theme.
empty-action: This class is used to create an empty-action theme, where you can add buttons.

Syntax:

<div class="empty">
  <div class="empty-icon">
    <i class="..."></i>
  </div>
  <p class="empty-title">....</p>
  <p class="empty-subtitle">...</p>
  <div class="empty-action">
    <button class="...">..</button>
  </div>
</div>

Below example illustrate Spectre Empty states:

Example 1:

HTML

<!DOCTYPE html>
<html>

<head>
    <link rel="stylesheet"
        href=
"https://unpkg.com/spectre.css@0.5.9/dist/spectre.min.css">
    <link rel="stylesheet"
        href=
"https://unpkg.com/spectre.css@0.5.9/dist/spectre-exp.min.css">
    <link rel="stylesheet"
        href=
"https://unpkg.com/spectre.css@0.5.9/dist/spectre-icons.min.css">
</head>

<body>
    <center>
        <h1>GeeksforGeeks</h1>
        <strong>SPECTRE Empty states Class</strong>
        <br>
        <div class="empty">
          <div class="empty-icon">
            <i class="icon icon-people"></i>
          </div>
          <p class="empty-title h5">
              You have no new messages
          </p>

          <p class="empty-subtitle">
              Click the button to start a conversation.
          </p>

          <div class="empty-action">
            <button class="btn btn-success ">
                Send a message
            </button>
          </div>
        </div>
    </center>
</body>

</html>

Output:

Example 2:

HTML

<!DOCTYPE html>
<html>

<head>
    <title>SPECTRE Buttons Class</title>
    <link rel="stylesheet"
        href=
"https://unpkg.com/spectre.css@0.5.9/dist/spectre.min.css">
    <link rel="stylesheet"
        href=
"https://unpkg.com/spectre.css@0.5.9/dist/spectre-exp.min.css">
    <link rel="stylesheet"
        href=
"https://unpkg.com/spectre.css@0.5.9/dist/spectre-icons.min.css">
</head>

<body>
    <center>
        <h1>GeeksforGeeks</h1>
        <strong>SPECTRE Empty states Class</strong>
        <br>
        <div class="empty">
          <div class="empty-icon">
            <i class="icon icon-people"></i>
          </div>
          <p class="empty-title h5">
              You don't have any Friends
          </p>

          <p class="empty-subtitle">
              Start to meet new friends
          </p>

          <div class="empty-action">
            <input class="form-input"
                   type="text" 
                   placeholder="Search for Friends">
                   <br><br>
            <button class="btn btn-primary ">
                Search
                <i class="icon icon-search"></i>
            </button>
          </div>
        </div>
    </center>
</body>

</html>

Output:

Reference: https://picturepan2.github.io/spectre/components/empty.html

Explore