--- layout : 'default' css : 'steps' element : 'step' elementType : 'element' title : 'Step' description : 'A step shows the completion status of an activity in a series of activities' type : 'UI Element' themes : ['default', 'Basic', 'GitHub'] --- <%- @partial('header') %>

Types

Steps

A set of step

Shipping
Choose your shipping options
Billing
Enter billing information
Confirm Order
Verify order details

Ordered

A step can show a numerically ordered sequence of steps

Shipping
Choose your shipping options
Billing
Enter billing information
Confirm Order
Verify order details

Vertical

Vertical steps display each step 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

Linkable Steps

A step can be clickable

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

Fluid Card

A fluid card takes up the width of its container

Shipping
Choose your shipping options
Billing
Enter billing information

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