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

Grid Container

Arrange other modular components within a flexible grid system, where any combination of grid cell widths can be utilized. Below is showing image and text components combined in a 4 column grid.

Headline for grid column

Body copy for grid column 

Headline for grid column

Body copy for grid column 

Headline for grid column

Body copy for grid column 

Headline for grid column

Body copy for grid column 

Headline for grid column

Body copy for grid column 

Headline for grid column

Body copy for grid column 

Headline for grid column

Body copy for grid column 

Headline for grid column

Body copy for grid column 

Usage

Rows are controlled by the width set on each individual grid cell. Use this extremely flexible module to create custom row layouts with any combination of grid cell withs.

Module specifications

  • 1 - 6 grid cells can be in a row before they wrap to the next line as a default
  • Background color is configurable
  • Horizontal & vertical gaps between columns are configurable
  • Option to make container fluid
  • Option to not wrap: cells will remain inline on designate screen-widths. This is best used for several small items like social icons
  • Option to turn into slider on desktop, tablet, and/or mobile
  • Option to start grid cell on a new line (to create multiple row grid layouts)

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

1920+ (Default)

6 grid cells per row

5 grid cells per row

4 grid cells per row

3 grid cells per row

2 grid cells per row

1920+ (fluid container)
TABLET
MOBILE

Resources

Reference

For Zeplin access contact the UX Design Manager