...
There are two types of details pane:
Type | Usage | Image |
|---|---|---|
Collapsible details pane |
|  |
Static details pane |
|  |
Usage & Behavior
General guidelines
...
The header may contain:
a pane title, which may wrap onto 2 lines. Longer titles will be truncated, and show a Tooltip on hover.
a secondary title.
a thumbnail image (for example, an avatar).
a contextual help icon.
Where the pane is collapsible, the header will also contain:
a pin icon (see Interaction below).
 |  |  |  |
Tabs (optional)
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.
...
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 actions Primary actions (e.g., Save and Cancel) will be aligned to the right. Other actions will be aligned to the left, shown as a toolbar (see example below).
A line will appear above the action area.
 |  |
...
 |
Collapse/Expand Area (optional)
...
depending on the application, the top of the pane should start from either:
beneath the VerinTop, aligned with the top element in the header area, or
beneath full-width header areasarea.
where a Ribbon is also used, the height of the details pane should reduce when the ribbon is expanded. The top of the pane should align to the bottom of the ribbon. (See example image in the Description).
Static (non-collapsible) | Collapsible |
|---|---|
|  |
Default state
Where the pane is collapsible, the default state will be determined for each application separately.
...
The content area may contain any combination of elements, such as text, lists, cards, tables, forms, graphs, links etc.
Examples
 |  |  |
 |  |  |
Internal logic
Where the details pane content relates to selected items within the main page:
...
Where the details pane is collapsible, it has three basic states:
State | Description | Example |
|---|---|---|
Collapsed | The only visible part of the pane is the collapse/expand area, allowing users to expand it. |
 | |
Expanded, pinned | the pane is shown next to the main content area, so nothing is hidden. |
 | |
Expanded, unpinned | the pane overlays the main area of the page, hiding the content behind it. |
 | |
Empty State | When no items are selected, the details pane will present an empty state with guiding text, guiding actions, or a page summary. |
 | |
Loading | While the content is loading, a loading state will show, including a Progress Indicator. |
 |
Interaction
Interaction only applies to collapsible panes.
...
Clicking the pin icon will:
When the pane is unpinned |  |
When the pane is pinned |  |
The Collapse/Expand Area
Hovering the collapse/expand area switches it to the 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.
...
Verint products should 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.
A static details pane may become collapsible at smaller screen widths, where appropriate.
Where the details pane is collapsible, the default state of the details pane may change 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, the default state will be determined for each application separately.
At 960px and below, the pin and expand options should be disabled.
...
Collapsible details pane examples
Zeplin link | Screen thumbnail |
|---|---|
 | |
WFM |  |
WFM |  |
Form designer |  |
Static details pane examples
Zeplin link | Screen thumbnail |
|---|---|
WFO | |
WFE Risk Management https://app.zeplin.io/project/5b2a0bd07406ff8d18bcf70e/screen/63c7b9fb2f4be80d103a3a54 |  |
Code
...