Skip navigation links
Digital Experience Studio > Website Technology > Sitecore CMS > XMC Component Guide >

Aside

The Aside component allows users to showcase a small image (i.e., a thumbnail) with rich text in a narrow right column of a two-column component. 

provost-meet-the-provost-aside
Figure 1: Example of an Aside component, shown on the right side of text content.

 

Component Information 

Benefits

  • This allows for displaying additional content to the side of a main content area. 
  • A rich text area can be added below the photo. This area can include related links. 

Example Use Cases

  • This component is commonly used to highlight a staff profile photo, such as on a profile or biography page.

Frequently Asked Questions

No, an Aside component can only be used on pages using a Two Thirds Page layout component. It must be placed in the right side (narrow) column.

Yes, additional content, such as links, can be added in the rich text portion of the component. See instructions below.

Instructions for Use

In Pages:

  1. Open a Two Thirds Page from the Content Tree, create a new Two Thirds Page, or add a Two Thirds Sublayout to a Page. 
  2. Click “+” button in the right-side column Placeholder box. 
  3. Select Aside component from the list.

Alternate method: 

  1. Open a Two Thirds Page from the Content Tree or create a new Two Thirds Page, or add a Two Thirds Sublayout to a Page. 
  2. Click Components tab at top of Content Tree.  
  3. Locate Aside component.  
  4. Drag the Aside component to placeholder in the right-side column.
  1. Click on the thumbnail placeholder image. 
  2. Click on the Add button to select the image in Media Library or to upload a new image.
Note: Alt text can be added to the image when adding it to Media Library or Content Hub. Images pulled directly from Media Library or Content Hub will have this alt text applied.
  1. Click on the Caption area just below the Thumbnail. The placeholder text reads “No text in field.” 
  2. Enter the desired text. 
  3. Text formatting tools are available in the Element Options area.
  • Advanced Styling options are available by selecting the Aside component. 
    • Hint: An easy way to select it is to click just below the caption. 
  • Options include: 
    • Enlarge Thumbnail 
    • Show Green Line — This adds a small green line between the photo and caption.
  1. Click the Aside to display the toolbar. 

  2. Click the Explorer icon. 

    Aside-explorer-menu
    Figure 2: The Explorer icon in the Aside toolbar.
  3. In the left pane, locate and click Aside. 
  4. Locate and click the content fields to change. Make changes in the right pane. 
  5. Return to Pages by closing the Explorer browser tab.  
  6. Refresh the screen in Pages. 
  7. Preview and publish the page. 
  1. Open Content Editor.
  2. In Pages, click the 9-dot cube icon in the upper left. 
  3. Select environment. 
  4. If the Aside does not appear in the Content Tree, close the page’s Data node and expand it again to refresh the Content Tree. 
  5. In the Content Tree, expand Content > MSU > sitename > Home > page name > Data or wherever the component was added. 
  6. Locate and expand the Aside component. 
  7. Use the file location tool to select an image. 
  8. Add text to the necessary fields.  
  9. Click Save. 
  10. Return to Pages. 
  11. Preview and publish the page. 
A screenshot of an Aside component with the CTA button used to request an appointment with the faculty member.
Figure 2: In this example of an Aside, a profile photo is used with a call to action, or CTA, button allowing website visitors to request a meeting with the individual.

 

A screenshot of an Aside component showing a faculty member. The Aside CTA button links to a biography.
Figure 3: In this example of an Aside, a profile photo is used with a call to action, or CTA, button linking to a webpage with the individual's biography.

Tool Use Guide

 

 PagesExplorerContent Editor
Add componentOptimal  
Add thumbnail imageOptimal  
Add alt text to thumbnail image*  Possible
Add captionOptimalPossiblePossible

*Alt text can also be added directly to the image in Media Library or Content Hub.

 

Documentation updated: July 11, 2024

XMC Component Guide