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.
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 combimation or just the number of selected items (see states below).
The details pane may have an option to pin to the side of the page
Structure
Header
The details panel contains a header with the pane’s 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 and a tooltip will appear on hover.
The Content Area
The details pane (or any tab) content area 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 to the content area only, 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 tab level actions.
Examples - buttons / dropdown menu?
Placement & Positioning
The details pane is attached the right side of the page (in LTR languages), and stretches from below the page header to the bottom of the page. Add ribbon / no ribbon
The details pane has a fixed width.
Default State
The default state of the details pane will be determined for each application separately.
Content
The content area may contain any combination of text, lists, cards, tables, forms, graphs, links etc.
The content area may contain multiple items (for example, cards).
Examples
States
State | Description | Example |
|---|---|---|
Expanded | ||
Collapsed |
| |
Empty State | In case no items are selected, the details pane can present an empty state with guiding text or actions, and/or page summary. | (Rotem Avidan (Unlicensed) please update the empty state here) |
Loading | While details pane content is loading a corresponding animation will be presented. |  |
The Collapse/Expand bar
State | Collapsed details pane | Expanded details pane |
Hover |  |  |
Interaction
Clicking the pin icon switches the icon between pinned and unpinned states.
When 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
