extends ../_layout/_docs-layout.pug

block variables
  - var slug = 'empty'
  - var parent = 'components'
  - var title = 'Empty states - Components - Spectre.css CSS Framework'
  - var description = 'Empty states/blank slates are commonly used as placeholders for first time use, empty data and error screens. Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development.'

block docs-content
  +docs-heading('empty', 'Empty states')
    include ../_layout/_ad-g.pug

    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")
          <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>

    include ../_layout/_ad-c.pug

  include ../_layout/_footer.pug