Empty states

Empty states/blank slates are commonly used as placeholders for first time use, empty data and error screens.

You have no new messages

Click the button to start a conversation

You've successfully signed up

Click the button to invite your friends

You are not following anyone

Start to meet new friends

An empty state component can include icons, messages (title and subtitle messages) and action buttons or any combination of those elements. Add empty-icon, empty-title, empty-subtitle or empty-action to the elements. HTML structure is exampled below.

<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-primary">Send a message</button>
  </div>
</div>