Search Box

In web page layout, header is the upper (top) part of the web page. It is definitely a strategic part of the page as the area which people see before scrolling the page in the first seconds of introduction to the website. Being somehow a sign of invitation, header should provide the core information about the digital product so that users could scan it in split seconds.
1. Design Guideline

A panel is typically used to provide supplemental information or form inputs that relate to your primary canvas.

The Search Box should take up 90% of the width of its parent container. In most cases, that would be the viewport or main stage of your application.

Search Box are broken into three horizontal sections: the header, body, and footer.

1. Header - Include the label for search main functionality. The label must be short and no more that 2 words.

2. Body - You need to give a clue to the user so that they know the format of the search box. It is possible to trigger a dropdown button as the user search and display the relevant content based on the user input in real time.

3. Footer - Icons are the standard indication for the search box button. In the example below, we use FontAwesome icon collection. The icons need to have a clear cut meaning behind it and match with the search functionality.

Example of Search Box with 3 column
Example of Search Box with 3 column, overlaped with website banner
2. Implementation Notes

No content has been added for this component.

3. Reference

No content has been added for this component.