Tabs

Tab overview

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.


Variations

  • 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.
    Vertical tabs
  • Horizontal - More generic usage of tabs used to represent sub-sections of content throughout an application.
    Horizontal tabs

Usage

  • 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.

Last updated: Oct 2020