HP.com Design System HP.com Design System HP.com Design System

Modal

Modals are used in tandem with buttons, allowing for any type of content to be opened in a pop-up with an overlay. A modal window opens inside the active page when the user clicks or taps a button. It can contain any of the components in our component library, including video.

Usage

Use the modal window to contain extra components, video or text.

Module specifications

Background colors are configurable
Width is configurable
Can implement inline components or embed an iframe
Any components can be placed inside modal
Keep content digestible - recommend up to 3 components used inside a modal

Character counts (with spaces)

N / A

Example layouts

Desktop with inline components

Mobile with inline components

Desktop with embed

Mobile with embed

Resources

For Zeplin access contact the UX Design Manager

Components can only be copied from our library, unless you belong to our HP Enterprise Figma instance.