An information container that displays additional data for the content displayed in the main visual area.
This sidebar always enters the screen from the right side of the viewport. It pushes the container in large viewports and slides over the container in small viewports. It usually shows detailed information for an element, without requiring the user to navigate deeper. See responsive behavior for more details.
Below are two examples for the "Documents and Media" application:
The components used in the “Info Panel” can vary depending on the application. Following the same example used above, these images show the components used in the “Documents and Media” application:
The tag hierarchy is important in combination with a good content structure of headings, paragraphs and lists.
The sidebar adjusts to the maximum height of the viewport:
When a single item is selected, the item's information is displayed in the sidebar:
When multiple items are selected, the information of the item selected last is displayed in the sidebar:
If you deselect one item, the info of the next selected item in the list will be shown in the sidebar:
When there is more than one item selected, you can switch between each item's information using the previous and next carousel buttons at the top of the panel.
The examples below show the behavior of the “Info Panel” on different viewport sizes, based on the established breakpoints.
They also illustrate the grid of card's behavior on each viewport size, as well as the sidebar's behavior when it is visible at the same time as the “Product Menu”.
On viewport sizes less than 768px in width, the “Info Panel” slides over the container, instead of pushing it.