• Use Cases: The component is a card-based interface element that presents an image and title by default and, upon user hover, smoothly expands to reveal additional descriptive content.
• Dependencies
  • None required. The Illustration Card is fully self-contained and does not rely on child items or external data sources.

• Hovered and Unhovered Images: Images that will be displayed depending on the state of the card (hovered or unhovered) being the focal point of the container (required)
• Background Color: Defines the background color of the card.

Creating a Hover Card

1. In Content Editor, create a "HoverCardFolder" under the "_datasources" of your page
2. Create a new Hover Card item from the HoverCard template.
3. Fill in the required fields
   • Title
   • Hovered Image
   • Unhovered Image
   • Background Color
   • ⚠ Important: The colors for the background are located in the following folder: /sitecore/content/AWTSites/GlobalRepository/Shared/Global/Component Settings/Hover Card Settings Folder/Color Folder. If a color does not exist (or the language version is not added), please add it to this path.
4. Fill in optional fields: Description, Subtitle
5. In Experience Editor, insert the Hover Card rendering into the awt-container (or any component which can be placed inside the awt-container) or awt-cards-container placeholder.
• The awt-cards-container is only used if 5 card components are needed (awt-container only allows having 4 components in a single row)
6. Associate the Hover Card item as the data source.

• None : There are no variants for this component.

• There are currently no known issues with this component