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

Step-by-step

The module supports key information by presenting proof points in a memorable stepped format.

Follow these steps

This module will help break it down for users with a series of easy steps.

picture

Join

This will be step number one

Join
picture

Download

This will be step number two

Download
picture

Contribute

This will be step number three. You add more steps after this, they will carousel.

Contribute

Usage

Break it down for your users. The module supports key information by presenting proof points in a memorable stepped format. It supports a minimum of two steps.

Module specifications 

  • Headline, Description, Card copy, and Featured images 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)

  • Component Headline - 50 max characters
  • Component subhead - 140 max characters
  • Step eyebrow - 50 max characters
  • Step copy (headline + description) - 140 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.