Modal Spec

Modal Spec

2064

Width

Modals have 5 defined minimum widths:

S = 320px
M = 656px
L = 848px
XL = 1024px
XXL = 1600px

Modals must leave 32px padding on all four sides to visually center the content

When the modal is placed in the correct container whether it be the outer most or an inner nested container it allows the modal and mask to present itself within the appropriate layer and content.

Breakpoints

1032 2064

Responsive

Responsive

2064

Keyboard Behavior

Use standard order of operations, Left to Right, Top to Bottom.
Navigation details for embedded components can be found in their respective specs.

KeyFunction
TabTakes user to the next interactive element in the tab order
Shift + TabTakes user to the previous interactive element in the tab order
EnterSelects a button or link
2064