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]
};