Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
Table of Contents

...

Type

Usage

Image

Main tabs

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

2nd level tabs

Use only as a second level to main tabs.
Single row beneath the main tabs and above the associated content.

Details panel tabs

Use only in the Details Panel.
Single row above the associated content.

Ribbon tabs

Use only in the /wiki/spaces/UserExp/pages/1390479038 as tabbed navigation.

Vertical Tabs

TBD

Usage & Behavior

Tabs organize content into groups and allow navigation between them. Content should be:

...

For more information see the general Responsive Design guidelines /wiki/spaces/UserExp/pages/1893074841.

Responsive guidelines

For Main and 2nd level tabs, where the width does not allow all tabs to be shown at once:

...

Zeplin link

Screen thumbnail

Main Tabs

https://zpl.io/bPkL1ma

2nd Level Tabs

https://zpl.io/2ZqjW0X

Details Pane Tabs

https://zpl.io/VODWzzr

Ribbon Tabs - Expand

https://zpl.io/bJvqAmE

Vertical Tabs
https://zpl.io/a3JAPNx

Image RemovedImage Added

Code

...