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

.docs-demo.columns
  .column.col-12
    .empty
      .empty-icon
        i.icon.icon-3x.icon-mail
      p.empty-title.h5 You have no new messages
      p.empty-subtitle Click the button to start a conversation
      .empty-action
        button.btn.btn-primary Send a message
  .column.col-12
    .empty
      .empty-icon
        i.icon.icon-3x.icon-mail
      p.empty-title.h5 You've successfully signed up
      p.empty-subtitle Click the button to invite your friends
      .empty-action
        button.btn.btn-primary Invite your friends
      .empty-action
        button.btn.btn-link Skip
  .column.col-12
    .empty
      .empty-icon
        i.icon.icon-3x.icon-people
      p.empty-title.h5 You are not following anyone
      p.empty-subtitle Start to meet new friends
      .empty-action.input-group.input-inline
        input.form-input(type="text" placeholder="")
        button.btn.btn-primary.input-group-btn Search

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

pre.code(data-lang='HTML')
  code
    :highlight(lang="html")

You have no new messages
        
Click the button to start a conversation.
        
          Send a message

