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

    Learn how to prepare your organization for the future of computing from industry leaders.
    Learn how to prepare your organization for the future of computing from industry leaders.

    Learn
    The future of employee computing

  • Workspaces that enable productivity with Vern Yip

    Up to 10 pages
    Up to 10 pages
    Workspaces that enable productivity with Vern Yip

  • Key factors that drive wellbeing for WFH employees

    • At vero eos et accusamus et iusto odio
    • Et harum quidem rerum facilis est et expedita
    • Nam libero tempore, cum soluta nobis est
    Key factors that drive wellbeing for WFH employees

  • A new blueprint for an uncertain world

    See four pillars that will help you prepare a blueprint for whatever the world throws your way.
    See four pillars that will help you prepare a blueprint for whatever the world throws your way.
    A new blueprint for an uncertain world
  • 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

    Learn how to prepare your organization for the future of computing from industry leaders.
    Learn how to prepare your organization for the future of computing from industry leaders.

    Learn
    The future of employee computing

  • Workspaces that enable productivity with Vern Yip

    Up to 10 pages
    Up to 10 pages
    Workspaces that enable productivity with Vern Yip

  • Key factors that drive wellbeing for WFH employees

    • At vero eos et accusamus et iusto odio
    • Et harum quidem rerum facilis est et expedita
    • Nam libero tempore, cum soluta nobis est
    Key factors that drive wellbeing for WFH employees

  • A new blueprint for an uncertain world

    See four pillars that will help you prepare a blueprint for whatever the world throws your way.
    See four pillars that will help you prepare a blueprint for whatever the world throws your way.
    A new blueprint for an uncertain world
  • 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.