Slide-out

Slideout modals allow for more complex interactions while not navigating away from the current view

Guidelines

A slideout modal is a panel that slides in above the main view, making the underlying content partially visible. The purpose is being able to show a large amount of additional content and not interrupting the primary task.

Usage

Use a slideout modal to allow a user to reference information from the main view, maintaining a contextual connection to the actual task. Whilst this is a great enabler from desktop, the slideout modal covers the whole mobile viewport in order to make better use of the available space.

This behaviour is recommended to use for tasks such as; filtering of main content and show item details instead of expanding a row.

Behaviour

It should slide into position in the viewport from the right partially covering the main content for desktop, whilst in mobile covering the whole viewport.

Slide-out

Examples

Slide-out example in Morning 2019

Above: Slide-out example in Morning

Slide-out example in RPD Alison 2019

Above: Slide-out example in RPD Alison

Specification

Desktop

Slideout desktop - spec

Mobile

Slideout mobile - spec