A Compact Solution for Related Information
Use Tabs components to give users an easy way to explore short chunks of related information.
Tabs save screen space and are easy to scan. Users can click on a tab's label to see it, and each tab loads to the same part of the screen. That makes them perfect for short, related bits of information.
Tabs can be added standard or full width.
Both Tabs and Accordions save screen space. However, they do so differently, and there are reasons to use one or the other.
Good Content for Tabs
Content that is a good candidate for adding using tabs meet the following criteria (which are, conveniently enough, an example of tabs in action).
- Easily Labeled
- Short
- Related
- Distinct
- Limited Number
- Simple
Don't make people scroll. They will lose the tabs at the top, which is confusing.
Keep each tab fairly short and easy to read.
If you have complex sections, accordions are likely a better option.
All the tabs should be related, with a single organizing theme.
If you couldn't easily explain how they are related, tabs may not be a good solution
People can only see what's on one tab at a time.
Users should be able to understand what's on each tab without flipping to another tab.
Accordions, which allow users to expand multiple entries, are a better choice if your users may need to compare or view different sections at the same time.
Stick to one row of tabs (5 - 6 tabs max).
If you need more, you may be better off using an accordion.
Tabs on our site only allow you to add:
- Headings
- Regular, bold, and italic text
- Links
- Lists
If you need to add things like tables or images, accordions are a better choice.
You can add a single tab (please don't) or several. To an new tab, click Add Tabbed Item. The fields are the same for all tabs.
Tab Options
Enter the label for the tab.
- Keep it short, 1 or 2 words.
- Clearly indicate what people will find if they click.
Enter the content for the tab.
Because of the layout and purpose of tabs, you have a limited set of WYSIWYG options.
You'll be able to add:
- Headings
- Regular, bold, and italic text
- Links
- Lists