The old wizard

A wizard presents a sequence that lead the user through well-defined steps. Use the modal Take-over which gives the user full focus on the task in front of them.

Short description

The purpose of a wizard is to present a series of steps or conditions that a user needs to complete in order to reach a goal. It accomplices that by splitting up a complex task into a sequence of smaller parts that are easier to focus on.

When and how to use it

Use a wizard when a user has to complete steps in a specific sequence or when a complicated task needs to become simplified. Be specific on what information a user is required to supply at each step. Use that supporting content area to give hints on what is required or provide a short FAQ relevant to that step. Try to group related questions like personal information in one step. Do not overcrowd a step with more than one or two questions or statements.


The wizard relies on the behaviour of a takeover modal, where it acts as an added layer on top and uses the whole width and height of the viewport. A grid is applied on the main content area, whilst supporting content and the steps indicator are fixed at 256px. The wizard is also affected by the density scaling behaviour inherited from the SEB UI framework. Subtle animations are used to enhance certain actions such as when moving to the next step.

Here you can find a wizard implemented in Angular:

Template for desktop

At 1280px width and above, the main and supporting content become centre aligned in the available space while the steps indicator is sticky on the left side of the viewport.

Wizard - desktop - default

Wizard - desktop - form

Wizard - desktop - receipt


Template for tablet landscape

Due to relevancy and space needed at a width of 1024px, the supporting content area is collapsed allowing the main content to used the available width.

Wizard - tablet - default

Wizard - tablet - form

Wizard - tablet - receipt


Template for tablet portrait and mobile

The steps area is merged and collapsed with the headline, thus making more emphasis on the actual content. A progress bar is added on the top to give a graphic representation of the remaining steps.

Wizard - mobile - default

Wizard - mobile - section expanded

Wizard - mobile - form

Wizard - mobile - receipt

Example from Prince (May 2018)

First step

First step - example from Prince

Middle step

Middle step - example from Prince

 Last step

Signature step - example from Prince