Triple Image Callout Component: Difference between revisions
Imported from Confluence |
|||
| Line 15: | Line 15: | ||
== Examples == | == Examples == | ||
{{StorybookComponent|id=components-triple-image-callout--triple-image-callout|height=650}} | |||
== Step-by-step Instructions == | == Step-by-step Instructions == | ||
Revision as of 13:48, 14 May 2026
The Triple Image Callout component is a full-width collection of images and short supporting text beneath each entry.
Elements
- Title (required, not displayed)
- Label
- Call to Action Link
- Triple Image Callout Item - Title
- Triple Image Callout Item - Image
- Triple Image Callout Item - Subtitle
- Triple Image Callout Item - Call to Action Link
Examples
Step-by-step Instructions
- Provide a Title for the Triple Image Callout. Note: This is used for internal purposes only and is not displayed to visitors.
- Optionally, add a short Label to give further context to the Triple Image Callout.
- To create each of Items (Columns) that make up a Multi-Column Callout:
- Add the Image (landscape orientation is optimal).
- If using an existing image already in the system:
- Click Insert an Image button to launch the browser pop-up window.
- Navigate to the image under Select Image, clicking on the radio button to the left of the thumbnail to select it.
- Press the Select Image button in the bottom left.
- If using a new image:
- 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 Upload Image and then the Browse… button to browse your local system for the file, select it, and click the Select Image button.
- If using an existing image already in the system:
- Provide a Title (this will appear as black text).
- Provide a Subtitle (this will appear above the title as red text).
- 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.
- Optionally, check the Open URL in a New Window.
- Add the Image (landscape orientation is optimal).
- 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.
