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

-           Step 1

-           Step 2

-           Step 3

-           Step 4

