Case Study Component

Synopsis: The case study component is a content component to call attention to case studies in a banner format.

Content Fields: 

Case study name, case study title, Proof Point title(s), Proof Point description(s)

Options:

Layout: 1 Proof Point, 2 Proof Points, Parsys (used to add a quote or other component)

Background Color: Fiserv Color Palette

Blur - Check box (Optional)

Divider Line Color: Fiserv Color Palette

Border Color: Fiserv Color Palette

Image Position: Left, Right, Center

*Can add a Generic Button component if a CTA is needed

Recommended Image Specifications: Horizontal image, Width: 1200, Height: 850, Image appeard on left for Desktop and on top for Mobile

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

1 Proof Point 

Ingredients: 2 Containers, 1 Case Study Component

This use case involves an outside container set to full width and an inside container to contain the event list to 1440px.

The eyebrow and title of the case study component is configured within the dialog. The author will also choose the desired layout for the bottom section. One proof point, two proof points or an open parsys for full customization is allowed.

The generic button component is used to create a CTA when needed, which can be placed below the case study description.

This example uses 1 Proof Point to specify a single data point title and description in the bottom section.

Scenario 2

2 Proof Points

Ingredients: 2 Containers, 1 Case Study Component

This example uses 2 Proof Points to specify a two data points title and description in the bottom section.

Scenario 3

Parsys Option

Ingredients: 2 Containers, 1 Case Study Component, Quote component, Generic button

This example uses the parsys option to add additional custom components to the bottom section. This example uses a quote component.

Scenario 3

Parsys Option

Ingredients: 2 Containers, 1 Case Study Component, Quote component, Generic button

This example uses the parsys option to add additional custom components to the bottom section. This example uses a quote component.

Scenario 4

Parsys Option

Ingredients: 2 Containers, 1 Case Study Component.(Blur check box Un checked)

This example uses the parsys option to add additional custom components to the sections.