Progress Stepper Component
Default Progress Stepper
The default stepper has a horizontal layout. The stepper fills all available space and evenly distributes its steps.
Use the aria-current attribute to denote the current step in the list. All items after the current will be shown in progress.
The default state for each item will be the complete or active state until it reaches [aria-current] element. Then the rest will be upcoming state. You can also use .progress-stepper__items--upcoming on the progress-stepper__items container to show upcoming state for all items.
Shipment Progress
Started
July 3rd
Shipped
July 4th
Transit
July 5th
Delivered
July 6th
<div class="progress-stepper" aria-labelledby="progress-stepper-header">
<h2 class="clipped" id="progress-stepper-header">Shipment Progress</h2>
<div class="progress-stepper__items" role="list">
<div class="progress-stepper__item" role="listitem">
<span class="progress-stepper__icon">
<svg
role="img"
aria-label="complete"
class="icon"
height="24"
width="24"
>
<use href="#icon-stepper-confirmation-24" />
</svg>
</span>
<span class="progress-stepper__text">
<h4>Started</h4>
<p>July 3rd</p>
</span>
</div>
<hr class="progress-stepper__separator" role="presentation" />
<div class="progress-stepper__item" role="listitem">
<span class="progress-stepper__icon">
<svg
role="img"
aria-label="complete"
class="icon"
height="24"
width="24"
>
<use href="#icon-stepper-confirmation-24" />
</svg>
</span>
<span class="progress-stepper__text">
<h4>Shipped</h4>
<p>July 4th</p>
</span>
</div>
<hr class="progress-stepper__separator" role="presentation" />
<div aria-current="step" class="progress-stepper__item" role="listitem">
<span class="progress-stepper__icon">
<svg
role="img"
aria-label="current"
class="icon"
height="24"
width="24"
>
<use href="#icon-stepper-confirmation-24" />
</svg>
</span>
<span class="progress-stepper__text">
<h4>Transit</h4>
<p>July 5th</p>
</span>
</div>
<hr class="progress-stepper__separator" role="presentation" />
<div class="progress-stepper__item" role="listitem">
<span class="progress-stepper__icon">
<svg
role="img"
aria-label="upcoming"
class="icon"
height="24"
width="24"
>
<use href="#icon-stepper-upcoming-24" />
</svg>
</span>
<span class="progress-stepper__text">
<h4>Delivered</h4>
<p>July 6th</p>
</span>
</div>
</div>
</div>
The stepper can be sized and aligned using standard CSS:
Shipment Progress
Started
July 3rd
Shipped
July 4th
Transit
July 5th
Delivered
July 6th
<div
class="progress-stepper"
aria-labelledby="progress-stepper-header"
style="margin: 16px auto; width: 390px"
>
<h2 class="clipped" id="progress-stepper-header">Shipment Progress</h2>
<div class="progress-stepper__items" role="list">
<div class="progress-stepper__item" role="listitem">
<span class="progress-stepper__icon">
<svg
role="img"
aria-label="complete"
class="icon"
height="24"
width="24"
>
<use href="#icon-stepper-confirmation-24" />
</svg>
</span>
<span class="progress-stepper__text">
<h4>Started</h4>
<p>July 3rd</p>
</span>
</div>
<hr class="progress-stepper__separator" role="presentation" />
<div class="progress-stepper__item" role="listitem">
<span class="progress-stepper__icon">
<svg
role="img"
aria-label="complete"
class="icon"
height="24"
width="24"
>
<use href="#icon-stepper-confirmation-24" />
</svg>
</span>
<span class="progress-stepper__text">
<h4>Shipped</h4>
<p>July 4th</p>
</span>
</div>
<hr class="progress-stepper__separator" role="presentation" />
<div aria-current="step" class="progress-stepper__item" role="listitem">
<span class="progress-stepper__icon">
<svg
role="img"
aria-label="current"
class="icon"
height="24"
width="24"
>
<use href="#icon-stepper-confirmation-24" />
</svg>
</span>
<span class="progress-stepper__text">
<h4>Transit</h4>
<p>July 5th</p>
</span>
</div>
<hr class="progress-stepper__separator" role="presentation" />
<div class="progress-stepper__item" role="listitem">
<span class="progress-stepper__icon">
<svg
role="img"
aria-label="upcoming"
class="icon"
height="24"
width="24"
>
<use href="#icon-stepper-upcoming-24" />
</svg>
</span>
<span class="progress-stepper__text">
<h4>Delivered</h4>
<p>July 6th</p>
</span>
</div>
</div>
</div>
Vertical Progress Stepper
Use the progress-stepper--vertical modifier for a stepper with vertical layout.
Order placed
New Mens Addidas Ultra Boost
Preparing for shipment
We will notify you once it ships.
Delivered
Guaranteed Wednesday, October 09.
<div class="progress-stepper progress-stepper--vertical">
<div class="progress-stepper__items" role="list">
<div class="progress-stepper__item" role="listitem">
<span class="progress-stepper__icon">
<svg
role="img"
aria-label="complete"
class="icon"
height="24"
width="24"
>
<use href="#icon-stepper-confirmation-24" />
</svg>
</span>
<span class="progress-stepper__text">
<h3>Order placed</h3>
<p>New Mens Addidas Ultra Boost</p>
</span>
</div>
<hr class="progress-stepper__separator" role="presentation" />
<div aria-current="step" class="progress-stepper__item" role="listitem">
<span class="progress-stepper__icon">
<svg
role="img"
aria-label="current"
class="icon"
height="24"
width="24"
>
<use href="#icon-stepper-confirmation-24" />
</svg>
</span>
<span class="progress-stepper__text">
<h3>Preparing for shipment</h3>
<p>We will notify you once it ships.</p>
</span>
</div>
<hr class="progress-stepper__separator" role="presentation" />
<div class="progress-stepper__item" role="listitem">
<span class="progress-stepper__icon">
<span class="progress-stepper__icon">
<svg
role="img"
aria-label="upcoming"
class="icon"
height="24"
width="24"
>
<use href="#icon-stepper-upcoming-24" />
</svg>
</span>
</span>
<span class="progress-stepper__text">
<h3>Delivered</h3>
<p>Guaranteed Wednesday, October 09.</p>
</span>
</div>
</div>
</div>
Shipment Progress
Started
July 3rd
Blocked
July 5th
Delivery
July 6th
<div class="progress-stepper" aria-labelledby="progress-stepper-header">
<h2 class="clipped" id="progress-stepper-header">Shipment Progress</h2>
<div class="progress-stepper__items" role="list">
<div class="progress-stepper__item" role="listitem">
<span class="progress-stepper__icon">
<svg
role="img"
aria-label="complete"
class="icon"
height="24"
width="24"
>
<use href="#icon-stepper-confirmation-24" />
</svg>
</span>
<span class="progress-stepper__text">
<h4>Started</h4>
<p>July 3rd</p>
</span>
</div>
<hr class="progress-stepper__separator" role="presentation" />
<div
aria-current="step"
class="progress-stepper__item progress-stepper__item--attention"
role="listitem"
>
<span class="progress-stepper__icon">
<svg
role="img"
aria-label="blocked"
class="icon"
height="24"
width="24"
>
<use href="#icon-stepper-attention-24" />
</svg>
</span>
<span class="progress-stepper__text">
<h4>Blocked</h4>
<p>July 5th</p>
</span>
</div>
<hr class="progress-stepper__separator" role="presentation" />
<div class="progress-stepper__item" role="listitem">
<span class="progress-stepper__icon">
<svg
role="img"
aria-label="upcoming"
class="icon"
height="24"
width="24"
>
<use href="#icon-stepper-upcoming-24" />
</svg>
</span>
<span class="progress-stepper__text">
<h4>Delivered</h4>
<p>July 6th</p>
</span>
</div>
</div>
</div>