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

Download