Wizard

A stepped or tabbed modal

Guidelines (in-progress)

  • Use for task flows with 3-6 steps
  • Use for tasks with multiple entry points
  • Use when the user needs the context of the parent task
  • Should not contain internal navigation

 

Examples

 

Stepped

Use if the process is linear. The user can go back but not forward.

Wizard-Example-Stepped-1

 

Tabbed

Use if the process is non-linear. The user can go to any section in the navigation.

Tabbed wizard, ex 1
Tabbed wizard, ex 2

 

Responsive

 

1440 - 768

80% of the screen. Max width 1250px.

Wizard-Responsive-1440

 

767px and below

Use mobile layout

Steps

Steps

Tabs

Tabs

 

 

Resources

(internal only)

Figma