Quote Box

In Pages:

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 or into the component that will contain the Quote Box below the Breadcrumb links.

If this is new Quote Box content:

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

If using existing Quote Box Data (content):

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

The Quote Box and toolbar are displayed.

Adjust component preferences:

8. Click on the component to select it.
9. Expand the Advanced Styling menu on the right-side menu.
10. Select the preferred variant.
11. Adjust background color and image placement, if necessary.

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:

1. Click the Quote Box to display the toolbar.
2. Click the Explorer icon.

In Explorer:

3. In left pane, locate the Quote Box and click to select.

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. 

In Pages:

6. Refresh the screen in Pages.
7. Preview and publish the page.

1. Open Content Editor:
   1. In Pages, click 9-dot cube icon in upper left.
   2. Select environment.
   3. 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 Pages.
9. Preview and publish the page.

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

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

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

There is no image. The quote fills the space.