A panel is a container element that represents a section of the interface.

General guidelines

A Panel is a large section of the interface displayed on top of everything. Use screen ratios to define the size (one third, two third or full screen) or the layout columns. Panels are always positioned on the left, right, top or bottom of the screen.

It can contain a large number of components including navigation links, all kind of form controls, Icon, Heading, Button etc. 

Consider using an overlay to lock interactions on the rest of the screen and to highlight the panel, like on modals.

It’s important to use the right panel according to the Header of your interface (Blue, White or transparent)


Best practices

  • Use it to display contextual information (Help Center, Navigation Panel etc.).
  • To display a large number of filters.
  • To display a side navigation.
  • For full screen search engines with autocomplete.
Navigation panel

The Navigation Panel should always be displayed on the left of the screen. The navigation levels should not exceed more than 3 levels. If you need a deeper navigation, consider using button groups or tabs inside your page to split the content in different categories. On Desktop, the navigation panel should always be visible, the use of an hamburger icon is not allowed.

Search panel

The Search Panel should be used for global research on the app. Users can activate the panel by clicking on the magnifying glass icon in the Header.

When the Panel is active, consider using an overlay to highlight the component and emphasize interactions on it.

Filter panel

Large sections of filters should be displayed in a Panel. The component can be expanded and collapsed, like an accordion. We recommend to display not more that 6 filters to avoid to much cognitive workload onthe screen. If you need more filters, consider using the « View more / View less » feature with an idication on the number of filters available when the panel will be expanded.

Help Center

The Help Center is an example of a Panel that should be displayed on the right of the screen, it’s height should be equal to the height of the screen.It is supposed to give contextual help on the screen for the user. The user should be able to scroll inside if there is too much content.

Code & Design assets

Request code and design assets for creating user interfaces.

Component overview

Component overview

Can I contribute to the System?

Of course! Your contribution is more than welcomed and the System team will always be here to review your contributions or discuss.

Back to top