Column Control Component

Synopsis: The column control component is a layout component that allows the author to divide pages up into vertical sections. The columns are programmed to wrap, or stack, at pre-defined breakpoints. This is the columns themselves, not the content within them. Many other combinations of components can be added within the columns to solve for various page themes.

The author can configure multiple numbers of columns: 100 (default), 50/50, 33/33/33, 25/25/25/25, 66/33, 33/66, 20/20/20/20/20, 16.66/16.66/16.66/16.66/16.66/16.66, 80/20, 20/80, 16/67/16

Usage: All pages. The column control card can be used on all pages, and even columns within columns.

Requirements: https://fiserv-com.atlassian.net/browse/FC-8, https://fiserv-com.atlassian.net/browse/FC-196

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

Single Column

Ingredients: 1 Column Control

This scenario consists of 1 column control in a single 100% column. This scenario is not typically needed as the same outcome can be reached without a column container.

The inner-container component has been set with a background of light gray to give context in this example.

This is text within a single column.

Scenario 2

2 Columns - 50/50

Ingredients: 1 Column Control

This scenario consists of 1 column control in a 50/50 layout.

The inner-container components have been set with a background of light gray to give context in this example.

This is text within a column.

This is text within a column.

Scenario 3

3 Columns - 33/33/33

Ingredients: 1 Column Control

This scenario consists of 1 column control in an equal 33% layout.

The inner-container components have been set with a background of light gray to give context in this example.

This is text within a column.

This is text within a column.

This is text within a column.

Scenario 4

4 Columns - 25/25/25/25

Ingredients: 1 Column Control

This scenario consists of 1 column control in an equal 25% layout.

The inner-container components have been set with a background of light gray to give context in this example.

This is text within a column.

This is text within a column.

This is text within a column.

This is text within a column.

Scenario 5

2 Columns - 66/33

Ingredients: 1 Column Control

This scenario consists of 1 column control in a 66/33 layout.

The inner-container components have been set with a background of light gray to give context in this example.

This is text within a column.

This is text within a column.

Scenario 6

2 Columns - 33/66

Ingredients: 1 Column Control

This scenario consists of 1 column control in a 33/66 layout, opposite of the 66/33.

The inner-container components have been set with a background of light gray to give context in this example.

This is text within a column.

This is text within a column.

Scenario 7

5 Columns - 20/20/20/20/20

Ingredients: 1 Column Control

This scenario consists of 1 column control in an equal 20% layout.

The inner-container components have been set with a background of light gray to give context in this example.

This is text within a column.

This is text within a column.

This is text within a column.

This is text within a column.

This is text within a column.

Scenario 8

6 Columns - 16.66/16.66/16.66/16.66/16.66/16.66

Ingredients: 1 Column Control

This scenario consists of 1 column control in an equal 16.66% layout.

The inner-container components have been set with a background of light gray to give context in this example.

This is text within a column.

This is text within a column.

This is text within a column.

This is text within a column.

This is text within a column.

This is text within a column.

Scenario 9

2 Columns - 20/80

Ingredients: 1 Column Control

This scenario consists of 1 column control in a split 20/80% layout.

The inner-container components have been set with a background of light gray to give context in this example.

This is text within a column.

This is text within a column.

Scenario 10

2 Columns - 80/20

Ingredients: 1 Column Control

This scenario consists of 1 column control in a split 80/20% layout, the inverse of 20/80.

The inner-container components have been set with a background of light gray to give context in this example.

This is text within a column.

This is text within a column.

Scenario 11

Columns within Columns

Ingredients: 2 Column Controls

This scenario consists of 1 parent column control in a 50/50 layout, and a child column control nested within the left column, also set to 50/50. This provides for a 25/25/50 overall layout, provided the padding options are set to the desired effect.

Note that the two primary columns have been set with a height of Small to create a consistent height effect. Depending on the amount of content within the columns, you may set the heights to different values.

The inner-container components have been set with a background of light gray to give context in this example.

This is text within a column. Below is another set of columns within a column.

This is text within a nested column.

This is text within a nested column.

This is text within a column.

Scenario 12

2 Columns - Text and Cards

Ingredients: 1 Column Control, 3 Basic Cards

This scenario consists of 1 column control in a 50/50 layout, with text in the left column container and 3 Side-by-Side cards in the right column container.

Notice how, depending on the content, the right side card heights may not be the desired effect, so we will look at two ways to solve this. This scenario shows the use with side-by-side basic cards. See Scenario 11 on how to solve this without cards but with columns instead.

Elevated Consumer Interactions

Deliver excellent consumer experiences

Align digital capabilities with physical space at every branch for a comprehensive experience that meets consumer expectations and strengthens relationships.

Provide True Omnichannel Services

Support account processing, advisory, branch automation, content management, deposit optimization, digital solutions and infrastructure – and serve consumers where and when they want while deepening employee engagement and increasing operational efficiencies.

Optimize Branch Performance

Identify, monitor and manage goals and objectives and implement technology to realize the full value and performance of branch locations and encourage growth.

Build Your Brand

Establish consistent, trusting relationships with consumers, businesses, employees and communities.

Scenario 13

3 Columns - 16/67/16

Ingredients: 1 Column Control

This scenario consists of 1 column control in a split 16/67/16 layout

The inner-container components have been set with a background of light gray to give context in this example.

This is text within a column.

This is text within a column.

This is text within a column.