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

Content accordion

A list of content blocks that expand and reveal associated image.

Hybrid work resources

Hybrid work resources

  • The future of employee computing
  • Workspaces that enable productivity with Vern Yip
  • Key factors that drive wellbeing for WFH employees
  • A new blueprint for an uncertain world

Usage

This module showcases content in a 'Table of Contents' format, with the ability to collapse copy on click.

Module specifications

  • Option for image or color background
  • Background and text colors are configurable
  • Option to auto rotate
  • List options: ordered, unordered, none
  • There is not set limit, but a max of 6 tabs is recommended
  • This module works best with dark background and dark photography to allow for maximum text readablity

Character counts (with spaces)

  • Heading - 60 max characters
  • Description - 270 max characters

Example layouts

Ordered list (default)

Arabic

Mobile variations

Example without numbers

Example without numbers

  • The future of employee computing
  • Workspaces that enable productivity with Vern Yip
  • Key factors that drive wellbeing for WFH employees
  • A new blueprint for an uncertain world

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.