Step
A step shows the completion status of an activity in a series of activities.

Types

Step

A single step.

You can do the same using shorthands.

Groups

Steps

A set of steps.

Responsive Element
Steps will automatically stack on mobile. To make steps automatically stack for tablet use the stackable='tablet' variation.

You can do the same using shorthands.

Ordered

A step can show a ordered sequence of steps.

Vertical

A step can be displayed stacked vertically.

Content

Description

A step can contain a description.

You can do the same using shorthands.

Icon

A step can contain an icon.

You can do the same using shorthands.

States

Active

A step can be highlighted as active.

Completed

A step can show that a user has completed it.

A step can show that a user has completed it when its group is ordered.

Disabled

A step can show that it cannot be selected.

Variations

Stackable

A step can stack vertically only on smaller screens.

Unstackable2.2.11

A step can prevent itself from stacking on mobile.

Fluid

A fluid step takes up the width of its container.

Attached

Steps can be attached to other elements.

Evenly Divided

Steps can be divided evenly inside their parent.

Size

Steps can have different sizes.

This is the bottom