Tab Container

Synopsis: The tab container can be used to create a mini 'in-page' navigation with child content. The component can house other components under its child content area.

Author can toggle between default and sticky position, toggle drop shadow and choose between full width or contained width options.

With sticky configuration, upon scroll, tab navigations will stick below the primary nav and as the content of tab scroll passes the tab navigation, the tab navigation disappears. Reappears on reverse scroll. Default option is without this sticky behavior and component scrolls with the page. Contained width provides it to extend to a max of 1440px. Tab navigation is fluid below that. In full-width the border extends edge to edge of page. Each tab content area is always 100% width of its parent container.

Content fields:

Tab Title, Tab ID, Analytics Name, Aria Label.

Options: 

Tab v2: Check box(Optional)

Background color: Fiserv color palette

Tab Navigation Position: Default, Sticky Position.

Tab Navigation Width: Full Width, Contained Width.

Drop Shadow Check box (Optional).

Tab Navigation Layout: Accordion.

Expanded by Default Check Box (Optional)

Note: Tab v2 variant should be authored outside container only and Sticky position will not work in this variation.

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

Sticky Position

Ingredients: 1 Container, 1 Tab Container with various components used within

This scenario consists of 1 tab container with sticky navigation, sitting within a contained container. The tab container is configured with 4 tabs. Within each tab other components can be placed in near unlimited combinations. This example replicates usage on Fiserv.com segment pages. Setting the style to sticky keeps the tab navigation stuck on the page until the visitor scrolls past the tab section.

Create tailored customer experiences

Create tailored customer experiences


From real-time access to funds and information to personalized offers and experiences, your customers’ expectations are constantly evolving. Understand these needs – and meet them as they unfold – by creating seamless experiences across multiple channels and staying tuned-in to what’s next.

Data and Analytics

Use data to make better decisions and design more engaging consumer experiences. Engage customers with personalized solutions that meet their needs – and earn their loyalty.

Digital Banking

Deliver effortless digital banking and payment solutions that consumers want and small businesses need. Leverage integration to achieve real-time payments, simpler transactions and always-on security.

AppMarket

Browse our marketplace of fintech offerings, which have been carefully curated to help you offer tailored services to reach target markets.

Drive digital transformation

Drive digital transformation

 

Do you have the necessary agility to respond to changes in the market? 
Legacy systems or slow, manual processes can hold your bank back and make it more difficult to meet evolving consumer demands, mitigate constantly evolving security threats and more.

Card Services

Exceed consumer expectations and achieve top-of-wallet status with innovative, scalable and secure card solutions.

Digital Banking

Deliver the intuitive, comprehensive, easy-to-access digital experiences that today’s consumers demand.

Open Banking

Collaborate on fintech solutions to extend your capabilities and level the playing field between your bank and the competition.

Increase operational efficiency

Increase operational efficiency

 

Rapidly changing technology, new competitors and evolving consumer expectations create increasing pressure on your bank to operate more efficiently and effectively than ever before.

Data and Analytics

Support proactive, strategic data analysis with solutions that enable greater efficiency and more effective, streamlined operations.

Account Processing

Access networks, notifications, core processing and back-office solutions for greater efficiency and enhanced omnichannel member experiences.

Branch Experience and Strategy

Streamline processes and automate workflows across the bank. With stronger connections between data, workflows and people, your bank can increase speed to market and adapt to emerging needs.

Manage financial performance and mitigate risk

Manage financial performance and mitigate risk

 

Whether performing accounting, reconciliation, budgeting or planning – or fighting financial crime – financial institutions need accurate, accessible and insightful data to make smart decisions.

Financial Performance

Increase efficiency and effectiveness with integrated, real-time financial information. Pursue a faster, more accurate financial close.

Financial Planning and Analysis

Leverage technology and expertise to help you enhance profitability and make sound strategic decisions with the ability to analyze historical results, model future business scenarios, manage portfolios and mitigate risk.

Financial Crime Mitigation

Use advanced technology to help improve financial crime detection and prevention rates, reduce false positives, optimize efficiency and enhance customer satisfaction.

Scenario 2

Tab v2

Ingredients: 1 Tab Container with various components used within

This scenario consists of  The tab container is configured with 4 tabs. Within each tab other components can be placed in near unlimited combinations. This example replicates usage on Fiserv.com segment pages. 

We're not here to follow change -- we're here to lead it. With a client -- first mindset and relentless focus on quality. We see bold opportunities ahead that will move the industry forward 

 

Mike Lyons

 

Chief Executive Officer

Meet our leadership team

The largely untapped senior segment represents the biggest potential gains for new digital banking users.

Frank Bisignano

President and Chief Executive Officer

The largely untapped senior segment represents the biggest potential gains for new digital banking users.

Frank Bisignano

President and Chief Executive Officer

The largely untapped senior segment represents the biggest potential gains for new digital banking users.

Frank Bisignano

President and Chief Executive Officer

Learn more

The largely untapped senior segment represents the biggest potential gains for new digital banking users.

Frank Bisignano

President and Chief Executive Officer

Quote Image