Proof Points Banner
Synopsis: The proof points banner can be used to to call out information highlights in a visually appealing layout.
The author has the ability to specify a 2, 3 or 4 box option, background image and primary description text. Each proof point can be configured with a description text and background color.
Content Fields:
Background Image, Description, Proof Points (2-4)
Options:
Variation: 2, 3 or 4 Proof Points
Blur Opacity: 20%, 30%, 50%
Border Color: Fiserv color palette
Each Proof Point box can be configured with a background color
Recommended Image Specifications: Horizontal image, Images displays bottom left for Desktop and transitions to full horizontal display in Mobile
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
2 Points
Ingredients: 1 Container, 1 Proof Points Banner
This scenario consists of 1 wrapping container set with no padding in order to extend to the full 1440px width as intended for the Proof Points Banner. Within the container is the Proof Points Banner, which extends to 100% width of the parent container.
The Proof Points Banner should always be within a "contained" container to prevent going edge-to-edge of the browser window, which will cause distortion of the layout.
This example includes 50% opacity blur and a black border around the component. The border is optional.
Scenario 2
3 Points
Ingredients: 1 Container, 1 Proof Points Banner
This scenario consists of 1 wrapping container set with no padding in order to extend to the full 1440px width as intended for the Proof Points Banner. Within the container is the Proof Points Banner, which extends to 100% width of the parent container.
The Proof Points Banner should always be within a "contained" container to prevent going edge-to-edge of the browser window, which will cause distortion of the layout.
Scenario 3
4 Points
Ingredients: 1 Container, 1 Proof Points Banner
This scenario consists of 1 wrapping container set with no padding in order to extend to the full 1440px width as intended for the Proof Points Banner. Within the container is the Proof Points Banner, which extends to 100% width of the parent container.
The Proof Points Banner should always be within a "contained" container to prevent going edge-to-edge of the browser window, which will cause distortion of the layout.
This example includes an applied number count up style on one of the proof points.