Video Column Variant

• The component resides inside the EH Media tab in the Toolbox by the name Video and Image Promo.
• The component has 5 Variants, the one displayed on this page is - the Video Column Variant.
• In this variant, the component has two sections: The Image section and the Promo section.
• Applicable fields for this variant:
  • PromoContent: RTE field to add description/body.
  • Link: link field to add clickable Title, the text of the link will be displayed as title.
  • PromoImage: field to add Image.
• In this variant, the image and promo section are horizontally placed.
• An example of this variant is shown HERE where three components are placed in a row.
• CAs should note that whenever this component is added, it takes the entire width of the container. To make it look like a column card, CAs should apply the appropriate grid settings.
• The image in this variant expands on hover and is clickable - the link added to the Link field will be added to the image. 

1. Click "Add Component" and select "Add Here" where you would like to place the component

2. Select Rendering - "EH Video and Image Promo" under EH Media

3. Create a data source. 

4.Ensure "Design" view is enabled in "View" tab. Click on component and select the "Video Image Promo Video Column Variant" 

5. Update grid settings by clicking the paint bucket and editing the grid settings in the window. 

6. You will be able to manage images, links and promo content. To select an image, click the placeholder and the add image icon 

7. To manage the link field, select the link and click the link with a pencil icon. There will be options to manage the following: 

• Link Description
• URL
• Target Window
• Style
• Alternate Text

8. Content is an RTE paragraph. To edit, click the placeholder text. You will be able to manage content within this window or click the pencil icon to open up the rich text editor. 

9. Make sure to save and publish changes. 

Video Column Variant:

• The Content Author should be able to edit the following on the Video Column Variant:
  • Image with overlay
  • Video (Not used for this variant)
  • Title (Link)
  • RTE (Covers minutes and body)
  • link (Play icon SVG)
• When the user presses play or title they will be directed to the detail page for that video.
• The styling will follow the Column Card offset with white background, and font.
  • On hover image will expand for visual effect and animation of carat.
  • Hover state on title to include carat animation and image expansion

Mobile:

• Content appears stacked with video on top, this will follow same as Column Card offset variant.