The standalone search bar element is the minimum implementaton for a search form.
The placeholder text must indicate the scope of what will be searched.
Example
Code
Search banner
The search banner is used to prominently feature a search form on the page.
The search banner may be used on the body section of a webpage.
The background colour must either be light grey or light blue. Alternatively a background image with a transparent overlay may be used.
There must be an associated heading introducing the search.
An optional sub-heading may also be included to give additional context to the search.
Placeholder text should be used to indicate the recommended type of search query.
Example
News search
Search through our entire news archive
Code
News search
Search through our entire news archive
Search banner (light blue)
The search banner option with the light blue background applied. This is achieved by replacing the class search-bar__grey with search-bar__blue. This example does not include the optional sub heading.
Example
News search
Code
News search
Search banner (background image)
The search banner option with a background image applied. This is achieved by replacing the class search-bar__grey with search-bar__image and applying the background image as an inline style. A dark grey transparent overlay will be automatically applied.
The size of the background image must be 1905 × 362 pixels.
The main focus of this pattern is the search form so the background image shouldn't be overly complicated.
Multiple images must not be used (for example, to form a collage) as they are complicated.
Example
News search
Search through our entire news archive
Code
News search
Search through our entire news archive
Search banner (constrained)
It is also acceptable to constrain the search banner to a column layout.
This must follow the guidelines of the search banner option.
The width of the search banner column must be at least the same size as any other adjoining column.
Example
News search
Search through our entire news archive
Code
News search
Search through our entire news archive
Search banner with additional links
The search banner option can be extended to include additional supporting links, such as a link to an advanced search.
This must follow the guidelines of the search banner option.
The links must be associated with the search functionality.
A suitable heading should be used to introduce the list of links. This is visible to screen readers at all sizes and also functions as a collapsed menu toggle on smaller displays.
Additional links can be grouped into categories to limit the number that are initially shown. This is useful in situations where the links would otherwise wrap on to more than one line or some links warrant more importance than others.
The search banner option can also be extended to provide suggested search terms in the form of a list of tags.
This must follow the guidelines of the search banner option.
Placeholder text should be used to indicate the recommended type of search query and the usage of tags.
For this example, search 'St Andrews' to see how the tag buttons are displayed.
Example
News search
Search through our entire news archive
Code
News search
Search through our entire news archive
Search banner with tag buttons (light blue)
The search banner with tag buttons option with the light blue background applied. This is achieved by replacing the class search-bar__grey with search-bar__blue.
For this example, search 'St Andrews' to see how the tag buttons are displayed.
Example
News search
Search through our entire news archive
Code
News search
Search through our entire news archive
Search banner with results
The search banner can also be amended to include the results immediately rather than navigating to another page.
This must follow the guidelines of the search banner option.
Placeholder text should be used to indicate the recommended type of search query and that results will be shown.
The submit button must not be shown as the search form is automatically triggered as text is entered.
For this example, search the word 'english' to see how the results are displayed.
Example
Course search
Search for all the courses we offer
Code
Course search
Search for all the courses we offer
Search banner with results (light blue)
The search banner with results option with the light blue background applied. This is achieved by replacing the class search-bar__grey with search-bar__blue.
For this example, search the word 'english' to see how the results are displayed.
Example
Course search
Search for all the courses we offer
Code
Course search
Search for all the courses we offer
Inline search banner
The inline search banner may be used on the body section of a webpage.
The background colour must be light grey.
The inline search banner must not be used directly below the navigation bar pattern.
It is recommended that the inline search banner appears directly above the footer pattern if included on the main body of a webpage.
There must be an associated inline title introducing the search.
Placeholder text should be used to indicate the recommended type of search query.
The heading and sub-heading elements must not be used with this option.
Additional links must not be used with this option.