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

Feature focus

The feature focus module allows a user to view a specific feature or part of a product in digestible increments.
HP OfficeJet Pro

35-page automatic document feeder

Hands-free 35-page Automatic document feeder.

Automatic two-sided printing

Save time and paper with automatic two-sided printing and scanning.

Reliable connections with HP+

Connected cloud automatically detects and fixes connectivity issues.3

Productivity on-the-go

High-quality scan and print from HP Smart app and advanced productivity features with HP+.1

Instant Ink print subscription service

Enroll to get ink, plus hassle-free delivery and recycling. 6 months of Instant Ink included with HP+.7 After 6 months, a monthly fee will be charged automatically unless cancelled.

Enhanced security

Enhanced security protects from viruses, malware, and helps maintain privacy.

35-page automatic document feeder

Hands-free 35-page Automatic document feeder.

Automatic two-sided printing

Save time and paper with automatic two-sided printing and scanning.

Reliable connections with HP+

Connected cloud automatically detects and fixes connectivity issues.3

Productivity on-the-go

High-quality scan and print from HP Smart app and advanced productivity features with HP+.1

Instant Ink print subscription service

Enroll to get ink, plus hassle-free delivery and recycling. 6 months of Instant Ink included with HP+.7 After 6 months, a monthly fee will be charged automatically unless cancelled.

Enhanced security

Enhanced security protects from viruses, malware, and helps maintain privacy.

Usage

The use of provocative image and focused descriptor text allows the user to easily toggle through product information. Use this module when you want to magnify specific product features.

Module specifications

  • Minimum of 2 descriptive feature tabs ; there is not a set limit but we recommend a max of 10
  • Accommodates only static imagery
  • Can accommodate CTA's
  • Background color configurable
  • Copy color configurable
  • May swap orientation (image on right, copy on left)
  • Ability to add support imagery within focus tabs
  • Available in multiple layout configurations to accomodate multiple product sizes (see below examples)

Character counts (with spaces)

  • Module headline - 50 max characters
  • Module body copy - 120 max characters
  • Descriptive tabs header+ body - 120 max characters

Example layouts

The feature focus module allows a user to view a specific feature or part of a product in digestible increments.

Image layers on the left are hotspots highlighting a single feature of a product.

Tablet view

Mobile view

Numbered hotspots highlighting featured areas with supporting images

Tablet view

Mobile view

Wide image layout, centered with thumbnails 

Tablet view

Mobile view

Resources

Reference

For Zeplin access contact the UX Design Manager

Export Guide

Figma

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