DisclosureBanner

Collapsible disclosure/accordion list.

Includes the common banner props.

Disclosure block preview

Props

id●

string

required

CMS id.

items●

BannerListItem[]

required

Collapsible items rendered in order.

BannerListItem uses a markdown document whose first block is the question and remaining blocks are the answer.

fullwidth●

boolean

Use the wider constrained content width.

Example


const banner: DisclosureBanner = {
  typename: BannerTypename.DisclosureBlock,
  id: 'b_123',
  title: 'FAQ',
  titleTag: 'h2',
  titleAlign: 'left',
  cssId: null,
  cssClasses: null,
  items: [
    {
      id: 'i1',
      document: [
        { type: 'heading', level: 3, children: [{ text: 'Shipping' }] },
        { type: 'paragraph', children: [{ text: 'Shipping details...' }] }
      ],
      nativeIcon: null,
      image: null,
      link: null
    },
    {
      id: 'i2',
      document: [
        { type: 'heading', level: 3, children: [{ text: 'Returns' }] },
        { type: 'paragraph', children: [{ text: 'Returns details...' }] }
      ],
      nativeIcon: null,
      image: null,
      link: null
    }
  ],
  fullwidth: false
};

Notes

The first markdown block is used as the disclosure title; remaining blocks are rendered as content.