Modals display content that temporarily blocks interactions within the main view of a site. It can contain critical information, require decisions, or contain entire feature workflows.
Modals have four sizes depending on the width of content that needs to be displayed. Medium is the default size.
When the content of the modal is larger than the screen supports, it becomes scrollable with consistent spacing between the screen edge and the modal.
For mandatory workflows and notifications, we can also remove the close functionality. The close button in the Modal Header does not appear and clicking on the backdrop doesn't do anything.
The Modal Footer can have a few layouts depending on the needs of the Modal. Usually they fall into one of these four layouts.