Full Width Callout Component: Difference between revisions

Latest revision as of 13:22, 10 July 2026

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

Title (required, not displayed)
Image (required)
Abstract
Call to Action Link

Diagram showing the fields that make up the Full Width Callout component.

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

Provide a Title for the component. Note: This is used for internal purposes only and is not displayed to visitors.
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.
Add an Abstract that will appear over the image.
Optionally, add a Call to Action Link that will appear beneath the abstract.

@@ Line 1: / Line 1: @@
-The Full Width Callout component inserts an image that occupies the entire width of your page overlaid with a short abstract and optional call to action link, both of which will scroll into view with a special transition effect.
+{{DrupalBack}}
+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 ==
-# Title (''required, not displayed)''
+# Title (''required, not displayed'')
 # Image (''required'')
 # Abstract
 # Call to Action Link
-[[File:Screenshot 2024-06-14 at 2.42.32 PM.png|800px|alt=Diagram depicting elements of the Full Width Callout component]]
+{{Screenshot|Screenshot 2024-06-14 at 2.42.32 PM.png|800px|Diagram showing the fields that make up the Full Width Callout component.|The Full Width Callout component fields.}}
 == Examples ==
-{{StorybookComponent|id=swarthmore-theme-components-full-width-callout-|height=650}}
+{{Callout|type=tip|title=Interactive Example|content=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.
+'''[https://toolkit.swarthmore.edu/?path=/story/swarthmore-theme-components-full-width-callout Open Component Playground]'''}}
+{{StorybookComponent|id=swarthmore-theme-components-full-width-callout|height=650}}
 == Step-by-step Instructions ==
-# Provide a '''''Title '''''for the component. ''Note: This is used for internal purposes only and is not displayed to visitors.''
+# Provide a '''Title''' for the component. ''Note: This is used for internal purposes only and is not displayed to visitors.''
-# Add the '''''Image. '''''Landscape orientation is optimal. Additionally, since the image is going to be stretched across the entire width of the screen, make sure the image quality is sufficient enough to look good on larger screens. If after previewing your component you notice that your image looks grainy or pixelated, try uploading a higher quality version.
+# 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.
 ## <u>If using an existing image already in the system</u>:
-### Click '''''Insert an Image '''''button to launch the browser pop-up window.
+### Click the '''Insert an Image''' button to launch the image browser.
-### Navigate to the image under '''''Select Image''''', clicking on the radio button to the left of the thumbnail to select it.
+### Navigate to the image under '''Select Image''', select it using the radio button, and click '''Select Image'''.
-### Press the '''''Select Image''''' button in the bottom left.
 ## <u>If using a new image</u>:
-### If you’re adding a new image to the system, click the '''''Insert an Image '''''button to launch the browser pop-up window button.
+### Click the '''Insert an Image''' button to launch the image browser.
-### Click '''''Upload Image '''''and then the '''''Browse…''''' button to browse your local system for the file, select it, and click the '''''Select Image '''''button.
+### Click '''Upload Image''', then click '''Browse…''' to locate the image on your computer. Finally, click '''Select Image'''.
-# Add an '''''Abstract '''''that will serve as the primary text appearing over the full width image.
+# Add an '''Abstract''' that will appear over the image.
-# ''Optionally, ''add a '''''Call to Action Link '''''that will appear beneath your '''''Abstract'''.''
+# Optionally, add a '''Call to Action Link''' that will appear beneath the abstract.
 [[Category:Drupal]]
-<!-- Imported from Confluence page id=20513094 (https://swatkb.atlassian.net/wiki/spaces/DRUP/pages/20513094/Full+Width+Callout+Component) -->