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.

Filter tag

The filter tag component displays possible options for the user to choose between, for example in a filter.

Guidelines

Short description

The filter tag is a way to explicit show what options the user has to choose between within a category.

Above: Slide-out for the filter pattern, including the filter tags component.

When and how to use it

Filter tags can be based on what the user needs. For example, if a filter pattern is being used related to accounts and the user has accounts in three countries. The user only needs those three options as filter tags. If the user only has accounts in one country, the filter tag category for countries is not needed.

Above: Example of how filter tags can be used

If the category includes a variety of filter tags, a section expander is good to consider. See example below. Usage of the section expander depends on the context. Consider how much size there is available, rather than how many filter tags are displayed.

Above: Example of section expander in combination with filter tags

Related component: Chips

When including the filter tags, include the chips component for the user to easily see what choices was made. As the chips component is being displayed, the user can remove the property for a more smooth usage.

 

Do’s and don’ts

  • Use a slide-out for filter application
  • Provide relevant predetermined options
  • Allow multiple selections
  • Make it easy to see and deselect a filter with the chips component
  • Don't use too many options per filter category, consider the accordion component if necessary

 

Related

Article

Specification

Measurements

  • Height: 2 rem
  • Distance from text to side: 0.5 rem
  • Distance between two filter tags: 0.5 rem

For size specification for components used in the filter component: Slide-outTabChipsSection expanderDate picker, form components.

 

Typography

  • Font: SEB Sans Serif Medium, 16px

 

States

  • Normal text: Grey 800
  • Normal background: Grey 600
  • Background: Transparent with 1 px border
  • Hover background: blue
  • Pressed state text: Dark blue 2
  • Pressed state, background: Dark blue 2
  • Focus state shadow: Blue shadow X:0, Y:0, Blur:4, Spread:1

 

  • Blue
  • Dark blue 2
  • Grey 600
  • Grey 800

1 rem = 16px

Page last updated

Feedback

Was this helpful?