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)
1
font-weight: bold
2
font-size: 16px
3
font-color: text-black
4
5
padding-top: 16px
Copied!
2. Unselected
1
font-weight: book
2
font-size: 16px
3
font-color: slate-dark
4
5
padding-top: 16px
6
padding-bottom: 18px
Copied!
3. Indicator
1
color: blue-medium
2
max-width: 50%
3
max-height: 2px
4
5
padding-top: 16px
Copied!
4. Divider Lines
1
a-divider-dark:
2
max-width: 375px (100%)
3
max-height: 1px
4
color: slate-medium-light
5
6
Top:
7
padding-bottom: 16px
8
9
Bottom:
10
padding-top: 17px
Copied!