Chlorophyll
Styles
Slide-out
Slide-out modals allow for details, flows and interactions while not navigating away from the current view.
Available in
Component meta
Component identifier
- component-slideout
Tags
- Global
Design version
- 2023-01-05
Design principles
- Frictionless
Guidelines
Short description
A slide-out modal is a panel that slides in above the main view, leaving the underlying content partially visible.
When and how to use it
Use a slide-out modal when the user needs additional content or related functionality, whilst not leaving the current view. This component is recommended for content such as advanced filtering, show item details (instead of expanding a row), simplified wizards (flows) and small functions.
The slide-out is beneficial to use when you want to reuse a mobile view in a desktop environment.
Behaviour
The component should slide into position in the viewport from the right, partially covering the main content for desktop.
For mobile, the slide-out modal can be presented in two ways. Either it slides up (read more below) in the viewport, or it covers the whole mobile viewport to make use of the available space.
The slide-out is closed by performing one of 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.
Sub-view navigation
The slide-out should not contain too much information. However, if you have information that could be considered secondary content (such as Terms & Conditions, help texts 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
Writing
-
Accessibility
-
Specification
- Details: Specification in Figma
- Instruction: How to access Figma
Width
General
The slide-out width is adjusted to the content it holds.
Specific for logged-in web
- Normal slide-out used in our shells have a fixed width in larger viewports (desktop and tablet): 512 px
- Large slide-out a wider version of the normal slide-out may be used in some cases (i.e. preview of pdf): 768 px
- In mobile viewports the slide-outs become a full takeover or slide-up: 100% width
Header alternatives
Header alternatives
Examples
Arena
Morning
DAP
Corporate actions
Light wizard in a slide-out
Nexus