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

Quote Box

Quote Box

Display a quotation as a standalone component within a page. Image and author are optional. Quote Box can be styled with several preset style options (image alignment, background color, etc.)

Screenshot of example quote with Sparty and placeholder text.
Figure 1: The Quote Box component. The image can be placed on the left or right.

Component Information

Benefits

  • The Quote Box component consists of a quotation, with or without an image, and with display options that can be selected by the content author.
  • The Quote Box component can be used in Page and Story Page layouts. It cannot be used in Two-Thirds Page layouts.
  • The component can be used in any website.

Live Examples

Instructions for Use

In Page Builder:

  1. Select the page in the Content Tree.
  2. Click the “+” button in any Placeholder box below the Breadcrumb links.
  3. Select Quote Box component from list.

Alternate method:

  1. Click Components tab at top of the Content Tree.
  2. Locate Quote Box component.
  3. Drag the Quote Box component to any empty placeholder area of the page below the Breadcrumb links.

If this is new Quote Box content:

  1. In the “Assign content item” dialog box, hover over Data until a “+” appears to the right.
  2. Click “+” and select Quote Box.
  3. Give component a unique name and click off the name area.
  4. Click Assign.

If using existing Quote Box Data (content):

  1. Select the proper Quote Box component from the list.
  2. Click Assign and skip to step 8, below.

The Quote Box and toolbar are displayed.

Adjust component preferences:

  1. Click on the component to select it.
  2. Expand the Advanced Styling menu on the right-side menu.
  3. Select the preferred variant.
  4. Adjust background color and image placement, if necessary.
Note: If adding a Quote Box within another component, such as an Accordion, follow the instructions for adding the containing component first. 
  1. Click on the thumbnail placeholder image.
  2. Click on the Add button to select the image in Media Library, Content Hub or to upload an image.
  3. In Advanced Styling, you have the option to choose which side the image appears using the Image on Right checkbox.
  1. Click on the Quote area at the top of the text column of the Quote Box.
  2. Enter text.
  3. Click on the Author area at the bottom of the text column of the Quote Box next to the hyphen symbol.
  4. Enter text.

In Pages Builder:

  1. Click the Quote Box to display the toolbar.
  2. Click the Explorer icon.
Screenshot of the Quote Box component toolbar
Figure 2: The Explorer icon in the Quote Box toolbar.

In Explorer:

  1. In left pane, locate the Quote Box and click to select.
Screenshot of a quote box selected in the Explorer panel
Figure 3: In this example, the second panel of Accordion 1 has been selected for editing.
  1. Locate and click the content fields to change. Make changes in the right pane.
  2. Return to Page Builder by closing the Explorer browser tab. 

In Page Builder:

  1. Refresh the canvas in Page Builder.
  2. Preview and publish the page.
  1. Open Content Editor:
    1. In Page Builder, 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.
  2. If the Quote Box does not appear in the Content Tree, close the page’s Data node and expand it again to refresh the Content Tree.
  3. In the Content Tree, expand Content > MSU > sitename > Home > page name > Data or wherever the component was added.
  4. Locate and expand the Quote Box component.
  5. Use the file location tool to select an image.
  6. Add text to the Quote and Author fields (optional). 
  7. Click Save.
  8. Return to Page Builder.
  9. Preview and publish the page.

Variant Examples

The image and quote each take up half of the space of the Quote Box.

Screenshot of example quote with a green background and white quote reading "Example #1 Never put off till tomorrow what you can do the day after tomorrow. - Mark Twain" with a photo of Sparty on the left
Figure 4: The Quote Box component with all fields present, dark green background and image on left.

 

Screenshot of example quote with a green background and white quote reading "Example #1 Never put off till tomorrow what you can do the day after tomorrow. - Mark Twain" with a photo of Sparty on the right
Figure 5: The Quote Box component with all fields present, dark green background and image on right.

 

Screenshot of example quote with a white background and white quote with placeholder text and a photo of Sparty on the right
Figure 6: The Quote Box component with extra long text, no author, white background and image on right.

The image portion takes up half of the default image space.

Screenshot of example quote with a green background and white quote reading "This is a quote box Quote filed. - This is the quotation Author field" with a photo of the John Hannah statue on the left
Figure 7: The Quote Box component with all fields present, dark green background and image on left.

 

Screenshot of a quote box with a white background, green placeholder text and a photo of Sparty on the right
Figure 8: The Quote Box component with extra long quote text, no author, white background and image on right.

 

The quote portion takes up half of the default text space.

A wide, short photo of Beaumont Tower on the left. "This is a quote box Quote field. - This is the quotaton Author field" in white text on a green background on the right.
Figure 9: The Quote Box component with all fields present, dark green background and image on left.

There is no image. The quote fills the space.

Screenshot of example quote with a green background and white placeholder text.
Figure 10: The Quote Box component with all fields present, dark green background and no image. 

 

Screenshot of example quote with a white background and a lot of green placeholder text.
Figure 11: The Quote Box component with an extra long quote, an author, no image and a light grey background.

Image Specifications

Sketch Link: Quote Box

 

Image in Quotes

  • Desktop – Width: 586px | Height: 263px
  • Mobile – Width: 305px | Height: 263px
  • Recommended size – Width: 600px | Height: 300px

Tool Use Guide

 Page BuilderExplorerContent Editor
Add componentOptimal--
Add imageOptimalPossiblePossible
Add quote textOptimalPossiblePossible
Add author textOptimalPossiblePossible

 

Documentation updated: September 23, 2025

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