Search, Filter & Sort

The search rendering contains a number of components for entering search terms, displaying results, and refining results to help users quickly find resources within a given site.

What's Included In This Rendering?

Component overview

LARGE & MEDIUM GLASS

SMALL GLASS

A: Results header

Required.

The results header is composed of a subheading (link opens in new window) eyebrow and a heading (link opens in new window) displaying the number of results returned by the search. The search term is bolded.

B: Search bar

Optional.

The search bar allows users to perform another search if the initial term did not return the desired results. Also note that the button in this case is unique in that the internal text becomes a magnifying glass icon when it reduces in size for small glass. View input field (link opens in new window) and button (link opens in new window) styles for more information on presentation.

NOTE: This component can also be used independently within any page with a custom field label. Entering a search term into the bar on a separate page will then direct a user to a full search page, as shown in the complete rendering above.

C: Refiner

Optional.

If refinement terms are available, the refiner may appear, allowing the user to further pare down results based on a variety of categories. This panel is collapsible in small glass.

Refiner may have one or many filter categories.

When the user checks one or many filter options available in the Refiner, results that satisfy all the checked filters will now appear in the results area.

There is also an option to ‘Clear all filters’ which unchecks all filters and all search results are now displayed.

D: Sort by

Optional.

If sort categories are available, they will appear as a row of tertiary links. They can be used in conjunction with the refinement tools (C).

This is a sorting capability on the search results. Refined results/ all results can be sorted based on the available categories.

E: Results

Required.

The results display a series of pages returned by the entered search term. The default number of results per page is 10, but this can be adjusted through the pagination component (F). For more information on styling, review the body copy and link (link opens in new window) standards.

F: Pagination

Required.

Pagination allows users to change the number of results displayed per page and cycle through multiple pages of results. View pagination (link opens in new window) standards for more information.

How Can I Use This Rendering?