Layout > Dialog

The .dialog class allows you to create an overlay on the screen with a box centered on top of everything else, like a modal or dialog. It requires the structure shown below. You have a wrapper element with the .dialog class, and you should have a single child element in it. The child element is positioned in the center, while the .dialog element can be extended with your own classes (e.g. background classes).

html<div class="dialog">
    <div>My dialog</div>
</div>

Utility classes

The available utility classes to alter the settings for .dialog are listed below.

• .dialog-w-<name>: set the max-width of the dialog element (the inner child element). Based on $feo-breakpoints.
• .dialog-g-<name>: set the padding around the dialog element (the inner child element). The padding is applied to all direct children of the parent. Based on $feo-sizes.

If the utility classes are not flexible enough and you want to adjust the way the layout pattern behaves, adjust the --dialog-gutter, and/or --dialog-width custom properties on the element you are applying this pattern to.