Tabs

Please note: This pattern contains design examples and implementation rules. Front-end code is coming soon!

Overview

Tabs organize and efficiently display information by grouping related content. A related content is within each tab. It helps the users easily navigate the information by looking at the tabs. Tabs can only have text (images or boxes cannot be used).

Secondary Tab (Desktop)

Usage

A tab keeps related content in a single container that is shown and hidden through navigation. The desktop page can have up to a maximum of 4 tabs. Tabs for desktop must be displayed in a single row.

Secondary Tab-Desktop


Secondary Tab (Mobile)

Usage

TBD


Panel Tab (Desktop)

Usage

A tab keeps related content in a single panel that is shown and hidden through navigation. One panel can have up to a maximum of 4 tabs. There is a maximum character count of 27 letters. As a default, one tab is always selected to show content.

Secondary Tab-Desktop


Panel Tab (Mobile)

Rules for usage:

TBD