Split Hero With a Glass Panel

Text on the right, image on the left, container-width media.

Hero layout showcase

This page overrides the hero block for this page only.

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

  • hero.mediaPosition = 'split' — image and text sit side by side instead of the text overlaying the image.
  • hero.splitSide = 'left' — the image sits on the left and the text sits on the right.
  • hero.useGlass = true — the text sits on a frosted-glass panel.
  • hero.mediaWidth = 'container' — the hero frame is constrained to the content container rather than full-bleed.
  • hero.textAlign = 'left' — the text block is left-aligned within its column.
  • hero.media.type = 'image' — the media is delegated through the existing image renderer rather than rendered directly by the hero component.

Still to review: glass panel contrast against a light background image, and split layout behaviour at narrow tablet widths.