Box over image Box over image icon

Act3 Box over image preview

Use case:
Text box overlapping your image in various places. Great to highlight a benefit, feature or important piece of information with a large image and a few words. Alternate multiple modules with opposite image position for greater visual impact and a sense of discovery while the user is scrolling.
Page speed impact:
Low with lazy-loading enabled and not above-the-fold, unless you add heavy resources (large images without lazy loading, videos, call-to-action, etc) in the module's rich-text field.
May be medium in the above-the-fold section on mobile. It depends a lot on the size and level of optimization of your image.
Use TinyPNG to optimize your image as best as possible without losing in quality, or consider using a vector image (SVG) whenever possible, which is usually very little in size compared to a JPG or PNG file.
Available in pages:
Yes
Reserved block class:
box-over-image
Resources:
css/components/box-over-image.css

We're working on completing this documentation page. It will be available shortly. Stay tuned!

Meanwhile feel free to drop us a line if you have a question. Please also consult our Support policy.

Coming soon