Tabs

Tab Styles & Usage

Overview

Tabs can be used to quickly navigate between views of the same context or as navigational elements within page views.

Basic Structure

tabs imagery
  1. Active Tab

    Active Tabs are indicated by using the font color and decorating with an underline that has a height of 4px

  2. Inactive Tabs

    Inactive tabs are characterized removing the underline and using our font accent color

  3. Underline

    The solid underline is required for active and hover states. Only the top left and right corners are fully rounded when placed upon an edge or horizontal rule. If the tabs are floating without a horizontal rule or edge below, all four corners should be fully rounded.

Examples

With bottom edge


Floating

With Overflow