Banners
GridWrapperBanner

GridWrapperBanner

Layout banner that renders two columns, each containing nested banners.

Includes the common banner props.

Props

id●
string
required

CMS id.

fullWidth●
boolean
required

If true, wrapper renders full width (no x padding).

breakpoint●
'mobile' | 'tablet'
required

Breakpoint at which columns are side-by-side.

columnsWidth●
'FIFTY_FIFTY' | 'SIXTY_FORTY' | 'FORTY_SIXTY' | 'SEVENTY_THIRTY' | 'THIRTY_SEVENTY'
required

Column width ratio left/right.

leftColumnAlign●
'TOP' | 'CENTER' | 'BOTTOM' | 'STRETCH'
required

Vertical alignment for the left column.

rightColumnAlign●
'TOP' | 'CENTER' | 'BOTTOM' | 'STRETCH'
required

Vertical alignment for the right column.

reverseOnBreakpoint●
boolean
required

Swap column order from the breakpoint upwards.

leftColumn●
AnyBanner[]
required

Banners rendered in the left column.

rightColumn●
AnyBanner[]
required

Banners rendered in the right column.

Notes

  • leftColumn and rightColumn can contain any banner type, including another GridWrapperBanner.
  • Consumers should guard against overly deep nesting.

Example

const banner: GridWrapperBanner = {
  typename: BannerTypename.GridWrapper,
  id: 'b_123',
  title: null,
  titleTag: 'h2',
  titleAlign: 'left',
  cssId: null,
  cssClasses: null,
  fullWidth: false,
  breakpoint: 'tablet',
  columnsWidth: 'SIXTY_FORTY',
  leftColumnAlign: 'TOP',
  rightColumnAlign: 'TOP',
  reverseOnBreakpoint: false,
  leftColumn: [{ typename: BannerTypename.Textblock, id: 'x', title: null, titleTag: 'h2', titleAlign: 'left', cssId: null, cssClasses: null, markdown: ['Left'], fullwidth: false } as any],
  rightColumn: [{ typename: BannerTypename.Textblock, id: 'y', title: null, titleTag: 'h2', titleAlign: 'left', cssId: null, cssClasses: null, markdown: ['Right'], fullwidth: false } as any]
};
CarConsumptionInfoBannerInventoryCarBanner