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

Performance comparison

This module is used to compare 2-3 sets of product specifications across multiple models. 

What's under the hood?

803X

901XL

  • Up to 20ppm

  • of color ISO

Lorem ipsum dolar sit amet

  • Up to 1.2 Ghz

  • of processing speed

Either after first page or after first set of ISO test pages

  • Lorem ipsum

  • dolor sit amet

Lorem ipsum dolor sit amet, consectetur adipiscing elit

  • Ut enim ad minim

  • quis nostrud exercitation ullamco

Sed ut perspiciatis unde omnis iste natus error sit voluptatem

  • At vero eos et

  • accusamus et iusto odio

 Et harum quidem rerum facilis est et expedita distinctio

Usage

Use this module to compare the same specs across different models within the same series.

Module specifications

  • Background color is configurable
  • Option for white or black text
  • Accent color is configurable
  • Icon color is defined by the accent color
  • Icons should be uploaded as 50x50px SVG
  • Within a page, there should only be one performance comparison module
  • Choose informative and valuable specs for the comparison

Character counts (with spaces)

  • Model label - not set, but recommend 20 characters max
  • Leading +trailing stat labels - not set, but it is recommended that the sum of two labels doesn't exceed 66 characters
  • Footnote - not set, but recommend 260 characters max

Example Layout

Default Desktop

Default Tablet

Default Mobile

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.