Accordion Component

Synopsis: The accordion component is a wrapping component that contains a child paragraph of content entered as WYSIWYG text, that can be hidden or collapsed on the page to minimize space. The accordion can then open to reveal additional content.

Content Fields:

Eyebrow text above accordion (optional), 3-6 accordion entries (each requires Icon, Title and Description)

Options:

The accordion component will take the width of its container and is most often used in a 50/50 column component within a contained container

Each Accordion item can individually be set to open or closed on page load

Choose either Light or Dark Mode (Dark Mode requires a dark background)

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

Closed on Page Load, Light Mode

Ingredients: 2 Containers, Column Control, Text Component, Accordion

This use case involves an outside container set to full width with an inner container set to contained to center align the content.

Inside the second container is a column control configured in the 50/50 layout to provide two columns. A Text component is used within the left column, and an Accordion is used within the right column.

 

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.

Optional Eyebrow Text

  • 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.

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

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

Scenario 2

Open on Page Load, Dark Mode

Ingredients: 2 Outer Containers, Column Control, Text Component, Accordion

This use case involves an outside container set to full width for the color background with an inner container set to contained to center align the content.

Inside the second container is a column control configured in the 50/50 layout to provide two columns. A Text component is used within the left column, and an Accordion is used within the right column.

 

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.

Optional Eyebrow Text

  • 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.

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

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