HP.com Design System HP.com Design System

Data Table

Houses multiple table formats for detailed yet scannable information.
Printing speed
Image resolution
Line screens
Image size
Priming unwinder
.id { background: #f2ebdc !important; background-origin: border-box !important; }
  • 101 ft/min in 4-color mode; 135 ft/min in EPM; 82 ft/ min in 5-color mode
  • 101 ft/min in 4-color mode; 135 ft/min in EPM; 82 ft/ min in 5-color mode
  • 101 ft/min in 4-color mode; 135 ft/min in EPM; 82 ft/ min in 5-color mode
.id { background: #2A2C2E !important; background-origin: border-box !important; }

    101 ft/min in 4-color mode; 135 ft/min in EPM; 82 ft/ min in 5-color mode

     

.id { background: #e6e6e6 !important; background-origin: border-box !important; }

175, 180, 180m , HMF-200

.id { background: #FFF !important; background-origin: border-box !important; }
  • 29 x 43 in maximum; Repeat length: 21.6 in minimum, 43 in maximum
  • 29 x 43 in maximum; Repeat length: 21.6 in minimum, 43 in maximum
  • 29 x 43 in maximum; Repeat length: 21.6 in minimum, 43 in maximum
.id { background: #000 !important; background-origin: border-box !important; }

Usage

Presents specific content in a scannable format, and scales responsively for easy digestion on smaller screen sizes. This module supports images in its headers and table content.

Module specifications

  • Background color is configurable
  • Divider colors are configurable and optional
  • Alternating row background color is configurable
  • Text color is configurable 
  • Font styles are configurable
  • Option to have column and/or row headers
  • Option to add images to headers or cells
  • Option to add CTA's to cells

Character counts (with spaces)

This is one of the few components that does not have a character limit, however we do ask that marketing use best-practices in keeping copy short, concise and consumer-facing to keep reader's attention.

Example layouts
TABLET
MOBILE

Resources

Reference

For Zeplin access contact the UX Design Manager

Download