The Wide Flexbox allows a wide image to be displayed outside of the normal margins of the page. The image is treated like the Hero Banner component in that it stretches and adjusts to the page width as a background image.
Component Information
Benefits
- The Wide Flexbox can be used in standard Pages and Story Pages.
- The component is helpful for adding interest to a page, adding flexibility to design.
- The component can be used to break up large amounts of text.
Live Example
Component Options and Limitations
- Given the file size of these images, it is recommended to avoid using many of these components on the same page. Using several large image files can impact page load length and negatively impact visitor experience.
- Using the Wide Flexbox component requires using Page Builder and Content Editor.
Guidelines
- Be sure to use large images that do not have to be scaled up to the image size to avoid a pixelated appearance.
Accessibility Considerations
- It is a best practice to not use images of text in place of typed text on a page.
- The component size will adjust to fill the page width when viewed in different browser window sizes and devices.
Background Image (image)
- Use the image chooser inside of Content Editor to select a photo.
Advanced Styling – In Page Builder
Height
- Manually limit the pixel height of the image
