• Component resides inside the EH Page Content tab in the Toolbox by the name EH Hero Banner.
• Hero has two variants: current one, displayed below, is the Default variant.
• Applicable fields for this variant are: 
  • BackgroundImage : field to select the image of the hero banner.
  • Title: field to add title, displayed on the hero banner in H1 heading option.
• There's an option to add Background Color from the Paint Bucket Settings. The available background colors are listed in the Background color - Emory(local) section.
• An example of Default variant with no image is shown HERE
• Background Color will not be applied if there's a background image selected.
• This component needs to be added directly under Section Container component, with Extra Large option checked.

If you're page doesn't have a hero, below is how to add, edit & manage your hero banner. 

1. Click the 'Add Component' button located on the top left corner of the toolbar. Hint: Ensure you are 'Design' View. You can check this under the 'View' design Tab. 

2. Once you insert 'Hero Banner' Rendering, you will be promoted to select or create a new data source. Name the data source and save. 

3. You will be able to select a variant of the hero banner. Select 'Default' for Base Page Hero Banner. 

4. To edit the the hero banner, please ensure that you are in 'Edit' Mode under the 'View' Ribbon. 

5. Click the image, a dialog box will appear to select, edit or remove the image. Click 'Add' Image Icon. 

6. Another window will appear to search or scroll through the media library. You will be able to select the image. 

7. Once the image is selected, type in text in the text placeholder. Save Component. 

8. Text will shift in the hero banner. To edit the font color or indent, open up paint bucket settings. You will be able to update indent, spacing, margins and font. You can also select a background color if no image is selected. 

9. Content Authors should save and publish changes. 

Base Hero:

• The Content Author should be able to edit the following fields:
  • Title
  • Background Image
• The CA should be able to use the Paint Bucket option for:
  • Background Color
• Styling should follow XD designs
• Background color is optional in the event no image is selected
• The background color is applied using paint bucket (See the Style Guide for brand colors)
• The CA should be able to select between a light and dark font (default is light)
  • Light= White
  • Dark= Blue (#143B83)
• This component must follow accessibility standards for Alt text, and keyboard navigation

Mobile:

• See above, content is stacked