imitationnew

BackdropSection

A section with art behind it and light text on top.

Project heroRounded panel with a start-side scrim

Harbour rebrand

Identity, site and launch kit for the harbour trust.

In context

Launch pageA strong-scrim band between two plain sections

Launch is 24 Oct. Here is where it stands.

84% done

Identity and site are in review; the launch kit ships next week.

Owner: Maya Chen.

Props

Prop	Type	Required	Default
`image`	`{ src: string; alt?: string \| undefined; }`	Yes	—
`scrim`	`"strong" \| "none" \| "soft" \| "start" \| "custom" \| undefined`	No	soft
`rounded`	`boolean \| undefined`	No	false
`inset`	`boolean \| undefined`	No	true

Scrims

soft darkens lightly top to bottom, strong more, start is darker on the text side, none leaves the art alone. Set the colour with --rebar-backdrop-scrim-color; rounded gives an inset panel (--rebar-backdrop-section-radius). Use art at least as wide as the section.

Accessibility

The image is decorative by default (alt="", aria-hidden); pass image.alt only if it carries information. Check text contrast against the darkest scrim you can afford, not the average pixel.

data-rebar-* attributes

data-rebar-component="backdrop-section", data-rebar-scrim and data-rebar-rounded on the root; data-rebar-part values image, scrim and content.

Migrating to Ant Design

Not codemod-covered. Ant Design has no equivalent; this is a bespoke section.

inset

inset={false} drops the section's own side margin (when rounded) and padding, so an app can lay it out full-bleed and pad it itself. Default true keeps the current spacing.

<BackdropSection image={{ src }} inset={false}>...</BackdropSection>