extends ../_layout/_docs-layout.pug

block variables
  - var slug = 'steps'
  - var parent = 'components'
  - var title = 'Steps - Components - Spectre.css CSS Framework'
  - var description = 'Steps are progress indicators of a sequence of task steps. Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development.'

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

    p Steps are progress indicators of a sequence of task steps.

    .docs-demo.columns
      .column.col-12
        ul.step
          li.step-item
            a.tooltip(href="#steps" data-tooltip="Step 1 Tooltip")
          li.step-item.active
            a.tooltip(href="#steps" data-tooltip="Step 2 Tooltip")
          li.step-item
            a.tooltip(href="#steps" data-tooltip="Step 3 Tooltip")
          li.step-item
            a.tooltip(href="#steps" data-tooltip="Step 4 Tooltip")
      .column.col-12
        ul.step
          li.step-item
            a.tooltip(href="#steps" data-tooltip="Step 1 Tooltip") Step 1
          li.step-item
            a.tooltip(href="#steps" data-tooltip="Step 2 Tooltip") Step 2
          li.step-item.active
            a.tooltip(href="#steps" data-tooltip="Step 3 Tooltip") Step 3
          li.step-item
            a.tooltip(href="#steps" data-tooltip="Step 4 Tooltip") Step 4

    p
      | Add a container element with the #[code step] class.
      | And add child elements with the #[code step-item] class.
      | The #[code step-item] with the #[code active] class will be highlighted and indicate the current state of progress.
      
    pre.code(data-lang='HTML')
      code
        :highlight(lang="html")
          <ul class="step">
            <li class="step-item">
              <a href="#" class="tooltip" data-tooltip="Step 1">Step 1</a>
            </li>
            <li class="step-item active">
              <a href="#" class="tooltip" data-tooltip="Step 2">Step 2</a>
            </li>
            <li class="step-item">
              <a href="#" class="tooltip" data-tooltip="Step 3">Step 3</a>
            </li>
            <li class="step-item">
              <a href="#" class="tooltip" data-tooltip="Step 4">Step 4</a>
            </li>
          </ul>

    include ../_layout/_ad-c.pug

  include ../_layout/_footer.pug