Quote Component

Synopsis: The quote compenent is used to callout a special quote made by an important individual or business that is pulled outside of normal paragraph context. It can be displayed in multiple variations.

links within the pageUsage: All pages.

Requirements: https://fiserv-com.atlassian.net/browse/FC-58

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

Banner Variation

Ingredients: 2 Containers, 5 Quote Component

This use case involves an outside container set to full width and an inside container set to contained to keep the central content within a max-width of 1440px.

A quote component in banner layout is then placed inside this inner container. 

Scenario 2

Card Variation

Ingredients: 2 Containers, 1 Column Control, 2 Quote Components

It is not standard to place two quotes next to each other in a column control, but this example is only for demonstration. This involves an outside container set to full width and an inside container set to contained to keep the central content within a max-width of 1440px. Within the inner container, a column control is used to create two columns.

A quote component in card layout is then placed in each column. 

Scenario 3

Card with Image Variation

Ingredients: 2 Containers, 2 Quote Component

This use case involves an outside container set to full width and an inside container set to contained to keep the central content within a max-width of 1440px.

A quote component in 'card with image' layout is then placed inside this inner container.