Dialog

Dialogs can be used in the light theme only. There are two dialog variants that feature different styles, depending on what is being presented to a user. Dialogs include a content container or a video player and are placed in the center of a background overlay that covers the entire browser window.

Content

A content dialog can include different kinds of information and interactive elements. A basic content dialog should include at least a headline, content, a button or a call to action, and a close button.

Video player

A video player dialog showcases a video at a large size for easy viewing. It includes a video, playback controls, and a close button.

Background overlay

The background overlay is a black solid with opacity that is positioned under a dialog container. It eliminates distractions and helps a user focus on the content in the dialog.

---

Responsive Design

Both dialog variants occupy eight columns on large screens and span the entire browser window on small screens.

Desktop

Tablet

Mobile

Spacing

Both dialog variants use PatternFly 4 spacers to define spacing values between elements.

Desktop

Mobile