Responsive Element
Steps will automatically adjust their layout for mobile. To make steps automatically stack for tablet as well use the tablet stackable variation.
Types
Steps
A set of step
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
Content
Step
A step
Shipping
Descriptive Step
A step can optionally contain a title and description
Shipping
Choose your shipping options
Steps with Icons
A step can optionally contain an icon
Shipping
Choose your shipping options
Shipping
Choose your shipping options
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
Size
Steps can have different sizes
Shipping
Choose your shipping options
Billing
Enter billing information
Confirm Order
Verify order details
Shipping
Billing
Step
Steps can be divided evenly inside their parent
Shipping
Billing
Confirm Order
Billing
Confirm Order