Anatomy

1. Header
2. Content
3. Footer
4. Close Icon
5. Scrim/Overlay

Appearance

Modals display over the top of the main page along the z-index. A semi-transparent overlay separates the modal container from the page content.

Modals consist of three main parts:

• Header Headers include an exit button and a title that describes clearly what the purpose of the modal is.
• Content The content area is flexible and can include text, images, form fields, or other elements.
• Footer (optional) Up to two CTAs can be included in the footer, typically to confirm/continue or cancel the action.

Viewport

In viewports 768 px wide and up, the modal appears as a center aligned popup.

In viewports narrower than 768 px, the modal has a tray-like appearance.

Max-Width & Padding

Max-width and padding are two separate properties that allow designers to provide a modal that is suite for their unique content. Note that max-width is only recognized in viewports 768px and wider.

Max-Width