Suspicious activity for device
Sent always
Modals
Read about our dashboard design system and its visual components.
Version 1.0
Standard modals look and behave similarly to general purpose cards. Modal headers have a right aligned set of controls for cancelling and closing the modal. Unlike cards, modal header titles are larger and titlecased. Modals are modular and can include other types of elements such as sub navigation.
-
Larger and titlecased header text compared to cards
-
Modal controls a positioned on the top right
Select a filter
Add email filter
Dialog modals are short and conversational modals that prompt a yes or no action. The body element always contain a question and is followed by the action buttons.
-
Short and conversation based
Discard changes
Are you sure you want to cancel editing this policy and discard all changes?
Use large modals for situation where large amount of important information and form elements need to be displayed. Unlike other modals, action buttons are positioned on the right inside the footer and applied as medium sized buttons. Large modals are particularly useful at the beginning of a creation wizard flow or situations where an important one-off form input is required.
-
Useful for one-off form inputs
-
Action buttons are right aligned and at the bottom
-
Header background is shaded
Create Risk Policy
Create a custom policy to manage and define how different types of risk should be handled.
If the content and layout inside the modal is complex or require scrolling, using a slide-modal is a great way to house this type of content. By default, slide-in modals span the viewport height making it suitable to house large content. Similarly to a large modal, slide-in modal header background is shaded.
-
Useful for very large content
-
Header background is shaded