Description
The details pane is located on the right side of the page, presenting information and actions relating to selected items within the main content.
Usage & Behavior
The details pane has three basic states (see States below):
collapsed,
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.
The default state will be determined for each application separately.
General guidelines
When no items are selected, the details pane will show an empty state (see States below).
When two or more items are selected, the pane will show either the number of selected items, or a combined view, aggregating data from all items, depending on the application.
Structure
Header
The header displays the pane’s title, and may also contain:
a secondary title,
a thumbnail image (for example, an avatar),
a pin icon (see Interaction below),
a contextual help icon.
 |  |  |  |
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.
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.
Action Area (optional)
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.
Directly-related actions | Additional actions |
|---|---|
 |  |
Collapse/Expand Area
The collapse/expand area will appear only when the details pane is unpinned.
When shown, it will be located on the left side of the details pane.
An arrow is shown in the middle of it:
when expanded, the arrow will direct to the right.
when collapsed, the arrow will direct to the left.
Placement & Positioning
The details pane should:
stick to the right side of the page.
have a fixed width.
fill the vertical space to the bottom of the page.
The top of the details pane should start from either:
a few pixels beneath the VerinTop, to align with the top element in the header area, or
a few pixels beneath full-width header areas.
Where a Ribbon is 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).
Content
The content area may contain any combination of elements, such as text, lists, cards, tables, forms, graphs, links. etc.
Examples
 |  |  |
 |  |  |
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
The Pin Icon
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 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.
When unpinned, clicking anywhere outside the pane will close it.
Validations and Errors
The details pane itself does not require special validations.
For validations and errors related to content, see Field Validation.
Transitions
When the details pane is expanded from collapsed mode, the pane will slide from right to left.
When the details pane is collapsed, the pane will slide from left to right.
Best practices
Use:
Where items have a lot of related information that needs to be displayed.
Where there is a need to perform actions on sub-elements of items (e.g. cards).
Don’t use:
Where additional information is not related to the selected items. In this case, use a /wiki/spaces/UserExp/pages/2496694037.
Accessibility Compliance
Unless otherwise specified, see our general compliance information in Fundamentals - Accessibility.
Responsive Design
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.
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.
Pane height
There should be a gap between the details pane and the VerinTop, with a minimum space of 20px.
The top of the details pane should usually align to the top element on the page, such as the page header or search bar.
Where a Ribbon is 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.
The details pane should always reach to the bottom of the screen.
When the screen height (and therefore the details pane height) changes:
the pane header and tabs should not move.
the main content should remain fixed to the top of the pane.
an internal Scrollbar should be used if the content does not fit vertically.
if they exist, action buttons and additional information in the pane footer should remain fixed to the bottom.
Design
See some examples below:
Zeplin link | Screen thumbnail |
|---|---|
 | |
WFM |  |
WFM |  |
Form designer |  |
Code
