Foreground Media Hero

Foreground positioning places the content before the media while keeping the renderer independent.

Hero media position showcase

This page demonstrates the foreground media state and the no-media fallback pattern.

What's configured here (see config/page_level/showcase-hero-positions.config.php):

  • hero.mediaPosition = 'foreground' — the media sits in front of the text block, while the content retains its own layout structure.
  • hero.mediaWidth = 'container' — the frame remains constrained to the content width.
  • hero.textAlign = 'left' — the text block uses a left-aligned reading flow.
  • hero.media.type = 'image' and hero.media.overlay = false — the delegated image is displayed without a dark scrim in this example.
  • hero.mediaPosition = 'none' — changing this value in the page config suppresses the media slot entirely for the no-media fallback state without altering the component structure.

Still to review: how the foreground treatment reads when paired with denser layouts, and whether the text-only fallback should keep a subtle panel or full-bleed block treatment.