Promo Banner

Synopsis: The promo banner component allows authors to create promotional callouts within the page.

Content fields:

Title, Description, Background Image, Link Path

Options:

Background Color: Fiserv color palette.

Link Target: Same, New.

Link Icon: Arrow, Download.

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

Promo Banner in orange with image and title

Ingredients: 2 Containers, Promo Banner

This use case involves an outside container and inside container to achieve a contained layout.

Scenario 2

Full width Promo Banner in blue with Image, title and description

Ingredients: Promo Banner

This use case involves the Promo Banner being used outside of a container to achieve full width. An outside container may be used to add desired padding on top and bottom if needed.

Scenario 3

Full-width Promo Banner in gray with image, title and description

Ingredients: Promo Banner 

This use case involves the Promo Banner being used outside of a container to achieve full width. An outside container may be used to add desired padding on top and bottom if needed.