Tab 1 text goes here.
Tab guidelines
Use these guidelines to add the tabs component to your web pages.
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
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.
How-to guides
Learn how to add tabs to your page using our guides:
