@govbr-ds/core/dist/components/step/examples/step-vertical.html

Padrão Digital de Governo

<div class="row">
  <div class="col-auto mx-5">
    <nav class="br-step vertical" data-initial="1" data-label="right" role="none">
      <div class="step-progress" role="listbox" aria-orientation="vertical" aria-label="Lista de Opções">
        <button class="step-progress-btn" role="option" aria-posinset="1" aria-setsize="3" type="button"><span class="step-info">Exemplo de Rótulo 1</span></button>
        <button class="step-progress-btn" role="option" aria-posinset="2" aria-setsize="3" type="button"><span class="step-info">Exemplo de Rótulo 2</span></button>
        <button class="step-progress-btn" role="option" aria-posinset="3" aria-setsize="3" type="button"><span class="step-info">Exemplo de Rótulo 3</span></button>
      </div>
    </nav>
  </div>
  <div class="col-auto mx-5">
    <nav class="br-step vertical" data-initial="1" data-label="left" role="none">
      <div class="step-progress" role="listbox" aria-orientation="vertical" aria-label="Lista de Opções">
        <button class="step-progress-btn" role="option" aria-posinset="1" aria-setsize="3" type="button"><span class="step-info">Exemplo de Rótulo 1</span></button>
        <button class="step-progress-btn" role="option" aria-posinset="2" aria-setsize="3" type="button"><span class="step-info">Exemplo de Rótulo 2</span></button>
        <button class="step-progress-btn" role="option" aria-posinset="3" aria-setsize="3" type="button"><span class="step-info">Exemplo de Rótulo 3</span></button>
      </div>
    </nav>
  </div>
</div>