C27. Tabs
- Japneet Kaur (Deactivated)
Analytics
Release notes
Date | Update | Updated by |
|---|---|---|
14 Jan 2022 | Component finalised | @Japneet Kaur (Deactivated) @Steven Mao (Unlicensed) |
Overview
Objective
The tabs component helps users to easily access different areas of a site or different parts of an individual page. By clicking a tab, users can locate related content underneath.
Use case
Tabs should be used sparingly throughout the website. User testing should occur to test whether tabs is appropriate for a given webpage.
Business rules
BR-# | Business rule |
|---|---|
BR-1 | The tabs component can be added to any template. |
BR-2 | This component must contain the following items:
|
BR-3 | All elements on the component are fully editable by content authors. |
BR-4 | The tabs component must be responsive on desktop, mobile and tablet devices and align with the designs. |
BR-5 | Only one tab can be highlighted (active state) at any given time. |
BR-6 | The tabs component requires at least 2 tabs to be present. |
Design
Desktop | Mobile |
|---|---|
No designs available. | No designs available. |
CMS Elements
# | Title | Type | Mandatory | Notes |
|---|---|---|---|---|
1 | Tab name | Text | Y | - |
2 | Tab | Box | Y | A tab will be highlighted if selected. All other tabs will turn to an inactive state. |