The tab template offers a set of buttons used to categorize and separate out sections of content into different panes as well as to allow a user the ability to seamlessly and intuitively switch back and forth between respective sections.
Tabs minimize the usage of screen space, which improves the overall look, organization and functionality of the page.
Use a minimum of three tabs or a maximum of five.
Tab labels should not exceed two lines.
Use title case for tab labels.
Always use the ampersand (&) instead of “and” in accordion labels
Order your tabs logically and assign a short title for each.
Do not use tabs when they do not lend themselves to the content, such as when the information in all tabs needs to be presented in a sequential order or when information needs to be compared.
Do not use tabs if content should not be hidden until clicked on.
Embedded images can be used in a tab so long as they add value to the text and are used in a consistent way.
On mobile, tabs turn into accordions.