Responsive Element
Steps will automatically stack on mobile. To make steps automatically stack for tablet use the tablet stackable variation.
Types
Step
A single step
Shipping
Groups
Steps
A set of steps
Shipping
Choose your shipping options
Billing
Enter billing information
Confirm Order
Ordered
A step can show a ordered sequence of steps
Shipping
Choose your shipping options
Billing
Enter billing information
Confirm Order
Verify order details
Vertical
A step can be displayed stacked vertically
Shipping
Choose your shipping options
Billing
Enter billing information
Confirm Order
Verify order details
Right vertical steps will show the active arrow to the left
Shipping
Choose your shipping options
Billing
Enter billing information
Confirm Order
Verify order details
Content
Description
A step can contain a description
Shipping
Choose your shipping options
Icon
A step can contain an icon
Shipping
Choose your shipping options
Shipping
Choose your shipping options
Billing
Enter billing information
States
Active
A step can be highlighted as active
Billing
Enter billing information
Completed
A step can show that a user has completed it
Billing
Enter billing information
Billing
Enter billing information
Disabled
A step can show that it cannot be selected
Billing
Variations
Stackable
A step can stack vertically only on smaller screens
Shipping
Choose your shipping options
Billing
Enter billing information
Confirm Order
Verify order details
Fluid
A fluid step takes up the width of its container
Shipping
Choose your shipping options
Billing
Enter billing information
The steps take up the entire column width
Unstackable
A step can prevent itself from stacking on mobile
Shipping
Choose your shipping options
Billing
Enter billing information
Confirm Order
Verify order details
Attached
Steps can be attached to other elements
Shipping
Choose your shipping options
Billing
Enter billing information
Confirm Order
Verify order details
Shipping
Choose your shipping options
Billing
Enter billing information
Confirm Order
Verify order details
Evenly Divided
Steps can be divided evenly inside their parent
Shipping
Billing
Confirm Order
Billing
Confirm Order
Size
Steps can have different sizes
Shipping
Choose your shipping options
Billing
Enter billing information
Confirm Order
Verify order details
Shipping
Choose your shipping options
Billing
Enter billing information
Confirm Order
Verify order details
Shipping
Choose your shipping options
Billing
Enter billing information
Confirm Order
Verify order details
Shipping
Billing
Shipping
Billing
Shipping
Billing
Shipping
Billing
Inverted
A step's color can be inverted
Shipping
Choose your shipping options
Billing
Enter billing information
Confirm Order
Shipping
Choose your shipping options
Billing
Enter billing information
Confirm Order
Verify order details
Shipping
Choose your shipping options
Billing
Enter billing information
Confirm Order
Verify order details