Tabs are used for organizing information by showing one section while hiding other related sections at the same time. Tabs can be oriented either horizontally or vertically.
- Vertical - Reserved exclusively for a case's summary panel to present critical content, relevant discussions, unique views of data, or linked relationships such as child cases and dependencies.
- Horizontal - More generic usage of tabs used to represent sub-sections of content throughout an application.
- Never nest tabs (never have tabs within tabs within the same content section).
- Only show read-only information within tabs (no data entry).
- Everything underneath the tab group belongs to the active tab, and the tabs should fall on the grey background.
- Tabs in a single card design are easier to understand and manage. Use header levels to distinguish information under a tab.
- Limit number of tabs to 7 or less.
Looking for legacy UI Kit content?
Last updated: Oct 2020