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
Similar Components
Instructions for Use
In Page Builder:
- Select the page in the content tree.
- Click the “+” button in any Placeholder box below the Breadcrumb links.
- Select Wide Flexbox component from list.
Alternate method:
- Click Components tab at top of content tree.
- Locate Wide Flexbox component.
- Drag the Wide Flexbox component to any empty placeholder area of the page below the Breadcrumb links.
Tool Use Guide
*Alt text image should already be added to images in Media Library or Content Hub.
Documentation updated: June 12, 2026
Is there an issue with this documentation? Report it here.