Internet Explorer is not supported by Design Library

The last version of Internet Explorer, version 11, was released on October 17, 2013. This is a very long time ago when taking into account the rapid development of web technologies. These days it is often difficult and time consuming to get modern technologies to work well in this old browser. More and more frameworks are dropping support, and even Microsoft themselves has announced that they will fully drop support for IE in their own services in 2021.

Consequently, we have decided to not include support for IE in the Design Library website.

Luckily, there are modern options in active development. Please use Firefox, Edge or Chrome instead.

In-page wizard

Presents a sequence that leads the user through well-defined steps within a page.

Guidelines

Short description

The in-page wizard shows a little information at time to allow the user to focus on the content. It keeps the menu visible to keep the user in the context where they were.

When and how to use it

This wizard is particulary mobile-friendly. The steps can vary depending on the user's input and works well when a user has to complete steps in a specific sequence.

Behaviour

The first step is open when user enters the wizard. All steps are immidiately visible to give an overview, but disabled and closed. Once the user has entered relevant information and clicked on the Next/Save button, the next step is opened (and animated). The previous step then is collapsed and animated upwards.

When the user scrolls up, a summary will be shown of previous steps and an edit-button. The edit-button opens the fields in the step for editing again and the Next button is now a Save button. After the user clicks on Save, the step i collapsed and the summary is presented again. 

Do's and don'ts

Do
  • Do use a Next button to move to the next step and a Save button when the user is editing
Don't
  • Don't allow the user to move to the next step without filling in all relevant fields
  • Don't make the poor user go through all steps only to edit one step. 

 

Specification

(not finished)

Desktop Inactive card mesures: 16px up and down, 24px left och right, 24 px från rubrik till innehåll. Rubrik = H4, text color base 600, färg på bock light mode base 200 Active card mesures: 32px upp, 24px ned, 24px left och right, 24 px från rubrik till innehåll. Rubrik = H3, text color 333333, färg på bock light mode base 400. One left alined primry button. Done card coloure: Ett kort med bock(24X24 + Steg x av y + rubrik + secondary edit button that are right alined. Rubrik = H4, färg på text 333333, färg på bock light mode secondary green. Done card mesure: 32px upp, 24px ned, 24px left och right, 24 px från rubrik till innehåll Mobile: 16px upp och ned, 16px left och right, 16 px från rubrik till innehåll. card active: rubrik = H3, card done/inactive: rubrik = H4

Page last updated

Feedback

Was this helpful?