Announcement Bar
Synopsis: The announcement bar component should be added at the top of a page to alert users of important information. It can be used on any page, and can consist of multiple message that scroll through, while having a CTA to allow users to click through to additional information. The announcement bar should normally be applied outside of a container as the bar will extend full width, however the content will remain within boundaries at 1440.
The component can be configured to scroll in vertical or horizontal animation.
Content Fields:
Announcement CTA Label, Announcement Text (Horizontal only), Announcement Type (Vertical only), Link
Options:
Background Color: Fiserv color palette
Text Color: Fiserv color palette
Direction: Horizontal, Vertical
Auto Play: Yes, No
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
Horizontal Variation
Ingredients: Announcement Bar component
This variation is a horizontal scrolling announcement bar with auto scroll turned off.
Scenario 2
Vertical Variation
Ingredients: Announcement Bar component
This variation is a vertical scrolling announcement bar with auto scroll turned on.