Filter Panel

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

General guidelines

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.

Filter01
Filter02

Variant

A side filter refines results by enabling users to choose the type of content to be displayed on the screen.

 

Best practices
  • Keep filter labels concise and the content under each filter category consistent.
  • Don’t use a Filter panel if there are just a few filters to apply.
  • Use 6 category items maximum in a filter.
  • Don’t have too many filter categories.
FilterPanel03
Responsive behaviours
FilterPanel04
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