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.
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.
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
Below: Slide-out example in Arena
Below: Slide-out example in Morning
Below: Slide-out example in DAP
Above: Slide-out example in Corporate Actions