Full Width Callout Component

← Return to the Drupal User Guide

The Full Width Callout component inserts an image that spans the full width of the page with an overlaid abstract and optional call-to-action link. As visitors scroll, the content animates into view with a subtle transition effect.

Elements

1. Title (required, not displayed)
2. Image (required)
3. Abstract
4. Call to Action Link

Figure: The Full Width Callout component fields.

Examples

Interactive Example

The preview below shows the Full Width 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 component. Note: This is used for internal purposes only and is not displayed to visitors.
2. Add the Image. Landscape orientation is recommended. Since the image spans the full width of the browser window, use a high-quality image to ensure it looks good on larger displays. If the image appears grainy or pixelated after previewing the component, try uploading a higher resolution version.
   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. Add an Abstract that will appear over the image.
4. Optionally, add a Call to Action Link that will appear beneath the abstract.