...

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 pane has three basic states (see States below):

  • collapsed,

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

• The default state will be determined for each application separately.

...

• The collapse/expand area will appear only when the details pane is unpinned.

• When shown, it will be located on the left side of the details pane.

• An arrow is shown in the middle of it:

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

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

Placement & Positioning

The

...

details pane should:

• stick to the right side of the page.

• The pane has have a fixed width.

• fill the vertical space to the bottom of the page.

The

...

top of the details pane should start from either:

• a few pixels below beneath 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 stretch to the bottom of the page.

...

• top element in the header area, or

• a few pixels beneath full-width header areas.

Where a Ribbon is used, the height of the details pane should reduce when the ribbon is expanded. The top of the pane should align to the bottom of the ribbon. (See example image in the Description).

...

Content

• The content area may contain any combination of elements, such as text, lists, cards, tables, forms, graphs, links. etc.

...