Internet Explorer is not supported by Design Library

The last version of Internet Explorer, version 11, was released on October 17, 2013. This is a very long time ago when taking into account the rapid development of web technologies. These days it is often difficult and time consuming to get modern technologies to work well in this old browser. More and more frameworks are dropping support, and even Microsoft themselves has announced that they will fully drop support for IE in their own services in 2021.

Consequently, we have decided to not include support for IE in the Design Library website.

Luckily, there are modern options in active development. Please use Firefox, Edge or Chrome instead.


The filtering pattern allows users to narrow down specific data and its scope.

Filter pattern


Short description

The filter pattern enables the user to further specify a query as filters are applied to large data. The pattern can include different components to customise the view.

 Slide-out for the filter pattern on desktop

Slide-out for the filter pattern on desktop

When and how to use it

The filter pattern is useful where a lot of data is presented in order to present relevant information by narrowing down big volumes of data. With predetermined options the user’s query can easily be presented using the filter pattern. A good example is in connection to a search field to enable the user to precise a query.

Related features and components

Related feature: Save filter

The filter pattern offers optional features such as “Save filter”. Saved filter is shown as a separate tab next to the filter tab in the slide-out. This feature is good to include in the filter pattern when the user frequently wants to reuse a combination of filter tags. When the user has added a filter to saved filters, the user can easily reuse the saved filter.

Step-by-step example of how “Save filter” can be used

Step-by-step example of how “Save filter” can be used


When the user has no saved filter, the dropdown for saved filters is not shown until a saved filter is created.

Without dropdown for saved filters when there are no saved filters

Without dropdown for saved filters when there are no saved filters

With dropdown for saved filters when there is at least one saved filter

With dropdown for saved filters when there is at least one saved filter


Related component: Filter tag

A filter chip is a component used to display a property in an intuitive and easy way. When including the filter tags, include the chips component for the user to easily see what choices were made.

Related component: Chips

The chips component displays a chosen property (filter tag). Chips enables the user to remove the property directly in the current view for a smoother usage.


The filter pattern and its content can differ depending on the context (see Related to).

Do's and don'ts

  • Use a slide-out for filter application.
  • Provide relevant predetermined options, customised with relevant components. Consider which categories and options are necessary? Which components are optimal for each category?
  • Allow multiple selections.
  • If a customer only has one choice within a category, no choice needs to be made. Therefore, the category can be excluded from the filter.
  • Use too many options per filter category, consider the section expander component if necessary. See example below.

Above: Example of how to use the section expander

Related article




For size specification for components, see related components.

Page last updated


Was this helpful?