Digital Experience Studio > Website Technology > Sitecore CMS > Sitecore 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 WYSIWYG toolbar to format the text, as needed.
  • Alternative: Click on the component to select it, then click the Content tab in the right side panel. Click to expand the Info Panel section. Click the pencil icon to edit the text. 

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 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. Click Actions and Submit to send the page to the publishing workflow.
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

Documentation updated: June 4, 2026

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