Search Panel

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

General guidelines

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.

SearchPanel01
SearchPanel02

Variant

SearchPanel03
SearchPanel04
Best practices
  • The search panel is sticky at the top of the page.
  • Users can activate the panel by clicking on the magnifying glass icon in the Header.
  • With the tab bar you can choose in which part of the website or app you want to search information or content from.
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