Spectre Empty states

Last Updated : 02 Feb, 2022

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/dist/spectre.min.css"> 
    <link rel="stylesheet"
        href= 
"https://unpkg.com/spectre.css/dist/spectre-exp.min.css"> 
    <link rel="stylesheet"
        href= 
"https://unpkg.com/spectre.css/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:

Spectre Empty states

Example 2:

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>SPECTRE Buttons Class</title> 
    <link rel="stylesheet"
        href= 
"https://unpkg.com/spectre.css/dist/spectre.min.css"> 
    <link rel="stylesheet"
        href= 
"https://unpkg.com/spectre.css/dist/spectre-exp.min.css"> 
    <link rel="stylesheet"
        href= 
"https://unpkg.com/spectre.css/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> 