Overlay Stable Dark theme
A container overlaying the page to place the focus on this popped-up content. The rest of the visible interface below is darkened by a fog.
General guidance
In contrast to a Modal Dialog, user action is not mandatory here. Overlays can be displayed centered or arranged at the edges. The size of the layer is only limited to the viewport of the browser or screen. They can contain any kind of content. Longer content should be scrollable inside the overlay. To close an overlay there is a close icon on the upper right edge of it. Even more simply, it will disappear when the user clicks on the surrounding fog.
Related components
As a dialog for a users decision, the Modal Dialog offers an overlay with a title and buttons for all concerns.