...

Type	Usage	Example
Message Popups	Displaying warnings, error messages, and important information.	Image RemovedImage Added
Dialogs	Collecting information from the user, or allowing them to make decisions.

...

a colored header, including:
- a label (see Content below).
- a close button (unless otherwise specified).
- a help button (optional).
a content area, which contains:
- a title, describing the action that will be performed. (Optional for Dialog popups only, where space is limited).
- the main content including any text, inputs and controls.
Dialog buttons at the bottom of the popup, including:
- a primary action button.
- a secondary and other action buttons (where relevant).

...

Help (grey), Information (blue), and Error (red) popups will use a white focus indicator.
Warning (orange) popups will use a black focus indicator.

Image Removed

Image Added

Responsive design

...

Popups should always remain horizontally and vertically centred, regardless of the screen dimensions.
On large screens popups should remain at their default size.
The left and right internal padding for all popups should reduce to 24px at the same 900px breakpoint.
Where the screen dimensions are smaller than the popup’s height or width, the popup size should be adjusted. A minimum margin of 24px should persist around all four sides of the popup.
- When the popup size is reduced and the full content cannot be displayed:
  - the header text will be truncated with an ellipsis. The full header will be shown in a tooltip on hover.
  - the elements within the main content area will respond, following their own responsive guidelines. A vertical scrollbar may be added where necessary.

Examples at different screen sizes