Steps

Steps описывает wizard-flow, onboarding и последовательные процессы с текущим, завершенным и недоступным шагом.

Steps HTML

<ol class="steps">
  <li class="step step-complete">
    <span class="step-marker"><i class="ph ph-check"></i></span>
    <h3 class="step-title">Account</h3>
    <p class="step-text">Basic profile data is ready.</p>
  </li>
  <li class="step step-current" aria-current="step">
    <span class="step-marker">2</span>
    <h3 class="step-title">Confirm</h3>
    <p class="step-text">Review settings before launch.</p>
  </li>
  <li class="step step-disabled">
    <span class="step-marker">3</span>
    <h3 class="step-title">Launch</h3>
    <p class="step-text">Available after confirmation.</p>
  </li>
</ol>

Vertical Steps HTML

<ol class="steps steps-vertical">
  <li class="step step-complete">
    <span class="step-marker"><i class="ph ph-check"></i></span>
    <h3 class="step-title">Queued</h3>
    <p class="step-text">Job accepted and waiting for worker slot.</p>
  </li>
  <li class="step step-current" aria-current="step">
    <span class="step-marker">2</span>
    <h3 class="step-title">Running</h3>
    <p class="step-text">Current task is processing input data.</p>
  </li>
</ol>