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

For Zeplin access contact the UX Design Manager