• 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 -  CTA Hero.
• Applicable fields for this variant:
  • Title: field to add title, displayed above the eyebrow.
  • Link: link field to add CTA link.
  • PromoImage: field to add Image.
• In this variant, the CTA Link and Title is displayed above the image.
• An example of this variant is shown HERE.
• CAs should note that whenever this component is added, it takes the entire width of the container.
• By default, the title text will be light. The CA can choose a dark text option from Paint Bucket Settings the Dark text option is available in the EH Hero Banner - Emory(Local).

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 "CTA Hero" 

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

6. 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. 

CTA Hero:

• The CTA Hero will be used predominantly on the home page.
• The CA should be able to edit the following:
  • Title (H1)
  • Image
  • Video (will not use video for now)
  • Eyebrow
  • CTA link (pages, files and external URLS)
• For styling please see: Designs
• The CA should be able to select between light and dark font
  •  Light = White (default)
  • Dark = Blue (#143B83)
• Note the sizing of the container is larger than the base hero.
• The client provides the gradient image.
• This component must follow accessibility standards for alt text, and keyboard navigation.

Mobile:

• Content is stacked.