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

Statistics drawer

An interactive drawer module that showcases large statistics copy as well as detail copy and images to support.

These are some statistics

80%

The HP Elite Dragonfly is made with 80% post consumable waste.

Learn
dragonfly

56%

56% decrease in scope 1 and scope 2 C02e emissions across our value chain since 2015.

Learn
printer

Usage

This module is used to express a series 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 minumum of two cards are required – if there more than four, the section will function as a carousel on desktop screens

Character counts (with spaces)

  • Statistics call-out - 4 max characters
  • Description - 120 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.