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

Statistics card

The Statistic Card module simplifies complex statistics by curating data with visuals and supporting text.

Our progress in numbers

HP Planet Partners helps power a circular economy.

1B+

Pounds of recycled materials have been used in HP products and packaging since 2019

Learn

45M

People reached through 2023 by HP's digital equity programs and partnerships.

Learn

Usage

This module is used to express a set of statistics. It is recommended that the callout is either a percentage or a fraction. The featured image should offer support and help to tell a story. 

Module specifications 

  • Description style, link, color, and card color are configurable
  • A minimum of one card is required – maximum of two cards
  • Imagery is needed for each statistic card

Character counts (with spaces)

  • Statistics call-out - 16 max characters
  • Description - 240 max characters

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.