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
test

Innovation

Help avoid frustrating reprints, wasted supplies, and delays.

Learn

Shop

HP 950 4K Webcam

Look good from every angle

Learn
test
test

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
test
test

Immersive

High performance for complex data tasks

Learn

HP 950 4K Webcam

Look good from every angle

test

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

Figma

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