Double Image Callout Component

← Return to the Drupal User Guide

The Double Image Callout is a full-width component used to display a pair of clickable images with overlaid text. This component is ideal for drawing visitors' attention and directing them to important content on your website.

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

Figure: The Double Image Callout component fields.

Examples

Interactive Example

The preview below shows the Double Image Callout component using its default configuration.

To experiment with different layouts and other settings, open the interactive component playground.

Open Component Playground

Step-by-step Instructions

1. Provide a Title for the Double Image Callout.
2. This component is designed to display two callout items side by side. Repeat the following steps for each callout item:
   1. Enter a Callout Title.
   2. Add an Image (landscape orientation is recommended).
      1. If using an existing image already in the system:
         1. Click the Insert an Image button to launch the image browser.
         2. Navigate to the image under Select Image, select it using the radio button, and click Select Image.
      2. If using a new image:
         1. Click the Insert an Image button to launch the image browser.
         2. Click Upload Image, then click Browse… to locate the image on your computer. Finally, click Select Image.
   3. Optionally, add a short Label to provide additional context. Example: Sustainability for a callout about composting on campus.
   4. Optionally, add an Abstract that will appear at the bottom of the image.
   5. Optionally, add a Call to Action Link to direct visitors to another page on your site.