HeroBlockBanner

Carousel/slider hero area built from slides.

Hero block preview

Types


type HeroSlide = {
  id: string;
  background: ImageProps | null;
  video: VideoProps | null;
  title: Maybe<string>;
  titleTag: 'h1' | 'h2';
  text: Maybe<string>;
  buttonText: Maybe<string>;
  buttonLink: DynamicLink | null;
  style: Maybe<string>;
  theme: Theme | null;
};

Props

id●

string

required

CMS id.

slides●

HeroSlide[]

required

Slides rendered in order.

background: optional image

video: optional video (can replace background)

buttonLink: optional link

theme: optional per-slide theme

Notes

If both background and video are present, the renderer must decide precedence.
titleTag is per-slide to allow the first slide to be h1 while others are h2.
theme is documented in Theme.

Example


const banner: HeroBlockBanner = {
  typename: BannerTypename.HeroBlock,
  id: 'b_123',
  title: null,
  titleTag: 'h2',
  titleAlign: 'left',
  cssId: null,
  cssClasses: null,
  slides: [
    {
      id: 's1',
      background: { id: 'img1', name: 'Hero', imageRights: null, file: {} as any, mobileFile: null, alt: 'Hero', breakpoint: null, cars: [] },
      video: null,
      title: 'Welcome',
      titleTag: 'h1',
      text: 'Intro text...',
      buttonText: 'Explore',
      buttonLink: { label: 'Explore', isAbsolute: false, url: '/explore', query: [] },
      style: null,
      theme: null
    }
  ]
};