This module is designed to work specifically with the hero shaped images and requires more careful image preparation than other modules.
Only use hero shaped images with this module. Using other sizes could cause gaps in the layout.
Build in a safe zone up to 50% of the width of the image for the box to sit over. This is important to avoid placing the box over faces or important graphical elements. The safe zone can be on the left or right side depending on the box placement.
Images will be cropped vertically, especially at widescreen. On widescreen, we constrain the image height so there can be vertical cropping up to 30-40% of the height. Be sure to set the focal point to keep the most important parts of the image from being cropped off on some devices.
Make sure the image composition looks good on small screens when you see the full image. Once the box stacks below the image, we scale the whole image propotionally (no cropping) so make sure there is enough texture and visual interest in the safe zone. If needed, you can create a unique crop for the _sml sized image to art direct this breakpoint.
If a caption or badge is added, check they don't overlap important parts of the image across all screen sizes. Use the placement options to refine the placement of each and use the option to hide them on phone-sized screens if they won't fit at that breakpoint.
More sample images
More sample images