Last updated: August 2017
Tabs are a great component to enable switching between grouped content, without having to navigate away from the page.
Colors for tabs are set based on the background color itself. The general rules are set out below. If there’s no background there’s a border on the bottom. White background? It retains the same colors but adjusts the spacing slightly. If it’s a blue background the color and active keyline change to white. Active states use bold text for extra emphasis.
Transparent background with a bottom border using the
borders color. Standard
link color, with standard
link hover color for hover and focus states.
White background, no bottom border and uses card shadow properties. Standard
link color, with standard link
hover color for hover and focus states.
blue but any primary color would follow similar rules, white links and uses card shadow properties.
Generally tabs will have a height of
44px and spacing between of
24px with a left alignment. However there are some other options for edge cases where by there maybe more tabs than expected so we’d want to tighten the space or the screen size is incredibly large and we would like to expand the spacing.
Beyond the standard views included above we also have certain variations that add to the capabilities of the tabs themselves.
In certain situations it’s advantageous to include a title and description for the link itself. A prime example of this is on the lobby with the contest type selector. Descriptions can wrap multiple lines if required.
Once space becomes an issue the ideal solution would be to drop off the descriptions and move to scrollable tabs as documented below or employ a dropdown selector.
This is used traditionally in place of a segmented controller and to navigate between a section like “Friends Mode”. Anymore than three tabs and scroll tabs would be an advisable choice. These “Equal Width” tabs tend to be used exclusively in small context areas.
In some situations there will be more tabs than the screen real estate can accommodate. A perfect example would be on player cards as the screen gets smaller. Instead of simply using a dropdown or mystery meat navigation we offer the ability to scroll along the tabs themselves. A good rule is if you have more than three tabs out of sight it’s worth re-evaluating the navigation as a whole to something other than tabs.
This example provides context of what the tabs would look like before the page is unable to accommodate them in the viewport.
In the relatively unlikely situation of resizing a desktop browser to small screen sizes we would still offer the ability to scroll but with the addition of a custom scroll bar. This is a concession and an edge-case we don’t foresee a lot of users hitting that could benefit from some future improvement.