Chlorophyll
Styles
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.
Slide-out modals allow for details, flows and interactions while not navigating away from the current view.
Styles
Javascript
Javascript
A slide-out modal is a panel that slides in above the main view, leaving the underlying content partially visible.
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.
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:
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):
Illustration of the behaviour: https://tc223o.axshare.com/#id=yzwioh&p=silde_out
-
-
The slide-out width is adjusted to the content it holds.
Header alternatives
Arena
Morning
DAP
Corporate actions
Light wizard in a slide-out
Nexus