...

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:

...

Verint products should dynamically respond to the user’s screen size, platform, and orientation, supporting all devices down to the common tablet size (960px width).Responsive guidelines

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

• Back and Next arrows should be shown, to allow users to scroll between the tabs.

• On touch devices, click and drag should be supported, allowing the user to drag the tabs list horizontally.

• Once the focus is removed from the tab area, the selected item should automatically move into view.

...

For Details panel tabs:

• Where tab labels do not fit within the tab width, the end of the labels should be truncated with an ellipsis ….

  • The full label should be shown in a Tooltip on hover.

  • For touch devices, the full label should be shown in a Tooltip on tap-and-hold.

...

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

...