Grid List

Description

The Grid List component displays multiple items of text in a visual grid.

  • Alignment Options:
    • Big Style: wide, full
    • Small Style: center, wide, full
  • Color Themes: none
  • Visible Content Fields: list of text items, image, CTA link
  • Instances per Page: none to multiple

How it Works

  • Content editors select a large or small style and add multiple text items
  • Image, title, and CTA link are optional

Images

Aspect Ratio (recommended)Width (proportional)Height (proportional)Scaling Behavior
3:4N/AN/AScales proportionally down to tablet. No image on phone view.

Examples

Big Style

id: CB-005-002-00
data-region: cb__grid-lists__big

with media

Explore in Storybook

with media and header

Explore in Storybook

with no media

Explore in Storybook

Small Style

with header

id: CB-005-001-00
data-region: cb__grid-lists__small

Explore in Storybook

with three columns

id: CB-005-001-02
data-region: cb__grid-lists__small__linklist

Explore in Storybook