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.

Walkthrough modal

A walkthrough modal with slides containing informational text and images.


Short description

A walkthrough modal has slides with information (text and images), and is used to transfer knowledge to the user and them a chance to learn about a channel or product.

When and how to use it

Use this component to onboard new users to a channel or product, or when presenting major news in the channel that are important for the user to understand.

Do not use it for communicating minor news or changes.


The modal automatically pops up for the user. The user can choose to skip the walkthrough - the modal is then closed and a coachmark tells the user where they can find the walkthrough for later use. If the user goes through the entire walkthrough, in the last slide of the modal, the user should be informed where they can find the tour again if they need it.

The modal can contain up to 6 slides. Each slide always contains: Heading, Body text, Image. At the bottom it says how many slides there are and which slide is active. By pressing next/previous, the user can go back and forth between slides.


  • The images should not be screenshots.
  • The images should be simplified so it only focuses on the details of the new feature and doesn't obscure the view with other features.
  • The user should be able to easily understand where in the interface the function is.
  • Don’t zoom in much, as this makes it hard to understand where on the screen the function is places
  • Use a mockup to demonstrate where on the device the function is placed (see images).
  • It should be clear where to look in the image, so just keep the important parts in focus (see images).


Walkthrough examples

Walkthrough examples






Do's and don'ts

  • Explain only one thing per slide.
  • Use the module when there are major news or changes.
  • Keep the walkthrough short and sweet. 
  • Don't use the modal for all news and changes.
  • Don't explain more than one function/part in one slide.



  • Write short and concise, to the point.
  • Avoid to write directions or placements. Instead write the name of where it is placed, for example "in the menu you can find..".
  • The heading can be a maximum of 30 characters.
  • The body text can be a maximum of 210 characters.



  • Images should always have an alt text that informs users with screenreaders what the image contains. e.g. "Image showing the profile menus location"
  • Avoid to write directions or placements




Related patterns & components

Page last updated


Was this helpful?