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.

Join

This will be step number one

Download

This will be step number two

Contribute

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

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

For Zeplin access contact the UX Design Manager

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