Tab Container - Vertical
Synopsis: The Tab Container - Vertical 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. With each Tab Title, a parsys is created where components can be added, most likely a Text component.
Content Fields:
Tab Title, Tab ID
Options:
Hide Tab Numbers(Check box) Optional, Highlight tab(Check box) Optional
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
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. The Tabs are numbered starting with 01.
- 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
Scenario 2
Hide Tab Numbers
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.
- Problem
- Solution
- Benefits
Problem
This is the problem statement. This is the problem statement. This is the problem statement.
Solution
Benefits
Scenario 3
Highlight Tab
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
03 Benefits