Banner Hero Component

Synopsis: Banner Hero component is used to create page (hero home) section, Below you will find an example for Banner Hero component. 

Content Fields: Desktop Image, Mobile Image, Alt Text, Eyebro(RTE), Title(RTE), Description(RTE), Video Path.

Options:

Play Video Checkbox 

Image Position: Top, Bottom, Center

Banner color: Fiserv color palette

Banner Opacity: 50%, 70%, 90%

Usage: All pages. 

Note:This should be used as an example only. 

Instructions: For any RTE style options and authoring guide please refer this link 

Scenario 1

Background Video

Ingredients: Banner Hero

1. We're using following styles for the title text - Formula Narrow semi-bold and SignPainter Regular .

2. To match the visual weight and size of Formula Narrow Semi-Bold, we are setting the title text ('more') in SignPainterH1(115px).

3. Additionally, we 're adding a proof point at the end of the title text, sized at 10px.

4. In this example we used Banner Opacity as 90%.

5. Play Video Check box enabled 

Note: IF the video fails to play for any issues, a desktop image will bedisplayed.