extends ../_layout/_docs-layout.pug

block variables
  - var slug = 'empty'
  - var parent = 'components'
  - var title = 'Empty states - Components - Spectre.css CSS Framework'
  - var description = 'Spectre.css is a lightweight, responsive and modern CSS framework for faster and extensible development. Spectre provides basic styles for typography and elements, flexbox based responsive layout system, pure CSS components and utilities with best practice coding and consistent design language.'

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