Resource Card Component
Synopsis: The resource card component is an informational card that can may live by itself or with a group of related cards within the page. It has 3 layout variations: Standard, Side-by-Side and Wide. It’s a simple container which can house a title, eyebrow text, WYSIWYG text, icon, and a link.
The make the card static with no link or hover-state, simply leave the link field blank. The card will then become a simple icon and text block.
Usage: All pages.
Requirements: https://fiserv-com.atlassian.net/browse/FC-154, https://fiserv-com.atlassian.net/browse/FC-187
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
Standard Variation - (with blur and border)
Ingredients: 3 Resource Cards, Column Control, Container
This scenario consists of 3 resource cards in the standard layout inside a 3-column control, all set within a 1440px max-width container. The standard resource card variation consists of the image, resource type and icon, eyebrow text, title, description and CTA properties. The author also has various alignment properties. The entire card is clickable if the CTA is set.
Disruptive forces, and evolving consumer and corporate expectations, are challenging a banking status quo
Disruptive forces, and evolving consumer and corporate expectations, are challenging a banking status quo
Disruptive forces, and evolving consumer and corporate expectations, are challenging a banking status quo
Scenario 2
Standard Variation - (without blur & border)
Ingredients: 3 Resource Cards, Column Control, Container
This scenario consists of 3 resource cards in the standard layout inside a 3-column control, all set within a 1440px max-width container. The standard resource card variation consists of the image, resource type and icon, eyebrow text, title, description and CTA properties. The author also has various alignment properties. The entire card is clickable if the CTA is set.
Disruptive forces, and evolving consumer and corporate expectations, are challenging a banking status quo
Disruptive forces, and evolving consumer and corporate expectations, are challenging a banking status quo
Disruptive forces, and evolving consumer and corporate expectations, are challenging a banking status quo
Scenario 3
Wide Variation
Ingredients: 1 Resource Card, Container
This scenario consists of 1 resource card setup in the wide layout within a 1440px max-width container. The blur effect is turned on and the border is turned off.
Open banking helps community banks thrive
Disruptive forces, and evolving consumer and corporate expectations, are challenging a banking status quo
Scenario 4
Wide V2 Variation - Light Background
Ingredients: 1 Resource Card, Container
This scenario consists of 1 resource card setup in the wide layout within a 1440px max-width container. The blur effect is turned on and the border is turned off.
Digital payments: consumer trends 2021
Our latest Experiences & Expectations survey – see how stressed consumers are opting for convenience
Scenario 5
Wide V2 Variation - Dark Background
Ingredients: 1 Resource Card, Container
This scenario consists of 1 resource card setup in the wide layout within a 1440px max-width container. The blur effect is turned on and the border is turned off.
Digital payments: consumer trends 2021
Our latest Experiences & Expectations survey – see how stressed consumers are opting for convenience