AAG News Column Variant

• The component resides inside the EH Media tab in the Toolbox by the name Video and Image Promo.
• The component has 3 Variants, the one displayed on this page is-  AAG News Column Variant.
• In this variant, the component has two sections: Video/Image section and the Promo section and they are vertically placed.
• Applicable fields for this variant:
  • PromoContent: RTE field to add description/body.
  • Title: single-line text field to add aheading.
  • Link: link field to add a link to the Title and Image.
  • PromoImage: field to add Image.
  • Youtube video ID: field to add YouTube Video ID.
  • Subtitle : single-line text field used to add date.
• In Experience Editor Edit mode, help texts have been added to aid the authoring of this component.
• An example of this variant is shown HERE where three components are placed one beside the other.
• 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.
• Video will always play in Modal
• To display/add a video(icon displayed on the image), CA must add the YouTube Video ID in the Youtube video ID field.
• When a link is added, the title will be clickable and have a carat at the end. 

1. Open up EE and click "Add component" icon 

2. Click "Add Here" and select the Video and Image promo rendering location under EH Media 

3. Create a data source

4. Once component is populated (Hint: Make sure to save), click the component and change the variant to News Column Variant

5. Authors will be able to add a YouTube ID if applicable. Authors will need to upload a thumbnail photo or select an image. 

6. Click the placeholder text to add title

7. Click link placeholder to manage links. Click the link icon with the pencil to manage link

8. If needed, authors can add a date or subtitle

9. Body content is managed by an RTE. Authors can manage from this view or click the placeholder text and select the pencil icon to open the RTE window. 

10. If needed, authors can update the grid layout settings to achieve the 4 column or 3 columns of cards. Hint: If an author wants to fit 4 columns on one row, the grid settings need to be set to 3.

11. Save and publish changes

News Column Variant:

• The CA should be able to edit the following:
  • Image
  • Video (Modal) see Video Image Promo
  • Single Line Text (Date)
  • Title Link
  • Body (RTE)
• The CA should be able to choose either a video or image (video trumps image)
• The CA should be able to choose grid settings to achieve the card layout.
• The CA will add Youtube ID.
• The Video will play in modal.
• For styling please see the live site.
• Upon hover carat and title changes color from AAG green to AAG orange and extends.  See Brand guidelines.
• Telephone numbers will be underlined.
• Carat is only added to title link.
• This component must follow accessibility standards.

Mobile:

• Content is stacked with image on top.