extends _layout/_docs-layout.pug

block variables
  - var slug = 'components'
  - var parent = 'components'
  - var title = 'Components - Spectre.css CSS Framework'
  - var description = 'Accordions, Avatars, Badges, Bars, Breadcrumbs, Cards, Chips, Empty states, Menu, Modals, Nav, Pagination, Panels, Popovers, teps, Tabs, TIles, Toasts, Tooltips'

block docs-content
  +docs-heading('components', 'Components')
    include _layout/_ad-g.pug

    p 
      strong Spectre.css 
      | is a lightweight, responsive and modern CSS framework for faster and extensible development.
    p 
      | 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.

    .docs-demo.columns
      .column.col-6.col-xs-12
        .card
          .card-header
            .card-title.h5 Accordions
          .card-body
            | Used to toggle sections of content
          .card-footer
            a.btn.btn-primary(href="components/accordions.html") View
              
      .column.col-6.col-xs-12
        .card
          .card-header
            .card-title.h5 Avatars
          .card-body
            | User profile pictures
          .card-footer
            a.btn.btn-primary(href="components/avatars.html") View
        
      .column.col-6.col-xs-12
        .card
          .card-header
            .card-title.h5 Badges
          .card-body
            | Used as unread number indicators
          .card-footer
            a.btn.btn-primary(href="components/badges.html") View

      .column.col-6.col-xs-12
        .card
          .card-header
            .card-title.h5 Bars
          .card-body
            | Progress of a task or the value within the known range
          .card-footer
            a.btn.btn-primary(href="components/bars.html") View
              
      .column.col-6.col-xs-12
        .card
          .card-header
            .card-title.h5 Breadcrumbs
          .card-body
            | Navigational hierarchies to indicate current location
          .card-footer
            a.btn.btn-primary(href="components/breadcrumbs.html") View
        
      .column.col-6.col-xs-12
        .card
          .card-header
            .card-title.h5 Cards
          .card-body
            | Flexible content containers
          .card-footer
            a.btn.btn-primary(href="components/cards.html") View

      .column.col-6.col-xs-12
        .card
          .card-header
            .card-title.h5 Chips
          .card-body
            | Complex entities in small blocks
          .card-footer
            a.btn.btn-primary(href="components/chips.html") View
              
      .column.col-6.col-xs-12
        .card
          .card-header
            .card-title.h5 Empty states
          .card-body
            | Navigational hierarchies to indicate current location
          .card-footer
            a.btn.btn-primary(href="components/empty.html") View
        
      .column.col-6.col-xs-12
        .card
          .card-header
            .card-title.h5 Menu
          .card-body
            | Vertical list of links or buttons for actions and navigation
          .card-footer
            a.btn.btn-primary(href="components/menu.html") View

      .column.col-6.col-xs-12
        .card
          .card-header
            .card-title.h5 Modals
          .card-body
            | Flexible dialog prompts
          .card-footer
            a.btn.btn-primary(href="components/modals.html") View
              
      .column.col-6.col-xs-12
        .card
          .card-header
            .card-title.h5 Nav
          .card-body
            | Vertical list of links
          .card-footer
            a.btn.btn-primary(href="components/nav.html") View
        
      .column.col-6.col-xs-12
        .card
          .card-header
            .card-title.h5 Pagination
          .card-body
            | Vertical list of links or buttons for actions and navigation
          .card-footer
            a.btn.btn-primary(href="components/pagination.html") View

      .column.col-6.col-xs-12
        .card
          .card-header
            .card-title.h5 Panels
          .card-body
            | Flexible view container with auto-expand content section
          .card-footer
            a.btn.btn-primary(href="components/panels.html") View

      .column.col-6.col-xs-12
        .card
          .card-header
            .card-title.h5 Popovers
          .card-body
            | Small overlay content containers
          .card-footer
            a.btn.btn-primary(href="components/popovers.html") View
              
      .column.col-6.col-xs-12
        .card
          .card-header
            .card-title.h5 Steps
          .card-body
            | Progress indicators of a sequence of task steps
          .card-footer
            a.btn.btn-primary(href="components/steps.html") View
        
      .column.col-6.col-xs-12
        .card
          .card-header
            .card-title.h5 Tabs
          .card-body
            | Switch between different views
          .card-footer
            a.btn.btn-primary(href="components/tabs.html") View

      .column.col-6.col-xs-12
        .card
          .card-header
            .card-title.h5 Tiles
          .card-body
            | Repeatable or embeddable information blocks
          .card-footer
            a.btn.btn-primary(href="components/tiles.html") View
              
      .column.col-6.col-xs-12
        .card
          .card-header
            .card-title.h5 Toasts
          .card-body
            | Progress indicators of a sequence of task steps
          .card-footer
            a.btn.btn-primary(href="components/toasts.html") View
        
      .column.col-6.col-xs-12
        .card
          .card-header
            .card-title.h5 Tooltips
          .card-body
            | Context information labels that appear on hover and focus
          .card-footer
            a.btn.btn-primary(href="components/tooltips.html") View
              
    include _layout/_ad-c.pug

  include _layout/_footer.pug