Skip navigation links
Digital Experience Studio > Website Technology > Sitecore CMS > XMC 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 Pages:

  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.”

In Pages:  

  1. Click the Wide Flexbox component to select it.
  2. Click the square with arrow icon to open the component in Explorer.
Screenshot of the Wide Flexbox toolbar
Figure 2: The icon to open the component in Explorer is marked with a red box.


In Explorer:

  1. Click Upload to upload an image. Click Browse media library to select an image from the media library.
  2. Add Alt text, if missing. 
  3. Return to Pages.

In Pages:

  1. Refresh the page canvas to view changes.
  2. Preview the page.
  3. Publish the page.

In Pages:  

  1. Click the nine-dot cube icon at the upper left.  
  2. Select the environment.  
  3. Select Content Editor. 

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 Pages.  

In Pages:

  1. Refresh the page canvas to see changes. 
  2. Preview the page. 
  3. Publish the page. 

Tool Use Guide

 

 PagesExplorerContent Editor
Add component to pageOptimal  
Add/edit image in componentOptimalPossiblePossible
Add alt text to image* PossiblePossible

*Alt text image should already be added to images in Media Library or Content Hub.

 

Documentation updated: April 29, 2024

XMC Component Guide