Triple Image Callout Component

← Return to the Drupal User Guide

The Triple Image Callout component is a full-width collection of images with supporting text displayed beneath each item.

Elements

1. Title (required, not displayed)
2. Label
3. Call to Action Link
4. Triple Image Callout Item - Title
5. Triple Image Callout Item - Image
6. Triple Image Callout Item - Subtitle
7. Triple Image Callout Item - Call to Action Link

Figure: The Triple Image Callout component fields.

Examples

Interactive Example

The preview below shows the Triple 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 Triple Image Callout. Note: This is used for internal purposes only and is not displayed to visitors.
2. Optionally, add a short Label to provide additional context for the Triple Image Callout.
3. To create each of the Items (Columns) that make up the Triple Image Callout:
   1. 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.
   2. Provide a Title (displayed as black text).
   3. Provide a Subtitle (displayed above the title as red text).
   4. Optionally, provide a Call to Action Link related to this specific Item (Column).
   5. Optionally, enable Open URL in a New Window.
4. Optionally, provide a Call to Action Link related to the entire Triple Image Callout.