<div class="usa-step-indicator usa-step-indicator--counters usa-step-indicator--center" aria-label="progress">
<ol class="usa-step-indicator__segments">
<li class="usa-step-indicator__segment usa-step-indicator__segment--complete">
<span class="usa-step-indicator__segment-label">Personal information <span class="usa-sr-only">completed</span></span>
</li>
<li class="usa-step-indicator__segment usa-step-indicator__segment--complete">
<span class="usa-step-indicator__segment-label">Household status <span class="usa-sr-only">completed</span></span>
</li>
<li class="usa-step-indicator__segment usa-step-indicator__segment--current" aria-current="true">
<span class="usa-step-indicator__segment-label">Supporting documents </span>
</li>
<li class="usa-step-indicator__segment">
<span class="usa-step-indicator__segment-label">Signature <span class="usa-sr-only">not completed</span></span>
</li>
<li class="usa-step-indicator__segment">
<span class="usa-step-indicator__segment-label">Review and submit <span class="usa-sr-only">not completed</span></span>
</li>
</ol>
<div class="usa-step-indicator__header">
<h4 class="usa-step-indicator__heading">
<span class="usa-step-indicator__heading-counter">
<span class="usa-sr-only">Step</span>
<span class="usa-step-indicator__current-step">3</span>
<span class="usa-step-indicator__total-steps">of 5</span>
</span>
<span class="usa-step-indicator__heading-text">Supporting documents</span>
</h4>
</div>
</div>
No notes defined.
package:
name: metro-digital-design-system-demo
version: 0.1.0
uswds:
path: ../../../dist
placeholderLink: javascript:void()
showLabels: true
currentStep: 3
steps:
- step: null
status: complete
label: Personal information
- step: null
status: complete
label: Household status
- step: null
status: current
label: Supporting documents
- step: null
status: incomplete
label: Signature
- step: null
status: incomplete
label: Review and submit
heading: Centered and counters
centered: true
variant: counters