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>