Tabbed Panels
Last updated: September 10, 2015 at 21:06 pm

Colors and styling for tabbed browsing, when a module requires it.


Visual example of the element:


What problem does this element or pattern solve?
As an alternative to the show/hide functionality of the accordion, tabs provide a familiar navigation method for users that allows for quick comparison between the content under different tabs. It also does not require scrolling down to the next level of an accordion, and therefore may work better under certain circumstances, depending on content and page length restrictions.
It applies to these platforms:

Desktop Web, Tablet Web, Smartphone Web

An example of this element or pattern in production:


Detailed specifications

Specifications To Consider

  • Be sure to include when to use Tabbed Panels over Accordions or other types of show-hide interactions.
  • Define any restrictions on the tab titles. Is there a maximum character count? Can tab titles be two or more lines?
  • The visual styling for the tabs. Are they a width a fixed size or dependent up the width of the entire panel? Is there spacing between them? Do they have rounded corners?
  • Define the visual styling for the panel’s main content areas. Typography specs, background colors, borders, shadows, etc.
  • Is there a recommended size or a maximum amount of content permitted within each panel?
  • Carefully define responsive behaviors, as the presentation of tabbed panel content can be problematic on smaller screens.


Location of assets to build this element or pattern
Location of UX or visual design assets
Location of development code repository


Additional details
Information on research, user testing, or usability reports:

Not Applicable (Remember: no field should be blank!)

This element or pattern may also be known as:
tabbed panels, tabbed navigation, tabbed boxes
Related elements within this Style Framework:

Not Applicable (Remember: no field should be blank!)



Owners and governance
UX or design 0wner
John Designowner
Email: design.owner@yourcompany.com
Business or marketing owner
Mary Businessowner
Email: business.owner@yourcompany.com
Development owner
Mike Devowner
Email: development.owner@yourcompany.com


Other information
Please include any other relevant information about this element or pattern:
Not Applicable (Remember: no field should be blank!)


Comments & Questions

Leave a Reply