Vertical Tabs

Synopsis: The Vertical Tabs component allows authors to create a tabbed section where the tabs site vertically rather than horizontally, with content displayed on the right side. The right side content changes with each corresponding tab.

Usage: All pages.

Requirement: https://fiserv-com.atlassian.net/browse/FC-699

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

Ingredients: 2 Container, 1 Tab Container - vertical

This use case involves an outside container set to full width. and inner container is contained

The Vertical Tab component here has three tabs and on load the first tab is selected

 

  • 01 Problem
  • 02 Solution
  • 03 Benefits

01 Problem

This is the problem statement. This is the problem statement. This is the problem statement. 

02 Solution

This is the solution.

03 Benefits

These are the benefits.