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.
Basic Flow
The details panel can have two modes:
Pinned - the detail pane is expanded (see States below). The pane is shown next to the content of the page so nothing is hidden.
Unpinned - the details pane is collapsed (see States below), unless at least one item is selected. The pane overlays the main area of the page, hiding the content behind it.
In both modes, the pane can be collapsed and expanded using the collapse/expand bar on the left side of the pane (see below).
Usage & Behavior
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:
a combined view, aggregating data from all items, or
just the number of selected items (see States below).
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.
All tabs will be of the same width.
Long titles will be truncated, and a tooltip will appear on hover. Titles may not wrap onto multiple lines.
The Content Area
The main area of the details pane may contain various types of content. See Content for examples.
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.
Action Area (optional)
Where relevant, an actions area will be shown at the bottom of the details pane, allowing users to perform pane-level (or tab-level) actions.
The action area may include elements such as indicators, buttons, and drop-down menus.
Add image
The Collapse/Expand Bar (optional)
The collapse/expand bar is located on the left side of the details pane.
An arrow is shown in the middle of the bar:
when expanded, the arrow will direct to the right.
when collapsed, the arrow will direct to the left.
Placement & Positioning
The details pane is attached to the right side of the page.
The pane has a fixed width.
Pane height:
If the page contains a ribbon, the top side of the pane is attached to the bottom side of the ribbon. Otherwise, the pane starts a few pixels below the VerinTop, to align with the page title.
The pane always stretches to the bottom of the page.
Add image - see form designer
Default State
The default state of the details pane will be determined by each application separately.
Content
The content area may contain any combination of elements, such as text, lists, cards, tables, forms, graphs, and links.
The content area may contain multiple sub-elements, such as cards.
Examples
Update images
States
State | Description | Example |
|---|---|---|
Expanded |
|  |
Collapsed |
The only visible part of the details pane will be a narrow bar with an arrow pointing to the left. |  |
Empty State | When no items are selected, the details pane will present an empty state with guiding text, guiding actions, or a page summary. | (Rotem Avidan (Unlicensed) please update the empty state here) |
Loading Update image | While the details pane content is loading, a loading state will show, including a Progress Indicator for each of the containers. |  |
Interaction
The Pin Icon
Clicking the pin icon changes it between pinned and unpinned versions.
Clicking the icon when the pane is pinned will change it to unpinned mode.
If no items are selected in the main content area, the details pane is automatically collapsed.
If one or more items are selected in the main content area, the details pane will remain open and the content will expand to full width, being partially hidden by the pane.
Clicking the icon when the pane is unpinned will change it to pinned mode.
The main content area is narrowed to appear next to the pane, so nothing is hidden.
Pane is unpinned | Pane is pinned |
|---|---|
 |  |
The Collapse/Expand Bar
Hovering the collapse/expand bar switches it to hover state. (See States above).
When the pane is expanded, clicking the bar switches it to the collapsed state.
When the pane is collapsed, clicking the bar switches it to the expanded state.
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 transition will slide from right to left.
When the details pane is collapsed, the transition 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.
Design
See some examples below:
Zeplin link | Screen thumbnail |
|---|---|
 | |
WFM |  |
WFM |  |
Form designer |  |
Code
