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

  • Workspaces that enable productivity with Vern Yip

    Up to 10 pages
    Up to 10 pages

  • 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

  • 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.

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

  • Workspaces that enable productivity with Vern Yip

    Up to 10 pages
    Up to 10 pages

  • 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

  • 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.

Resources

Reference

For Zeplin access contact the UX Design Manager

Download