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.

Lorem ipsum dolor

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur.

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

Reference

For Zeplin access contact the UX Design Manager

Figma (part of Columns Component)

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