HP.com Design System HP.com Design System

Small info banner

A small multi-use container that can display two layers of related content

Innovation

Help avoid frustrating reprints, wasted supplies, and delays.

Learn

Shop

HP 950 4K Webcam

Look good from every angle

Learn

Security

From the cartridge design to programming and installation, packaging, and tracking, HP implement security features to help provide product integrity.

HP U32 4K HDR Monitor

See your imagination with more detail.

Learn

Shop

Immersive

High performance for complex data tasks

Learn

HP 950 4K Webcam

Look good from every angle

Usage

This component allows users to layer levels of imagery and content to tell multiple levels of a product story.

Module specifications 

  • Option for 1 banner: center aligned
  • Option for 2 banners: side by side
  • Option for 3 or more banners: auto carousel (no max)
  • Module background color is configurable
  • Caption (eyebrow) is optional
  • Static image or video allowed in both image areas

Character counts (with spaces)

  • Card title - 80 max characters
  • Card description - 120 max characters
  • Component eyebrow - 80 max characters
  • Component title: 120 max characters

Example layout

2 column Desktop layout

Tablet carousel option

Mobile carousel option

Resources

Reference

For Zeplin access contact the UX Design Manager

Download