HP.com Design System HP.com Design System

Product View Card

The Product View Card introduces a product with quick labels and a slideshow.

New product

HP 930 Creator Wireless Mouse

Experience uninterrupted creativity with a multi-device mouse that is crafted to create with programmable buttons, ergonomic design, and rechargeable battery life that lasts up to 3 months¹. (Also available in Nightfall Black)

HP Bluetooth Travel Mouse

Scroll through your documents, and websites, wherever life takes you, with the compact, 5-button, wireless mouse that works on virtually any surface.⁴

4.5 inches

HP 430 Multi-Device Wireless Mouse

Work from home or the office with a versatile and customizable mouse that works on most surfaces, connects across devices, and has up to 24 months battery life¹.

4.5 inches

New product

HP Wireless Premium Mouse

Be comfortable with a mouse that naturally fits your left or right hand and easily navigate documents with accurate tracking and hyper-fast scrolling.

HP 410 Slim Bluetooth Mouse

Make a statement with every click with this sleek, versatile mouse featuring Bluetooth® connectivity, multi-OS compatibility, and a battery that lasts 12 months¹.

HP 240 Bluetooth Mouse

Strong connection, fast tracking, and a long battery life will keep you clicking all day, every day whether you are learning or working.

Usage

Product view card gives a short introduction to the capabilities of a product. It is equipped with image labels and a slideshow that highlight the features that set itself apart from its competitors.

Module specifications

Background color of module is configurable
The tiles would carousel when it exceeds 3 cards
Supports slideshow capability
Two non-functional image labels are available
Background color of the image label is configurable
Font stylings of image label are configurable
The background color of the product tile is set to grey to comply with brand guidelines for all product-related content
Title and body copy font style are configurable
Can support up to 2 CTAs

Character counts (with spaces)

Image label - 20 characters max
Card headline- 50 characters
Card body copy- 120 characters

Example layout

Default Desktop

Default Desktop in a carousel

Default Tablet

Default Mobile

Resources

For Zeplin access contact the UX Design Manager