<section class="section docs-section" id="steps">
                  <h2 class="section-title">Steps</h2>
                  <p class="docs-section-description">Steps описывает wizard-flow, onboarding и последовательные процессы с текущим, завершенным и недоступным шагом.</p>
                  <div class="block">
                    <GnSteps :items="steps" />
                  </div>
                  <div class="block">
                    <GnSteps :items="stepsVertical" vertical />
                  </div>
                
<div class="code-example">
		<div class="code-example-header">
			<span class="code-example-title">Steps HTML</span>
			<button class="btn-icon btn-icon-sm" type="button" aria-label="Copy"><i class="ph ph-copy"></i></button>
		</div>
		<pre><code class="language-html">&lt;ol class="steps"&gt;
  &lt;li class="step step-complete"&gt;
    &lt;span class="step-marker"&gt;&lt;i class="ph ph-check"&gt;&lt;/i&gt;&lt;/span&gt;
    &lt;h3 class="step-title"&gt;Account&lt;/h3&gt;
    &lt;p class="step-text"&gt;Basic profile data is ready.&lt;/p&gt;
  &lt;/li&gt;
  &lt;li class="step step-current" aria-current="step"&gt;
    &lt;span class="step-marker"&gt;2&lt;/span&gt;
    &lt;h3 class="step-title"&gt;Confirm&lt;/h3&gt;
    &lt;p class="step-text"&gt;Review settings before launch.&lt;/p&gt;
  &lt;/li&gt;
  &lt;li class="step step-disabled"&gt;
    &lt;span class="step-marker"&gt;3&lt;/span&gt;
    &lt;h3 class="step-title"&gt;Launch&lt;/h3&gt;
    &lt;p class="step-text"&gt;Available after confirmation.&lt;/p&gt;
  &lt;/li&gt;
&lt;/ol&gt;</code></pre>
	</div>
<div class="code-example">
		<div class="code-example-header">
			<span class="code-example-title">Vertical Steps HTML</span>
			<button class="btn-icon btn-icon-sm" type="button" aria-label="Copy"><i class="ph ph-copy"></i></button>
		</div>
		<pre><code class="language-html">&lt;ol class="steps steps-vertical"&gt;
  &lt;li class="step step-complete"&gt;
    &lt;span class="step-marker"&gt;&lt;i class="ph ph-check"&gt;&lt;/i&gt;&lt;/span&gt;
    &lt;h3 class="step-title"&gt;Queued&lt;/h3&gt;
    &lt;p class="step-text"&gt;Job accepted and waiting for worker slot.&lt;/p&gt;
  &lt;/li&gt;
  &lt;li class="step step-current" aria-current="step"&gt;
    &lt;span class="step-marker"&gt;2&lt;/span&gt;
    &lt;h3 class="step-title"&gt;Running&lt;/h3&gt;
    &lt;p class="step-text"&gt;Current task is processing input data.&lt;/p&gt;
  &lt;/li&gt;
&lt;/ol&gt;</code></pre>
	</div>
</section>