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