Tabs
About this component
Tabs are a great way to display large amounts of information in a way that doesn’t overwhelm users. They are best for displaying sequential content, or content for related subjects (such as campuses). The number of tabs is limited by their length – they shouldn’t wrap to a second line.
Styling
Tabs are turquoise and look like folder tabs. The current tab is slightly darker and taller than the inactive tabs.
Responsive behavior for Tabs
Each tab will be on its own line, with a “plus” icon to indicate you can open/expand the information. By default, the first tab is open when the page loads on phones. The tabs then behave like an accordion, where each tab’s content opens below the corresponding heading. Only one tab can be open at a time, so if another is opened the previous tab will close.
Try to avoid tabs that switch to this small-screen layout all large and on most medium screens.
How to use for Tabs
Learn how to use tabs in WordPress. More information is available in our style guide on the tabs pages.
Example of Tabs
Tab heading 1
Content for tab 1.
Tab heading 2
Content for tab 2.
Tab heading 3
Content for tab 3.