@govbr-ds/core
Version:
Padrão Digital de Governo
39 lines (38 loc) • 3.75 kB
HTML
<div class="my-5">
<nav class="br-step" data-initial="2" data-label="top" data-scroll="data-scroll" role="none">
<div class="step-progress" role="listbox" aria-orientation="horizontal" aria-label="Lista de Opções">
<button class="step-progress-btn" role="option" aria-posinset="1" aria-setsize="4" type="button" data-alert="success"><span class="step-info">Acesse sua Conta</span><span class="step-alert"></span></button>
<button class="step-progress-btn" role="option" aria-posinset="2" aria-setsize="4" type="button" data-alert="info"><span class="step-info">Dados da entrega</span><span class="step-alert"></span></button>
<button class="step-progress-btn" role="option" aria-posinset="3" aria-setsize="4" type="button" data-alert="danger"><span class="step-info">Dados de Pagamento</span><span class="step-alert"></span></button>
<button class="step-progress-btn" role="option" aria-posinset="4" aria-setsize="4" type="button" disabled="disabled" data-alert="warning"><span class="step-info">Finalizar</span><i class="step-icon fas fa-check" aria-hidden="true"></i><span class="step-alert"></span></button>
</div>
</nav>
</div>
<div class="my-5">
<nav class="br-step" data-initial="1" data-label="bottom" role="none">
<div class="step-progress" role="listbox" aria-orientation="horizontal" 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="my-5">
<nav class="br-step" data-initial="1" data-label="right" data-scroll="data-scroll" role="none">
<div class="step-progress" role="listbox" aria-orientation="horizontal" aria-label="Lista de Opções">
<button class="step-progress-btn" role="option" aria-posinset="1" aria-setsize="4" type="button"><span class="step-info">Acesse sua Conta</span><i class="step-icon fas fa-lock" aria-hidden="true"></i></button>
<button class="step-progress-btn" role="option" aria-posinset="2" aria-setsize="4" type="button"><span class="step-info">Dados da entrega</span><i class="step-icon fas fa-truck" aria-hidden="true"></i></button>
<button class="step-progress-btn" role="option" aria-posinset="3" aria-setsize="4" type="button"><span class="step-info">Dados de Pagamento</span><i class="step-icon far fa-credit-card" aria-hidden="true"></i></button>
<button class="step-progress-btn" role="option" aria-posinset="4" aria-setsize="4" type="button" disabled="disabled"><span class="step-info">Finalizar</span><i class="step-icon fas fa-check" aria-hidden="true"></i></button>
</div>
</nav>
</div>
<div class="my-5">
<nav class="br-step" data-initial="1" data-label="left" role="none">
<div class="step-progress" role="listbox" aria-orientation="horizontal" 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>