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:

Output:

👁 Spectre Empty states

Example 2:

Output:

👁 Spectre Empty states

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