HP.com Design System HP.com Design System

Click to Shop

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

Form meets function

Spectre x360

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

Learn

Shop

Starting at $1,299.99

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

Download