HP.com Design System 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.

HP 950 4K Webcam

Look good from every angle

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.

Immersive

High performance for complex data tasks

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

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.