Type

Usage

Image

Horizontal tabs

Single row above the associated content. Use it as tabbed navigation.

2nd level horizontal tabs

Use only as a second level to main horizontal tabs.
Shown as a single row beneath the main horizontal tabs, above the associated content.

Vertical Tabs

Use where there is not enough space to show horizontal tabs, for example:

• the container or workspace is in a portrait orientation.

• there are a large number of tabs.

• the tabs require longer labels.

Details pane tabs

Use only in the Details Panel.
A Shown as a single row above the associated content.

Ribbon tabs

Use only in the Ribbon as tabbed navigation.

Horizontal tab item error

Horizontal tab item warning

Vertical tab item error

Vertical tab item warning

Main Tabs

https://zpl.io/Edm9O1D

2nd Level Tabs

https://zpl.io/LL4nrnM

Details Pane Tabs

https://zpl.io/kKDz8oZ

Ribbon Tabs - Expand

https://zpl.io/bJvqAmE

Vertical Tabs
https://zpl.io/6JNo9mR