DRAFT DESIGN IN PROGRESS IMPLEMENTATION PENDING

Marketing modal is similar to the alert modal provides friendly messaging to our users to encourage greater engagement than the simpler confirmation dialogs. They should enable platform understanding, highlight opportunities and support workflow engagement.

The Marketing Dialog is a preconfigured Modal with the following options:

• Scrolling = false

• A custom Modal Content component that accepts an image and center aligns buttons.

Contributors

Adam Butterworth (Deactivated)Ange Romanska (Deactivated)Lael Birch (Deactivated)Joe Cassaro

Related Jira stories

https://openedx.atlassian.net/browse/ENT-3596

Default marketing modal

• Max-width: 450px

• Height determined by the height of the image and the amount of body text

• Elevation and shadow level 4

• White background

• Close button

  • Icon button

• Image

  • Centered

• Body text

• Centered footer button row

  • stacked buttons

  • optional secondary button

  • primary and secondary are visible by default

Single action only

Provides more singular focus on the desired action

Hidden image option

🛠 Resources

Red Line

🌱 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

🌳 Variants

• 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.

♊ Related components

Confirmation dialog

📐 Specification

• A full page transparent overlay is shown underneath the dialog to provide visual focus.

• On mobile screens (XS) the dialog fills 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 secondary. They are not presented in a sticky footer and the dialog content should never have a secondary scroll on the page.

⚛ Anatomy

♒ Behaviors

💕 Accessibility

Meeting Notes