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