| Table of Contents | ||
|---|---|---|
|
Description
The details pane is an area located on the right side of the page, presenting information and actions related items selected on the main area of the page.
Usage & Behavior
General guidelines
In case no items were selected, the details pane will show an empty state (see states below).
In case two or more items were selected, the pane will only show the number of selected items (see states below).
The details pane may have an option to pin to the side of the page, or unpinned (i.e., expanded by demand).
Structure
Header
The details panel may contain a header with the pane’s title.
The header may also contains:
a secondary title,
a Thumbnail image (for example: an avatar),
a pin icon (see interaction below),
a contextual help icon.
Tab Bar
Where relevant, the details pane will include a tab bar, containing between 2 and 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).
The content area (or any of the tabs) may include drill down options or links to other areas.
Action Area
Where relevant, an actions area will be shown at the bottom of the details pane, allowing users to perform high level actions.
Examples - buttons / dropdown menu?
Placement & Positioning
The details panel is attached the right side of the page (in LTR languages), and stretches from below the page header area to the bottom of the page.
When shown, the details pane has a fixed width.
Default State
When first entering the workspace the details pane should be pinned and expanded (if the resolution allows, see responsive design)
Content
The content area may contain any combination of text, lists, cards, tables, forms, graphs, etc.
In case the content area contains multiple items (for example, cards):
Each item may have its own set of actions.
The user may have the option to select multiple items, in order to perform additional actions.
Here are some examples of content used on the details pane:
States
State | Description | Example |
|---|---|---|
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 Ghost | When While details pane content is being loaded loading a corresponding animation should 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 do not require special validations.
For validations and errors related to possible content, see Field Validation.
Transitions
When the details pane is being expanded from collapsed mode, the transition will be a slide from right to left (RTL mode).
When the details pane is being collapsed, the transaction will be slide from left to right.
Best practices
Use:
Where there is a lot of information related to an item 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 a selected item. 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
