| Table of Contents | ||
|---|---|---|
|
...
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)
...
State | Description | Example |
|---|---|---|
Collapsed | The only visible part of the pane is the collapse/expand area, allowing users to expand it. |  |
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. |  |
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. |  |
...