HP.com Design System HP.com Design System HP.com Design System

Hotspot Content Viewer

A module that makes shopping a more inspirational and immersive experience.

Form meets function

hotspot main image

hotspot main image

Spectre x360

The simplicity you expect, the power you don’t. Meet jaw-dropping performance.

The simplicity you expect, the power you don’t. Meet jaw-dropping performance.

Starting at $1,299.99

pen

HP Rechargeable Pen

Ergonomic feel with programmable buttons

Starting at $1,299.99

Usage

This module brings lifestyle imagery to the forefront and lets our users explore products in-situ while maintaining an overall message. We only show one product at a time, focusing on what the user is most interested in.

Module specifications

Minimum of 2 hotspots; there is not a set limit but we recommend a max of 10
Accommodates only static imagery
Can accommodate CTA's, bullets and pricing
Background color configurable
Copy sizing configurable
May swap orientation (image on left, cards on right)
Ability to place the main headline above the module, or within the card.
If content in card starts to exceed space, it will start to scroll within the card.
Image for both the main hotspot area and image for each individual card required.

Character counts (with spaces)

Module headline - 50 max characters
Module body copy - 120 max characters
Hotspot copy - 160 max characters

Example layouts

Desktop view with card orientation on the right.

Tablet view

Mobile view

Mobile view expanded

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.