Style Guide
Search…
Tabs
Tabs allow users to switch between different views.

Usage of Tabs

Tabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.

Anatomy of Tabs

Tabs allow users to view content without having to navigate away from that page. Good way to organize related content on a page.
1. Selected (a-text-h4)
font-weight: bold
font-size: 16px
font-color: text-black
padding-top: 16px
2. Unselected
font-weight: book
font-size: 16px
font-color: slate-dark
padding-top: 16px
padding-bottom: 18px
3. Indicator
color: blue-medium
max-width: 50%
max-height: 2px
padding-top: 16px
4. Divider Lines
a-divider-dark:
max-width: 375px (100%)
max-height: 1px
color: slate-medium-light
Top:
padding-bottom: 16px
Bottom:
padding-top: 17px
Copy link
On this page
Usage of Tabs
Anatomy of Tabs