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.

Fold-out

The fold-out is presented in-context to the related data, so users don’t lose their place in the app. It appears upon interaction with the 3 dot button and displays a list of choices, one choice per line.

Available in

Component meta

Component identifier

component-foldout

Tags

Design version

2018-03-07

Design principles

Guidelines

Short description

Use a fold-out to show actions that are grouped due to not enough space or urgency. It should not be used as primary navigation or to hide essential functions within the application.

Fold-out

Behaviour

Can be dismissed by clicking outside. It originates from the emitting element and does not contain nested choices.

Placement

Desktop: Right aligned to the emitting element. If space is not available the fold-out should mirror the location to where needed space is available.

Specification

For desktop

Fold-out - desktop states

For mobile

  • Close button: 16 px, regular, Dark blue 1
  • Options: 16 px, regular, Grey 800

Related patterns & components

Dropdown
More menu

Page last updated

Feedback

Was this helpful?