...

Tabs enable content organization at a high level, such as switching between views, data sets, or functional aspects. Allowing user for dual-screen support, and workspace customization.

...

Types

Type	Usage	Image
Main tabs	Use it as tabbed navigation - Single row above their associated content
2nd level tabs	Single row above their associated content
Details pane tabs	Single row above their associated content in the details pane
Ribbon tabs
Side tabs <TBD>

...

General guidelines

Structure

The horizontal layout of the tab bar never changes. The tabs always appear side by side

Structure Elements

• Container

  • Display a navigation text element arranged together with the active inactive highlighted

• Tab item

  • Describes its content and sets user expectations

  • Each tab label describes the content contained within it

  • one to two words maximum

  • Icons are not permitted as tab labels

• Active tab

  • To differentiate an active tab from an inactive tab, apply a 3 px underline and color change to the active tab’s highlighted.

...