Callout

On this page:

• Callout example
• What is an Callout? 
• How to add an Callout
• Style options 

Callout example

What is an Callout?

The Callout component allows you to place images and text either on alternating sides of the page or vertically.

How to add an Callout

1. Click the edit link at the top of the page

   
2. Move your cursor where you want to place the component. (Add a section if needed). 

3. Click the plus icon.

   

4. Select Callout from the menu

   

Content 

1. Click Add media. Select the appropriate image or upload the image to the Image Library. Recommended Image Dimensions: 3:2 - Maximum image size is 4MB.

   

2. Add a Title.

   

3. Add Teaser text.

   

4. Add an internal page or external link.
   Note: This is optional. 

   

5. Add the Button text.
   Note: This is optional.

   

   
    

Styles

1. Toggle to the Styles tab. 

   

2. Select the appropriate Layout Option based on your desired layout.  (see below for examples).

   
3. Select the amount of additional space you would like above the component. 

4. Select the amount of additional space you would like below the component. 
   Note: By default, there is no space below a component.

   

Save

1. Click Save.

2. Scroll to the top of the page and click Save.

   

3. Click the Done button beside the save button.
   Note: This will display the page in the closest representation of how site visitors will view it. All links and actions that are disabled in editing mode will be functional now.
    

   

Style options 

Example of a Standard Callout Component

1. Layout Options settings used to create this component are: Callout style: Normal,  Orientation: Stacked and Direction: Normal

2. Layout Options settings used to create this component are: Callout style: Normal,  Orientation: Horizontal and Direction: Normal

Example of a Quote Callout Component

1. Layout Options settings used to create this component are: Callout style: Quote,  Orientation: Stacked and Direction: Normal

2. Layout Options settings used to create this component are: Callout style: Quote,  Orientation: Horizontal and Direction: Normal

Example of Direction Normal Vs Reverse