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.


Tabs group content into natural, manageable sets, i.e. account transactions/account details.


Short description

Tabs group content into natural, manageable sets, i.e. account transactions/account details. They make it easy to explore and switch between different views.

When and how to use it

Use it as a local navigation component. Each tab should contain content that is distinct from other tabs.



When the tabs overflows (exceeds) the width of the area available, all the tabs that can't fit are grouped into a list in a fold-out modal.


If there are only two tabs, size them both 50% of the width.

When there are more tabs, use the same behaviour as for desktop. When the tabs overflow the width, present the active tab and group all others into a list in a fold-out modal.

Do's and don'ts

  • Use to navigate between groups of content.
  • Try to keep the tabs in low numbers, preferably fewer than four.


  • Avoid using tabbed content within a tab.
  • Don't add an icon to enhance the understanding of a label.
  • Don't use tabs to toggle data or part of a form. Use Segmented Controls for this.
  • Don't use sub-headings under tab labels.


Tab labels are considered as both menu labels and sub-headings. Therefore:

  • Sub-headings should usually not be used under tabs.
  • Tab labels must be explicit in order to act as sub-headings themselves.

Upper and lower case

Don’t start each word in headings and labels with upper case. Only use upper case in:

  • The first letter of the first word
  • The first letter of proper names
  • Abbreviations

Common tab labels in overviews

On overviews, consequent and recognizable labels should be used for corresponding menu choices (tabs). These tab labels are common in overviews:

  • Value – presents details about the current holding.
  • Transactions (Eng) / Händelser (Swe) – shows upcoming, pending and historical transactions. To separate different types of transactions from each other, table labels may, in these cases, be used as sub-headings.
  • Details – shows details about the account or service, for example, connected services, interest rates, fees and preselected fund distribution. The details may also contain services such as changing the name of an account, unsubscribe to account statements or extend mortgage loans.

If applicable, the area is also included in the menu label (tab label), for example Loan details and Fund transactions.



  • Height: 48 px
  • Width: Depends on the tab labels, but try to have all the tabs in the same size. Min width: 96 px
  • Frame: 1 px
  • Margins to text: 16px



  • Background: White
  • Text: 16 px, regular, Grey 
  • Border: Grey 

Not active

  • Background: Transparent
  • Text: 16 px, regular, Dark blue 1
  • Border: Grey 400
  • Typography


  • White
  • Grey 400
  • Grey 800
  • Transparent
  • Dark blue 1

Page last updated


Was this helpful?