Banner basics

A banner is a typed content block rendered on a page. Every banner shares a small set of common properties, then extends them with type-specific props.

⚠️

When any changes to the banners schema is made, always make sure to update /schema/duplicate.ts accordingly too, so the duplication keeps working as expected.

Need a full implementation guide for new banner types? See Add a new banner.

Need to understand how AI/MCP tools create and update banner payloads? See MCP Banner Fields.

Need to connect an AI tool to the MCP backend? See MCP Authentication.

Common props

`DefaultBannerProps<T>`

Used by every banner type.

typename●

T extends BannerTypename

required

Discriminator for the banner type. Used for routing, CMS validation, and renderer selection.

title●

Maybe<string>

Optional title shown by many banner renderers.

titleTag●

'h1' | 'h2'

required

Semantic heading tag for the title.

titleAlign●

'left' | 'center' | 'right'

required

Title alignment used by the renderer.

`BannerCSS`

Optional CSS identifiers that can be attached to any banner.

cssId●

Maybe<string>

Optional DOM id for anchor navigation and testing.

cssClasses●

Maybe<string>

Optional extra classes applied to the banner wrapper.

Conventions

Every banner has an id: string (CMS identity) even if not displayed.
Complex props are usually shared utility objects:
- Images use ImageProps or SimpleImageProps
- Links use DynamicLink

Placeholders

When a banner references an image, documentation pages show a placeholder:

Overview Add a Banner