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.
Content Fields:
Title, CTA Link
Options:
Variant: Block, Text with Arrow, Samll Block
Position: Left, Center, Right
Icon: Arrow, Download
Mode: Light, Dark
Border: optional (applies only to Block)
Add Top and Bottom Padding: Optional(applies for Block & Text with arrow 25px padding)
CTA Color: Fiserv color pallette (applies only to Text with Arrow)
CTA Link Target: Open in same tab or new tab
Button BG color: Fiserv color palette. (Applies only to Samll block)
Button Text color: Fiserv color palette. (Applies only to Samll block)
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
Generic Button - Block Variation - Light Mode
Ingredients: Container, Generic Button
This use case involves a generic button with block variation using light mode on a dark background. The example shows how a button can be positioned left, center or right.
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
Block Variation - light mode - arrow icon - center aligned - with border & Top and Bottom Padding
Scenario 2
Generic Button - Block Variation - Dark Mode
Ingredients: Container, Generic Button
This use case involves a generic button with block variation using dark mode on a white background. The example shows how a button can be positioned left, center or right.
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
Block variation - dark mode - arrow icon - center aligned - with border & Top and Bottom Padding
Scenario 3
Generic Button - Text with Arrow Variation
Ingredients: Container, Generic Button
This use case involves a generic button with text with arrow variation and various color combinations. The example shows how a button can be positioned left, center or right.
Text with arrow Variation - left aligned - default color
Text with arrow Variation - center aligned - orange
Text with arrow Variation - right aligned - green
Text with arrow Variation - center aligned - orange - Top and Bottom Padding
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
Scenario 5
Generic Button - Small Block
Ingredients: 1 Container, 1 Generic Button Component
This use case involves a generic button with small block with background and without arrow.
Background color and Text color is authorable.