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.

Content Fields: 

Author, Role, Quote, Link Path, CTA (RTE)

Options:

Variant: Banner, Card, Card with Image

Quote Icon Color: White w/ Orange, Gray w/ Orange, Gray w/ White, Black w/ Orange, White w/ Blue, Orange V2

Background Color: Fiserv color palette

Recommended Image Specifications: Recommend a horizontal or square image. Focus point of the image should be centered horizontally and vertically. Height/Width of component will vary based on image dimensions. Recommend if multiple quote with image components exist on one page, use consistent image dimensions.

Usage: All pages.

A.  CTA RTE Field – Authoring Guidelines

• This field is used to display a Call-To-Action (CTA) link within the component.
• Use the RTE to insert a hyperlink that serves as the CTA.
• You can set the link path and link target (e.g., open in a new tab) directly within the RTE.
• You can style the text (Color should be white - CTA arrow default color is white) by using RTE to make the CTA more prominent.

B.  Link path field: To make the entire card clickable, we use this field.

• Only one CTA field should be used - either option A or option B, but not both.

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, 6 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. 

Note: To author the CTA in RTE component please follow the below steps for expected results.

Step1. Enter the Text  Ex- Learn more

Step2. Select the text and add the link and target

Step3. Then apply the Styles to the Text

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.