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

Info Panel

Info Panel

The Info Panel displays a message in a full-width box within a main body content area. The message includes a call to action, or CTA, link to take users to another page.

info-panel-example
Figure 1: Example of an Info Panel component used on MSUToday. The Info Panel is the light green band below the gray Text CTA component. It directs users to visit the archives page of the MSUToday Weekly Update email.

Component Information

Benefits

  • The Info Panel draws attention to a short announcement message in a light green box with an exclamation point icon.
  • The Info Panel is a full-width component used in the main content area of a page so it complements the grid design of webpages.

Example Use Cases

  • Call attention to upcoming deadlines, such as applications for admission or scholarships.
  • Provide notification of nonemergency announcements with a link to a page for more information.

Instructions for Use

In Page Builder:

  1. Select the page in the content tree.
  2. Click “+” button in any Placeholder box in the main content area below the Breadcrumb links or the “+” button in the special Info Panel placeholder box above the Breadcrumb.
  3. Select Info Panel component from list.

Alternate method:

  1. Click Components tab at top of content tree.
  2. Locate Info Panel component.
  3. Drag the Info Panel component to any empty placeholder area of the page in the main content area below the Breadcrumb links or the empty Info Panel placeholder.

If creating a new Info Panel:

  1. Click on + create new.
  2. Select Info Panel.
  3. Type in the component label, hit enter/return, and click Assign.

If selecting an existing Info Panel:

  1. Locate the appropriate Info Panel in the Page’s Data folder.
  2. Click the panel to select it.
  3. Click on Assign.

In Page Builder:

  • Select the Info Panel Content field and type in the desired message.
  • Use the Content > Element Options pane to adjust text styles and add a link.

In Page Builder:

  1. Click the Info Panel component to display the toolbar.
  2. Click Box with arrow icon to go to Explorer. Explorer will open in a new browser tab.

In Explorer:

  1. Select the Info Panel component to add content.
  2. Edit content and formatting, as needed.
  3. Return to Pages.
  4. Refresh the screen to see changes.

In Page Builder:

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

In Content Editor:

  1. Locate the Info Panel component in the content tree.
  2. Make necessary changes in each field.
Note: An existing Info Panel can be duplicated in Content Editor and then changed as needed.
  1. Return to Page Builder.
  2. Refresh the screen to see changes.
  3. Preview the page.
  4. Publish the page.
info-panel-dpps-example
Figure 2: The Info Panel on the Department of Police and Public Safety website, positioned below the Hero Banner in the special Info Panel placeholder.

 

info-panel-options-example
Figures 3 and 4: Different rich text can be added to the Info Panel component, as shown in these two examples.

Tool Use Guide

 Page BuilderExplorerContent Editor
Add componentOptimal--
Assign data sourceOptimal--
Edit contentOptimalPossiblePossible

 

 

Documentation updated: July 23, 2025

Is there an issue with this documentation? Report it here.