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

Collapsible sections

This module hides and shows information within a collapsible section.

Footnotes and Disclaimers

  1. Most secure based on HP’s unique and comprehensive security capabilities at no additional cost among vendors with >1M annual sales as of December 1, 2016 on HP Elite PCs with Intel 7th Gen Intel® Core™ processors, Intel® integrated graphics, and Intel® WLAN. Thinnest based on competitors with >1m units annually of convertible, non-detachables having a Windows Pro OS and 6th or 7th generation Intel® vPro™ enabled processor as of December 1, 2016.
  2. Windows 10 MM14 battery life will vary depending on various factors including product model, configuration, loaded applications, features, use, wireless functionality, and power management settings. The maximum capacity of the battery will naturally decrease with time and usage. See www.bapco.com for additional details.
  3. Starting at weight. Weight will vary by configuration.
  4. MIL STD 810G testing is pending and is not intended to demonstrate fitness for U.S. Department of Defense contract requirements or for military use. Test results are not a guarantee of future performance under these test conditions. Damage under the MIL STD test conditions or any accidental damage requires an optional HP Accidental Damage Protection Care Pack.
  5. Sold separately or as an optional feature.
  6. Based on HP’s unique and comprehensive security capabilities at no additional cost and HP Manageability Integration Kit’s management of every aspect of a PC including hardware, BIOS and software management using Microsoft System Center Configuration Manager among vendors with >1M unit annual sales as of November 2016 on HP Elite PCs with 7th Gen Intel® Core® Processors, Intel® integrated graphics, and Intel® WLAN. 
  7. Workwise – HP WorkWise smartphone app will soon be available as a free download on the App Store and Google Play.

Usage

Collapsible sections are used when there is specific content that the average user may not necessarily want to see. Commonly used for footnotes and FAQ, it saves on space and page load time.

Module specifications

  • Label Name & Collapsible Description colors are configurable
  • Label Name & Collapsible Description font styles are configurable
  • Option to have open on page load
  • One or more collapsible sections  are allowed on the same page
  • Recommended to place closer to the bottom of the page as it is used for specialized content

Character counts (with spaces)

Label Name - 20-115 characters max

Example layouts

Backgrounds should generally be either Charcoal or White depending on the page.

FAQ 1

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Dark option, opened on load

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.