Steppers

Indicators that convey progress through an ordered sequence. Component can also be used for navigation.

Reference: Adapted from https://material.io/guidelines/components/steppers.html

Custom component

Steppers are a custom GEL component.

Vertical

The vertical stepper is based on Bootstrap's collapse functionality. Read more here.

Step 1...
2Step Two
Step 2...
Step 3...

Completed Steps

Add the .completed class to the .step-heading > a element to mark that step as complete.

A finished action is indicated by a grayed-out stepper.

Reference: Adapted from https://material.io/guidelines/components/steppers.html

Step 1...
2Step Two
Step 2...
Step 3...

Horizontal

The horizontal stepper is based on Bootstrap's tab functionality. Read more here.

Step 1...
Step 2...
Step 3...
Complete

Completed Steps

Add the .completed class to the .stepper-steps > li element to mark that step as complete.

A finished action is indicated by a grayed-out stepper.

Reference: Adapted from https://material.io/guidelines/components/steppers.html

Step 1...
Step 2...
Step 3...
Complete
Third-party Content Disclaimer