COMPONENTS

Search

Search allows users to enter a word or phrase to find relevant content.

search-intro
search-anatomy
  1. Input field
  2. Instant Search menu
  3. Clear field button

There are two key variations of search — header search and independent search. Either variation can be collapsed or open by default.

search-variations

The instant search menu is built using menu items. There are five core variations to use depending on the type of result being shown — section header, auto-completion, recent search, basic result, basic result with extra info and article result.

search-list-variations

Search inputs come in different states depending on how the user is interacting with it — enabled, hover, focus, active, and filled.

search-states

Search is available in three sizes — large, medium and small.

search-sizes

Use large sized components on mobile touch devices for optimized tap area. Be sure the user can interact with both the keyboard and the instant seach menu.

search-mobile-guidelines