Description
The details pane is a panel located on the right side of the page, presenting information and actions related to selected items on the main area.
Basic Flow
The details pane can have two modes: pinned and unpinned (optional).
When pinned, the detail pane is expanded (see states below). In this case, the content of the main area is shown entirely so nothing is hidden.
When unpinned, the details pane is collapsed (see states below), unless at least one item is selected. In this case, the pane overlays the main area, hiding the content behind it.
In any case, users can collapse and expand the details pane using the collapse/expand bar on the left side of the pane.
Usage & Behavior
General guidelines
In case no items are selected, the details pane will show an empty state (see states below).
In case 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 details pane’s header displays its title.
The header may also contain:
a secondary title,
a thumbnail image (for example: an avatar),
a pin icon (see interaction below),
a contextual help icon.
Tabs
Where relevant, the details pane will include between 2 to 5 tabs.
All tabs will be of the same width. Long titles will be truncated. In this case, a tooltip will appear on hover.
The Content Area
The main area of the details pane (or any of the tabs) may contain various types of content (see content below).
If the content exceed the height of its container, a scroll bar will appear. The scroll bar will apply only to the content area, excluding the header and the action area, if exists (see below).
Action Area
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 indicators, buttons, dropdown menus etc.
Add image
The Collapse/Expand Bar (optional)
If exists, the collapse/expand bar is located on the left side of the pane.
An arrow is shown In the middle of the bar: when expanded, the arrow will directs to the right and when collapsed it will direct to the left.
Placement & Positioning
The details pane is attached the right side of the page (in LTR languages) and has a fixed width.
If the page contains a ribbon, the top side of the pane is attached to the bottom side of the ribbon. If not, the pane starts a few pixels below the VerinTop, to align with the page title. In both cases, the pane stretches all the way to the bottom of the page.
Add image
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, including text, lists, cards, tables, forms, graphs, links etc.
The content area may contain multiple sub-elements (for example, cards).
Examples
Update images
States
State | Description | Example |
|---|---|---|
Expanded |
|  |
Collapsed | In case the details pane is unpinned and no items are selected, the only visible part of it will be a narrow bar with an arrow pointing to the left. |  |
Empty State | In case no items are selected, the details pane will present an empty state with guiding text or actions, and/or page summary. | (Rotem Avidan (Unlicensed) please update the empty state here) |
Loading | While the details pane content is loading, a loading state will show, including a progress indicator for each of the containers. |  |
Interaction
Clicking the pin icon:
Switches the icon between pinned and unpinned states.
Hovering the collapse/expand bar switches to hover state.
When expanded, clicking the collapse/expand bar switches to collapsed state.
When collapsed, clicking the collapse/expand bar switched to expanded state.
mouseover the collapse/expand bar clicking unpinned, the content of the page stretches to its full width, being partially hidden by the content panel. In this case:
Clicking anywhere on the bar opens the details pane in an overlay, hiding the content behind it.
When pinned, the content of the page narrows to be shown next to the panel, so nothing is hidden.
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 there is a lot of information related to items that need 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
