Hotspot Content Viewer

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

Form meets function

hotspot main image
hotspot main image
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.

Learn

Shop

Starting at $1,299.99

pen

HP Rechargeable Pen

Ergonomic feel with programmable buttons

Learn

Shop

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

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.