...

• Where relevant, the details pane can include up to 5 tabs.

• Tabs may not exceed the width of the panel; there should be no horizontal scroll.

• All tabs will be of the same width, regardless of label length.

• Titles will not wrap onto multiple lines. Long titles will be truncated, and a tooltip will appear on hover.

...

The Content Area

• The main area of the details pane may contain various types of content (see Content below).

• If the content exceeds the height of its container, a scrollbar will appear. The scrollbar will apply only to the content area, excluding the header and the action area, if exists.

...

• Where relevant, an action area will be shown at the bottom of the details pane.

• The action area may include elements such as Buttons and Action menus.

• The placement of the action area components depends on their function.

  • Where the actions relate directly to the items shown in the details pane, such as changing their state:

    • the actions will be aligned to the right.

    • a line will only appear above the action area when scroll is used.

  • Where additional actions are shown which don’t directly relate to the items currently in the details pane, such as creating new items:

    • the actions will be aligned to the left.

    • a line will always appear above the action area, to indicate the separation.

...

• Clicking the pin icon will:

  • switch its state from pinned to unpinned and vice versa (see image below),

  • when unpinned - switch the pane to expanded, pinned state (see States above),

  • when pinned - switch the pane to expanded, unpinned state (see States above).

When the pane is unpinned	Image Modified
When the pane is pinned	Image Modified

The Collapse/Expand Area

• Hovering the collapse/expand area switches it to hover state.

• When the pane is expanded, clicking the area switches it to the collapsed state.

• When the pane is collapsed, clicking the area switches it to the expanded state.

...

Responsive Design

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

Pane width

• The details pane has a fixed width, and does not respond to the width of the screen.

• The default state of the details pane changes at different widths.

  • For screen sizes of 1366 px and below, it is recommended that it is closed and unpinned by default.

  • For screen sizes of 1367 px and above, it is recommended that it is pinned open by default. (This is optional depending on the use case).

• At 960px and below, the pin and expand options should be disabled.

...