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.


  • 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


  • 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