Double Image Callout Component

The Double Image Callout is a full-width component type used to display a set of two clickable images with overlaid text. This component type is great for grabbing users' attention and driving traffic to a particular part of your site.

Elements

1. Title (required)
2. Double Image Callout Item - Callout Title
3. Double Image Callout Item - Image
4. Double Image Callout Item - Label
5. Double Image Callout Item - Abstract
6. Double Image Callout Item - Call to Action Link

Examples

Double Image Callout Component

Ideal Needs work

• Title isn't overly long
• Abstract is no longer than a single sentence

• Title is too long and overlaps the abstract
• Abstract is too long, especially for smaller screens

Step-by-step Instructions

1. Provide a Title for the Callout on Image.
2. This component type is designed to support two images side-by-side (see above). To add the callouts items (repeat below twice for left and right items):
   1. Enter Callout Title to provide a title to your callout item.
   2. Add the Image (landscape orientation is optimal).
      1. If using an existing image already in the system:
         1. Click Insert an Image button to launch the browser pop-up window.
         2. Navigate to the image under Select Image, clicking on the radio button to the left of the thumbnail to select it.
         3. Press the Select Image button in the bottom left.
      2. If using a new image:
         1. If you’re adding a new image to the system, click the Insert an Image button to launch the browser pop-up window button.
         2. Click Upload Image and then the Browse… button to browse your local system for the file, select it, and click the Select Image button.
   3. Optionally, add a short Label to give further context to the callout. Example: “Sustainability” for a callout about composting on campus.
   4. Optionally, add an Abstract that will appear at the bottom of the image (see example above).
   5. Optionally, add a Call to Action Link that will drive traffic to some part of your site.