Triple Image Callout Component

The Triple Image Callout component is a full-width collection of images and short supporting text beneath each entry.

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

Diagram demonstrating elements of the Triple Image Callout component

Examples

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 give further context to the Triple Image Callout.

  3. To create each of Items (Columns) that make up a Multi-Column Callout:

    1. 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.

    2. Provide a Title (this will appear as black text).

    3. Provide a Subtitle (this will appear above the title as red text).

    4. Optionally, provide a Call to Action Link that's related to this specific Item (Column) in order to drive traffic to some part of your site.

    5. Optionally, check the Open URL in a New Window.

  4. Optionally, provide a Call to Action Link that relates to the entire Triple Image Callout in order to drive traffic to some part of your site.

Ways you can contact ITS or find information:

ITS Support Portal: https://support.swarthmore.edu
Email: support@swarthmore.edu
Phone: x4357 (HELP) or 610-328-8513
Check out our remote resources at https://swatkb.atlassian.net/wiki/spaces/remote/overview
Check our homepage at https://swarthmore.edu/its