Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

The tab template allows sections of content, separated separates related content into different panes as well as to allow a that are viewable one at a time when the respective tab is clicked. The template groups and presents different aspects of content that are closely related and provides the 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. Accordion view is recommended when more than five sections are required.

  • Tab labels should be short and not exceed two lines.

  • Use Always use title case for tab labels (first letter of each word is capitalized, except for small words).

  • 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 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.

  • Inline images can be used in a tab so long as they add value to the text and are used in a consistent way.

  • Note that on mobile, tabs are displayed as accordions.

...