Search bar

The search bar is used to search pages of the University website.

Once a search term has been entered an additional 'clear' button is shown with a number of different behaviours:

• The default behavior is to clear the search input field - enabling a new search to be entered.
• This can be changed to resubmit the form with a blank search by adding the class clear-icon__resubmit to the clear button.
• This can be further changed to instead clear any suggested results by adding the class clear-icon__results to the clear button.

Options available

• Search bar
• Search with autocomplete
• Search banner
• Search banner (blue)
• Search banner (background image)
• Search banner (constrained)
• Search banner with additional links
• Search banner with additional grouped links
• Search banner with tag buttons
• Search banner with tag buttons (light blue)
• Search banner with results
• Search banner with results (light blue)
• Inline search banner

Search bar

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.

Search with autocomplete

Suggested search terms can be displayed as a user types keyterms. The basic autocomplete suggests a range of alternate search terms.

This example uses an autocomplete script that is linked to the University's main search service. For this example, start typing to see suggestions based on your entered text.

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.

Search banner (blue)

The search banner option with a 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.

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.

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.

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.
• If the number of links wrap on to more than one line consider condensing this list into groups using the search banner with additional grouped links option.

Search banner with additional grouped links

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.

Search banner with tag buttons

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.

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.

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.

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.

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.