Tabs divide content into meaningful sections that occupy less screen space.

The tabs component puts related content in a single container. The user can switch between different content areas by clicking on a tab.

If content inside the tabs must be compared to each other, or when information is better presented simultaneously, don't use tabs. It's annoying for your user to have to click back and forth.

Tabs are meant to contain easily digested information so only use them for content that is succinct such as lists, graphics, or one to two short paragraphs of text.

Tabs are only to be used for content that can be logically grouped together.

Example

Where you can use them

• Standard page.

How to use them

Do

• Use tabs in situations where you would like to provide users with a choice of what content to view.

Don't

• Don't use tabs for content that needs to be viewed at the same time.
• Don't use tabs for content that needs to be compared.
• Don't use tabs just to shorten your page.
• Don't use tabs for unrelated content.

Features

• Clickable headers presented side by side.
• Only 1 item can be opened at a time.
• Tab label width adjusts depending on number of tabs used.
• You can have between 2 and 4 tabs.
• Tabs become show/hides on a mobile phone.

Guidelines

• Titles should be short - up to 20 characters. Use plain English.
• Titles should be descriptive of the content in the pane so users can easily scan and decide.
• Avoid including many links within a pane as they will be difficult to find.
• Content within each pane should be around 100 words.
• Arrange tab labels in an order that makes sense for users.