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.

Tab navigation

Tab navigation lets users to explore and switch between different content in our channels.

Guidelines

Short description

The tab navigation is tied to the main navigation structure and organises the content. 

When and how to use it?

Use the tab navigation organise groups of content at the same level of hierarchy. Each tab should contain content that is distinct from other tabs.

Behaviour

The tabs have the same design and functionality in all devices. If there are too many tabs for the page, there will be a horizontal scrolling in the tab navigation area. A white shadow will appear which makes it look like it's fading out to the side. You can swipe the navigation to see more tabs.

Desktop

Desktop

Tablet

Tablet

Mobile

Mobile

Do's and don'ts

  • Use tab navigations to navigate between groups of content.
  • Try to kep the number of tabs low, preferably fewer than four.
  • Summarize the content in a good way, ask a copywriter for advice.
  • Don't add an icon to enhance the understanding of a label.
  • Don't use sub-headings under tab labels.

Examples

Desktop

Desktop example

Tablet

Tablet example

Mobile

Mobile example

 

Specification

Measurements

  • Height: 48 px
  • Width: No min. or max. width
  • Underline: 4 px
  • Margins to text: 16 px

 

States

Normal

  • Background: Transparent
  • Text: 16 px, regular, Primary (Base 800)
Hover

  • Background: Transparent
  • Text: 16 px, regular, Primary (Base 800)
  • Underline: Green
Focus

  • Background: Transparent
  • Text: 16 px, regular, Primary (Base 800)
  • Border: Focus Shadow (Blue)
Active

  • Background: Transparent
  • Text: 16 px, medium, Primary (Base 800)
  • Underline: Dark Green 2

 

Colours

  • Green
  • Dark green 2
  • Grey 800
  • Blue

Page last updated

Feedback

Was this helpful?