1. Home
  2. Design System
  3. Components
  4. Site Search

Site Search

Site search allows users to search for specific content within the website they’re on.

The visual design is slightly different for wide and narrow screens.

Where it displays:

  • In the header at the top of every page.
  • At the top of the search results page.

Required or optional: Required

Example

Wide screens

An example of the search box on a wide screen

 

An example of the site search box with a magnifying glass icon, spanning across the page above search results.

Medium screens

An example of the site search box with a magnifying glass icon, at the bottom of a navigation bar overlaying the content on the right side of the website.

 

An example of the site search box with a magnifying glass icon, on a medium-width screen above the search results.

Narrow screens

An example of the site search box with a magnifying glass icon, at the bottom of a navigation bar on the right side of the website, overlaying more than half of the site content.

 

An example of the site search box with a magnifying glass icon, across the full width of a narrow-width screen, below the site logo and above the search results.
Date Last Reviewed: