StepByStep

BetaAccessible

StepByStep component is useful for visualising a process in steps. The component supports numbered list for cases where the steps must be completed in a specific order, and unnumbered list for cases where the steps are more of a guideline.

Usage

Example

Numbered step by step component

Numbered list is suitable for case where the order of the steps is important.

  1. Step 1 title

    Here you can describe the step in detail. Keep the text compact so the user gets the big picture of the whole process and its steps easily.

  2. Step 2 title

    Step description.

    Example link

  3. Step 3 title

    Step description.

Principles

  • The purpose of the StepByStep component is to provide an easy overall picture of a process.
  • Every step should have a title.
  • Step description is optional. The description should be compact, preferably one sentence long and two at the maximum. This is because the steps should provide a quick way to understand the whole process and too long texts can hinder that experience.
  • A step can have a button as a call to action, e.g. making a phone call. But a button should not direct to another site.
  • A step can have a link to provide additional information.
  • The button and the link should relate to the step's contents. We recommend having only one button or a link per step, but sometimes it could be reasonable to have two. Before adding a second button or a link, consider whether the step should be divided into two steps. If you add two buttons, make the second one variant="secondary".

Variations

Default

The unnumbered list is useful when the order of the steps is less important and they form more of a guideline.

Unnumbered step by step component

The unnumbered list is useful when the order of the steps is less important and they form more of a guideline.

  • Step 1 title

    Here you can describe the step in detail. Keep the text compact so the user gets the big picture of the whole process and its steps easily.

  • Step 2 title

    Step description.

    Example link

  • Step 3 title

    Step description.

Numbered list

Numbered list is suitable for cases where the order of the steps is important.

Numbered step by step component

Numbered list is suitable for cases where the order of the steps is important.

  1. Step 1 title

    Here you can describe the step in detail. Keep the text compact so the user gets the big picture of the whole process and its steps easily.

  2. Step 2 title

    Step description.

    Example link

  3. Step 3 title

    Step description.