Digital Experience Studio > Website Technology > Sitecore CMS > Sitecore Component Guide >

Wide Flexbox

Wide Flexbox

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.

A screenshot of a wide flexbox on a page. The image shows two students studying in a classroom.
Figure 1: Example of a Wide Flexbox component used between two paragraphs of story text. 

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

Instructions for Use

In Page Builder:

  1. Select the page in the content tree.
  2. Click the “+” button in any Placeholder box below the Breadcrumb links.
  3. Select Wide Flexbox component from list.

Alternate method:

  1. Click Components tab at top of content tree.
  2. Locate Wide Flexbox component.
  3. Drag the Wide Flexbox component to any empty placeholder area of the page below the Breadcrumb links. 
  1. Click the “Add” button.
  2. Locate the desired image and click it to select.
  3. Click “Add Selected.”
  4. Add alt text to the Image alt text field to meet accessibility standards. Alt text can also be added in Media Library.

In Page Builder:

  1. Click the dropdown arrow to the right of the SitecoreAI icon in upper left.
  2. Select Content Editor. It opens in a new browser tab.

In Content Editor: 

  1. Locate the Wide Flexbox component previously created in the content tree.
  2. Use the Background Image field to select an image from Media Library or upload a new image.
  3. Return to Page Builder.  

In Page Builder:

  1. Refresh the page canvas to see changes.
  2. Preview the page.
  3. Click Actions and Submit to send the changes to the publishing workflow.

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.