Nets Design logo and other specific symbols

Tab Containers

Tabs help you organize content by grouping similar information under a single container, showing and hiding it keeps related content in a single container that is shown and hidden via navigation.

Guidelines

Using tabs, you can enable content organization at a higher level, switching between groups of content such as data sets, views or any other functional aspects of your digital product. Below you will find some basic guidelines for design:

  1. Tabs should be organized in a single row, above the content they associate with.
  2. The labels must me written clear and succinct, as to indicate the content contained within.
  3. Labels may include icons and text. Avoid using icons not accompanied by labels, under the risk that it can make the content of your tab unclear for the users.
  4. Tabs are not to be used as a menu for your site, for navigating to different pages or areas with different content. Instead, consider a header menu or vertical navigation for that purpose.

Tab container variations

Bordereless tab container

Nets tabs image

Bordered tab container - with icons

Nets tabs image

Bordered tab container - option 2

Nets tabs image

Tab container states

Default

Nets tabs image

Hover on item two

Nets tabs image

Default

Nets tabs image

Hover on item two

Nets tabs image

Default

Nets tabs image

Hover on item two

Nets tabs image