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.

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.

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.

For desktop

States

Fold-out - desktop states

For mobile

Typography

  • Close button: 16 px, regular, #0092E1
  • Options: 16 px, regular, #333333

Specification 

Fold-out - mobile spec

States

Fold-out - mobile states