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

Use case drawer

The use case drawer features 2 or 3 personas or use case examples showcasing why a product or service is right for a target customer. 

Design for your demanding industry standards

Webcam

Meet your tightest deadlines even when editing raw 6K and 8K footage. Ingest files fast and get ultra-smooth video playback when doing color correction and compositing. 

Webcam

Printer

Print at the pace of business—this printer is equipped with fast two-sided printing. Grab the documents you need and go. Print first pages in as fast as 7 seconds. Help save energy with HP Auto-On/Auto-Off Technology.

Printer

Monitor

Trust the colors you see on screen with the world class Z by HP color accuracy you expect. Equipped with the creative color gamuts you work in most, you’ll have all the shades and hues you need for web, photography, and video creation on Mac® or PC. Lean into realism with HDR 400 for darker blacks and brighter whites.

Monitor

Usage

The use of provocative image and focused descriptor text allows the user to easily toggle through product information. Use this module when you want to magnify specific product features.

Module specifications

  • 2 - 3 columns
  • Background and text colors are configurable
  • Module and drawer titles’ font style are configurable
  • Ensure that images have overlay or whitespace to provide best readability
  • Icons specs: 40x40px

Character counts (with spaces)

  • Exterior drawer title -  80 characters max
  • Interior drawer subtitle - 80 characters max
  • Interior drawer body - 180 characters max

Example layouts

2 columns with subtitle and icons

Default Tablet

Default Mobile

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.