Usage

A two-image hero. The foreground image sits on top and crops to a portrait region of the visual cell; the background image fills the entire cell behind it. Use when you need a hero that's photographic rather than the gradient-blob look of Hero — Basic — typically for industry pages (construction, hospitality) where the imagery does the work.

Image layering

foreground_image uses object-fit: cover and is offset (112px -60px at desktop, 0 -60px at xl) to crop a usable portrait. Sits at z-index: 2.

background_image is absolutely positioned, fills the cell, same crop offsets. Sits at z-index: 0 behind the foreground.

When background_image is omitted, the foreground image switches to object-fit: contain centered — the same layout Hero — Basic uses. The block collapses to a Hero — Basic equivalent.

Variations

variant="shapeA" (default) vs "shapeB" — the decorative gradient blob behind everything. Same two shapes as Hero — Basic. Swampjs uses these in an A/B test (cms_hire_hero_shape); here it's an authoring choice.

background_color — section backdrop. Stories default to background.weaker; block default is background.

Color cascade

The gradient blob picks up --expressive-primary-stronger / strongest like every Hero — the active page theme flows through.