| Size | Unit | PX |
|---|---|---|
| narrow | 55 | 440px |
| medium | 72 | 576px |
| wide | 130 | 1040px |
Whenever possible, use the default narrow modal.
narrow: for simple modals like prompts or forms.
medium: for more complex content like multicolumn layouts.
wide: for large content like previews.
If the modal has multiple sections with tabs or steps, adjust the width of each section to fit the content. To avoid a jumping effect due to height changes, set a fixed top offset. Center the tallest section first and use its top position as the top offset for all sections.
For the modal card, apply the same padding and radius rules defined in the card patterns.