Generic Button
Synopsis: The generic button component is a component that allows authors to add a CTA button inline into a page, below, or within another component. The component can have two variations: Block & Text with Arrow. It can be positioned left, center, or right.
The Block variation can be displayed in light mode (default) or dark mode and the block variation can be used to open form or open link.
In the text with arrow variation author can select a color from a generic list.
Usage: All pages.
Requirements: https://fiserv-com.atlassian.net/browse/FC-470, https://fiserv-com.atlassian.net/browse/FC-572, https://fiserv-com.atlassian.net/browse/FC-694, https://fiserv-com.atlassian.net/browse/FC-695
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
Generic Button - Block Variation - Light Mode
Ingredients: 4 Container, 3 Generic Button Component
This use case involves a generic button with block variation. The block variation can have light mode (white background & black text) & dark mode (black background & white text)
Block Variation - light mode - arrow icon - left aligned - without border
Block Variation - light mode - arrow icon - center aligned - with border
Block Variation - light mode - download icon - right aligned - with border
Scenario 2
Generic Button - Block Variation - Dark Mode
Ingredients: 4 Container, 3 Generic Button Component
This use case involves a generic button with block variation. The block variation can have light mode (white background & black text) & dark mode (black background & white text)
Block Variation - dark mode - arrow icon - left aligned - without border
Block variation - dark mode - arrow icon - center aligned - with border
Block Variation - dark mode - download icon - right aligned - without border
Scenario 3
Generic Button - Text with arrow Variation
Ingredients: 4 Container, 3 Generic Button Component
This use case involves a generic button with text with arrow variation. The author can select colors for text with arrow variation
Text with arrow Variation - left aligned - default color
Text with arrow Variation - center aligned
Text with arrow Variation - right aligned
Scenario 4
Generic Button - Open form Modal
Ingredients: 1 Container, 1 Generic Button Component
This use case involves a generic button with block variation which opens form modal instead of opening a link