Stepped Guide
- Variants
- Default 33
A stepped guide is a unique deck variation that simplifies a long or complicated process by breaking it down into steps that users can more easily understand.
Stepped-Guide-Default-33
Usage
The Stepped Guide can be used when you want to illustrate steps in a process and provide support to help users achieve those steps.
Using a ‘connector’ between the numbered circles reinforces the progression of the steps. Even though stepped guide cards can fill multiple rows, the connector only connects the steps on a single row. On mobile there are only single cards stacked, so there is no connector.
Design Specifications
Stepped-Guide-Default-33
Best Practices
Do
- Use links within a stepped guide card to help a user complete that step.
- Keep copy clear and concise for titles and body descriptions.
- Use uniform card heights and widths within a stepped guide.
Don’t
- Allow the ‘connector’ (the line that connects steps) to extend past the final step in a row of cards.
- Use a single card in a stepped-guide. Must include at least 2.
- Use shadowing or 3D effects.
Accessibility
Ensure designs meet color/contrast requirements on Color Guidelines, follow link guidelines, and Schwab Accessibility guidelines.