DoubleTileCardBanner

Two tiles shown side-by-side.

Types

type DoubleTile = {
  subline: Maybe<string>;
  copy: Maybe<string>;
  linkText: string;
  url: DynamicLink;
  image: ImageProps;
};

Props

id●

string

required

CMS id.

first●

DoubleTile

required

Left tile content.

subline: optional small headline

copy: optional text

linkText: CTA label

url: link object

image: tile image

second●

DoubleTile

required

Right tile content (same shape as first).

Example

const banner: DoubleTileCardBanner = {
  typename: BannerTypename.DoubleTileCard,
  id: 'b_123',
  title: null,
  titleTag: 'h2',
  titleAlign: 'left',
  cssId: null,
  cssClasses: null,
  first: {
    subline: 'Shop',
    copy: 'New arrivals...',
    linkText: 'Open',
    url: { label: 'Open', isAbsolute: false, url: '/shop', query: [] },
    image: { id: 'img1', name: 'Shop', imageRights: null, file: {} as any, mobileFile: null, alt: 'Shop', breakpoint: null, cars: [] }
  },
  second: {
    subline: 'Service',
    copy: 'Book an appointment...',
    linkText: 'Book',
    url: { label: 'Book', isAbsolute: false, url: '/service', query: [] },
    image: { id: 'img2', name: 'Service', imageRights: null, file: {} as any, mobileFile: null, alt: 'Service', breakpoint: null, cars: [] }
  }
};

TileCardBanner HeadlineBlockBanner