Filters results template

Use this filters/results template to rapidly create a search results or document listing page within your project

Design and usage

• The results page template follows existing organism structures from filter tags and results display toggle: Both these organisms will inherit their existing structures however, on mobile the 'Display As' part of the display toggle will not be shown as the results can only be stacked.

• The results themselves can be displayed in a number of ways:

  • The number of results displayed can be flexible; in the example we see 20/40/60/80 but this can be whatever is sensible for the requirements of the consuming project.
  • Results can be shown in a Grid or list view
• The template can use different components for the list/grid views, these include; *any components that can sit within a card

Grid view:

• Desktop: can use the 3 column card stacked 4 across width of the screen or the 4 column card stacked 3 across width of the screen
• Tablet: uses 4 column card stacked 2 across width of the screen
• Mobile: uses full width card stacked

List view:

• Desktop: uses minimum 9 column wide card stacked in 1 column
• Tablet: uses 8 column card stacked in 1 column
• Mobile: uses full width card stacked in 1 column

Pagination:

• Works as per existing pattern
• The number of pages decreases when the results display toggle is used to increase the number of displayed results

For detailed documentation on using and implementing this see the filter tags / results display documentation.