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>