Split Image Hero Component
Synopsis: The split image hero component can be used as a top hero component or lower on a page. Fiserv.com solution pages use the Split Hero at the top. The component consists of text content on one side and an image, or images, on the opposite side in a equally split layout.
The component can display the image side in multiple variations from a single image to 3 images.
Content Fields:
Image, Title, Description, Top Label (optional; applies to Double Image Alternate only), Eyebrow (optional)
Options:
Variations: Single Image, Double Image, Double Image Alternate, Triple Image
Blur Opacity: 20%, 30%, 50%
Layout: Text on right/left
Border Margin: No/Yes
Cover Image: No/Yes
Recommended Image Specifications: Image on left/right drops below the copy on mobile. Vertically oriented images will work better with multiple image layouts, although the Double Image Alternate has one horizontal and one vertical image.
Usage: All pages.
Note: This should be used as an example only. There will be additional requirements related to each individual component usage and page design, such as font treatments, padding and margin requirements, ADA compliance etc, so please use the below examples for reference only to demonstrate core function.
Scenario 1
Single Image Right
Ingredients: Split Image Hero Component
The recommended application of the Split Image Hero single image variation is to use it full width, either outside of a container or inside a full width container.
This example has the split hero configured with 1 image. The eyebrow, title and description fields are authored. The top label field in this variation is not used as it is only used in the "Double Image Alternate" variation. The blur and blur opacity should be chosen based on the constrast of the underlying image.
Set the stage for mutually beneficial collaboration with a robust ecosystem that expands your options and enhances the consumer experience
Scenario 2
Single Image Left
Ingredients: Split Image Hero Component
The recommended application of the Split Image Hero single image variation is to use it full width, either outside of a container or inside a full width container.
This use case is identical to Scenario 1 but with the layout set to Text on Right, which mirrors the layout. Note that the background image position is centered, so it is important to consider the subject positioning when choosing the right imagery.
Set the stage for mutually beneficial collaboration with a robust ecosystem that expands your options and enhances the consumer experience
Scenario 3
Double Image Right
Ingredients: 2 Containers, 1 Split Image Hero Component
The recommended application of the Split Image Hero double image variation is to use it within a contained container with no left/right padding.
This use case is demonstrates the Double Image variant.
Set the stage for mutually beneficial collaboration with a robust ecosystem that expands your options and enhances the consumer experience
Scenario 4
Double Image Left
Ingredients: 2 Containers, 1 Split Image Hero Component
The recommended application of the Split Image Hero double image variation is to use it within a contained container with no left/right padding.
This use case is demonstrates the Double Image variant.
Set the stage for mutually beneficial collaboration with a robust ecosystem that expands your options and enhances the consumer experience
Scenario 5
Double Image Alternate Right
Ingredients: 2 Containers, 1 Split Image Hero Component
The recommended application of the Split Image Hero double image alternate variation is to use it within a contained container with no left/right padding.
This use case is demonstrates the Double Image Alternate variant. This variant displays one image in a horizontal layout and one in a vertical layout.
This variation also displays the top label property in orange.
Top Label
Set the stage for mutually beneficial collaboration with a robust ecosystem that expands your options and enhances the consumer experience
Scenario 6
Double Image Alternate Left
Ingredients: 2 Containers, 1 Split Image Hero Component
The recommended application of the Split Image Hero double image alternate variation is to use it within a contained container with no left/right padding.
This use case is demonstrates the Double Image Alternate variant. This variant displays one image in a horizontal layout and one in a vertical layout.
This variation also displays the top label property in orange.
Set the stage for mutually beneficial collaboration with a robust ecosystem that expands your options and enhances the consumer experience
Top Label
Scenario 7
Triple Image Right
Ingredients: 2 Containers, 1 Split Image Hero Component
The recommended application of the Split Image Hero triple image variation is to use it within a contained container with no left/right padding.
This use case is demonstrates the Triple Image variant.
Set the stage for mutually beneficial collaboration with a robust ecosystem that expands your options and enhances the consumer experience
Scenario 8
Triple Image Left
Ingredients: 2 Containers, 1 Split Image Hero Component
The recommended application of the Split Image Hero triple image variation is to use it within a contained container with no left/right padding.
This use case is demonstrates the Triple Image variant.
Set the stage for mutually beneficial collaboration with a robust ecosystem that expands your options and enhances the consumer experience
Scenario 9
Border Margin -Text Right
Ingredients: 1 Container, 1 Split Image Hero Component
The recommended application of the Split Image Hero - Image with Text is to use in Full wiedth.
About Fiserv
Moving commerce, culture and community forward.
Scenario 10
Border Margin -Text Left
Ingredients: 1 Container, 1 Split Image Hero Component
The recommended application of the Split Image Hero - Image with Text is to use in Full wiedth.
About Fiserv
Moving commerce, culture and community forward.
Scenario 11
Cover Margin -Text Right
Ingredients: 1 Container, 1 Split Image Hero Component
The recommended application of the Split Image Hero - Image with Text is to use in Full wiedth top and bottum padding.
About Fiserv
Moving commerce, culture and community forward.
Scenario 12
Cover Margin -Text Left
Ingredients: 1 Container, 1 Split Image Hero Component
The recommended application of the Split Image Hero - Image with Text is to use in Full wiedth top and bottum padding.
About Fiserv
Moving commerce, culture and community forward.