Short description

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.

When and how to use it

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.

Secondary content

Note that the slide-out should not contain too much information. If you have information that could be considered secondary content, such as terms and conditions or related information, use a link that slides the secondary content in view from the right and pushes away the primary content. Use a link back in the top of the new view, that slides the primary content back in the left direction.

Illustration of the behaviour: https://tc223o.axshare.com/#id=yzwioh&p=silde_out

The component is closed by performing the following:

• Click on the close button in upper right corner
• Click outside of the slide-out component
• If the content (typically a flow or form) requires it, give the possibility to click on a cancel button to empty the form and close the slide-out component.

Examples

Short description

Slide-up sheet is a white area sliding up from bottom of the viewport. The purpose is to mimic the native mobile behaviour of the slide-up component.

When and how to use it

The component is used when you want the user to take action from a list of options (e.g. select bank account) or present a set of data, without requirement of further actions (e.g. further information or clarification).

Behaviour

The Slide-up sheet is based on the native component and aims to have similar behaviour and pattern. It can be triggered from different components like a default link, a button, selector etc. Slide-up sheet is only available on mobile devices regardless app or responsive framework.

On desktop, the equivalent component is the Slide-out modal.

The height of the slide-up sheet should be dynamic in that sense that it adjusts its height to the content. The max height of the component should be X% of the view port since the "Close"-icon can be easily mistaken by the “Close”-link in the native navigation bar. When the sheet is set to max-height, additional content should be scrollable. The title and "Close"-icon should be sticky when content scrolls beneath it.

The component is closed by performing the following:

• Tap "Cross"-icon in upper right corner
• Tap outside of component
• Select an actionable option (if that is the case of content)
• Vertical drag or flick-gesture on component area

Do's and don'ts

• Use when you want to present a list of actions where every single option requires extensive amount of data and headings/paragraphs
• Use when it is preferable for the user to stay in context
• Use defined components in the sheet, e.g. list with several columns and rows, heading, paragrap

• Don't make it full height to top of viewport
• Can be overkill to use if you have one word or short sentences as a selection option. Use instead native scroll wheel behaviour
• Avoid having more than two slide-up sheets active at the same time

Examples

Below: Calculating loss of capital

Specification

Read up on what rem means here.

Alternative headers