...

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 panel can have two modes:

  • Collapsed

  • Expanded - pinned

  • Expanded - unpinned

  Pinned - by default the detail pane is expanded

  pane has three basic states (see States below)

  , and he

  :

  • collapsed,

  • expanded, pinned - the pane is shown next to the main content of the page area, so nothing is hidden.,

  • Unpinned expanded, unpinned - by default the details pane is collapsed (see States below) 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

• 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,

  or just the number of selected items (see States below)

  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.

• All tabs will be of the same width.

• Titles will not wrap onto multiple lines. Long titles will be truncated, and a tooltip will appear on hover.

...

• The main area of the details pane may contain various types of content . See Content for examples(see Content below).

• If the content exceeds the height of its container, a Scrollbar scrollbar will appear. The scrollbar will apply only to the content area, excluding the header and the action area, if exists.

...

• 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.

...

Collapse/Expand Area (optional)

• The collapse/expand area is located on the left side of the details pane.

• An arrow is shown in the middle of the areait:

  • when expanded, the arrow will direct to the right.

  • when collapsed, the arrow will direct to the left.

...

• The details pane is attached to the right side of the page.

• The pane has a fixed width.

• The pane will starts a few pixels below the VerinTop, to align with the page title. However, If the page contains a ribbon, the details pane will be attached to it (see example at the description above).

• The pane will always stretches stretch to the bottom of the page.

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, links. etc.

Examples

	Image TBD - see https://zpl.io/2EnwnZg	Image TBD - see https://zpl.io/adljR0K

States

State	Description	Example
Collapsed	The only visible part of the pane is the collapse/expand area, allowing users to expand it.	Image Added
Expanded	See basic flow	Image Removed
Collapsed	See basic flow	Image Removed
, 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.	Image Added
Empty State	When no items are selected, the details pane will present an empty state with guiding text, guiding actions, or a page summary.	Images to be updated - see https://zpl.io/V1ElrR5
Loading	While the content is loading, a loading state will show, including a progress Indicator.

...

• Clicking the pin icon will switch between its state from pinned to unpinned and unpinned states.

• 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

...

• vice versa:

• When unpinned, clicking the icon will switch the pane to expanded, pinned state (see States above).

• When pinned, clicking the icon will switch the pane to expanded, unpinned state (see States above).

When the pane is unpinned	When the pane is pinned

The Collapse/Expand Area

...