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

Save up to $25 on selected DeskJet printers.

Free storewide shipping | $5 Instant Ink e-card with select printers | Buy more, save more!

Pop up banner

A module that offers prominent visibility to key messages. 

Usage

This module is visually prominent yet unobtrusive, it helps deliver key messages that drive a call to action, such as announcements, promotions, and special offers. 

 

Module specifications

  • The height of the module is determined by the height of the media
  • Supports multiple CTAs
  • Supports PNG, JPG, SVG
  • A timer is configurable and controls when the banner drops or rise
  • Top orientation: sticks under the Global Nav
  • Bottom orientation: sticks to the bottom of the browser
  • This module will sit above the Compare Tool if it's in the bottom position
  • Top and bottom dividers are configurable

Character counts (with spaces)

This is one of the few components that does not have a character limit, however we do ask that marketing use best-practices in keeping copy short, concise and consumer-facing to keep reader's attention.

Example layouts

TABLET
MOBILE

Resources

Reference

For Zeplin access contact the UX Design Manager

Figma

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