Tabs Styles and Usage
Tabs can be used to quickly navigate between views of the same context or as navigational elements within page views.
Active Tabs are indicated by using a solid color with 100% opacity and a underline that is 2px high
The solid underline is required for active and hover states
Inactive tabs are characterized by dropping their opacity to 60%.
Icons are optional and not required. Their color should be the same as the text color for the state they are in.
Tabs are great for organizing like data and views. Here are some examples of them being used in our products
Here we use tabs as navigational elements to switch between different account management pages.
On our mobile views we use tabs to switch quickly between related content without having to navigate to a new screen.