Style Guide


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
max-width: 375px (100%)
max-height: 1px
color: slate-medium-light
padding-bottom: 16px
padding-top: 17px