Skip navigation links
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 Pages:

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

  • 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 Pages:

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

 

 PagesExplorerContent Editor
Add componentOptimal  
Assign data sourceOptimal  
Edit contentOptimalPossiblePossible

 

 

Documentation updated: Nov. 5, 2024

XMC Component Guide