...
| Table of Contents | ||||
|---|---|---|---|---|
|
🛠 Resources
...
🌱 Use cases
For use in
Enterprise coupon redemption as well as the
Enterprise expired subscription blocked view
...
Engagement notification suggestion
https://miro.com/app/board/o9J_ktKsKHk=/?moveToWidget=3074457350664954002&cot=14
...
Actionable
Completely blocking
With Company logo (Enterprise)
With Spot illustrations (Error state, Warning, Success, Promotion, etc)
Without Spot illustration
🌞 Best Practices
Do use this when you need a user to read or interact with the message.
Do not use for simple confirmation interactions.
...
A full page transparent overlay is shown underneath the dialog to provide visual focus.
On mobile screens (XS) the dialog takes up 80% of the screen widthfills the screen width horizontally leaving 12 px of margin to the left and right screen edge in which the user can see the transparent overlay. The dialog height is variable based on the dialog content needs.
On desktop screens (MD, L, XL) the dialog has two standards widths. The narrow version is 400px and the wide one is 600px.
Buttons should be stacked vertically and centered with the primary action always above the secondaryThe modal has a maximum of 80% of the vertical height of the screen and minimum of ###px. They are not presented in a sticky footer and the dialog content should never have a secondary scroll on the page.
⚛ Anatomy
Legend |
♒ Behaviors
...