Tabs

Tabs allow multiple pages of content to be housed in a single container. They are useful for organizing information in groups, and providing users with an easy way access to related content.

Apples, Bananas, Grapes and Papaya

Asparagus, Cauliflower, Celery and Kale

Bacon, Ham, Quail and Turkey

Specifications

Horizontal Tabs

Horizontal tabs are used to navigate views within a component, such as tables or data visualizations.

EXAMPLE

Apples, Bananas, Grapes and Papaya

Asparagus, Cauliflower, Celery and Kale

Bacon, Ham, Quail and Turkey

Anatomy

1) Icon (Optional)
font-face: Font Awesome 6 Pro Light
font-size: 20px
line-height: 20px
color: See States below

2) Title
style: H6
color: See States below

Title Mobile
font-size: 15px
line-height: 20px

3) Underline
border: see States below

4) Stroke
border: 1px solid
border-color: Gray 05

Size & Spacing

Tab

Group

STATES

Selected

TAB

Hover

TAB

Unselected

TAB

Text
style: H6
color: Teal Dark Active

Text
color: Gray 02

Icon (Optional)
color: Teal Dark Active

Icon (Optional)
color: Gray 02

Icon
color: Gray 02

Underline
border-bottom: 4px solid
border-color: Teal Dark Active

Underline
border-bottom: 1px solid
border-color: Gray 02

Hover Transition:
bottom-border: expands from mouse's direction, 0.2s ease

EXAMPLE

Apples, Bananas, Grapes and Papaya

Asparagus, Cauliflower, Celery and Kale

Bacon, Ham, Quail and Turkey

Anatomy

1) Icon (Optional)
font-face: Font Awesome 6 Pro Light
font-size: 20px
line-height: 20px
color: See States below

2a) Title
style: H6
color: See States below

2b) Title Mobile
font-size: 15px
line-height: 20px

3) Underline
border: see States below

4) Stroke
border: 1px solid
border-color: Gray 06
opacity: 50%

Size & Spacing

Tab

Group

STATES

Selected

TAB

Hover

TAB

Unselected

TAB

Text
font-face: Helvetica Now Text
style: H6
color: Gray 06

Textcolor: Gray 04

Icon
color: Gray 06

Icon
color: Gray 04

Underline
border-bottom: 4px solid
border-color: Gray 06

Underline
border-bottom: 1px solid
border-color: Gray 04

Hover Transition:
border-bottom: expands from mouse's direction, 0.2s ease

Underline
border-bottom: none

Button Tabs

Button tabs are an alternate option for horizontal tabs to show one set of content or another.

EXAMPLE

Anatomy

1) Button
background-color: none
border: see States below
border-radius: 4px (first tab left edges and last tab right edges only)

2) Text
style: Default Paragraph
color: See States below

Text Mobile
font-size: 15px

Size & Spacing

Tab size is relative to the tab title. Each tab should be equal width, with the width determined by the length of the longest title, plus 20px padding on either side.

STATES

Selected

Tab

Selected Hover

Tab

Unselected

Tab

Unselected Hover

Tab

Button
background-color: Teal Dark Active
border: none

Button
border-color: Teal Dark Hover

Hover Transition:
background-color: Transparent to Teal Dark Hover, 0.2s ease

Button
background-color: none
border: 1px solid
border-color: Teal Dark Hover

Button
background-color: Gray 06

Hover Transition:
background-color: Transparent to Gray 06, 0.2s ease

Text
color: Gray 06
text-decoration: none

Text
color: Gray 06
text-decoration: underline

Hover Transition:
bottom-border expands from the center, 0.2s ease

Text
color: Teal Dark Hover
text-decoration: none

Text
color: Teal Dark Active
text-decoration: underline
‍
Hover Transition:
bottom-border expands from the center, 0.2s ease

EXAMPLE

Anatomy

1) Buttonbackground-color: none
border: see States below
border-radius: 4px (first tab left edges and last tab right edges only)

2) Text
style: Default Paragraph
color: See States below

2) Text Mobile
font-size: 15px

Size & Spacing

Tab size is relative to the tab title. Each tab should be equal width, with the width determined by the length of the longest title, plus 20px padding on either side.

STATES

Selected

Tab

Selected Hover

Tab

Unselected

Tab

Unselected Hover

Tab

Buttonbackground-color: Gray 06
border: none
‍

Button
background-color: Gray 06

Buttonbackground-color: none
border: 1px solid
border-color: Gray 06

Button
background-color: Gray 05
‍
Hover Transition:
background-color: Transparent to Gray 05, 0.2s ease

Textcolor: Navy
text-decoration: none

Text
color: Navy
text-decoration: underline

Hover Transition:
bottom-border: expands from the center, 0.2s ease

Textcolor: Gray 06
text-decoration: none

Texttext-decoration: underline

Hover Transition:
bottom-border: expands from the center, 0.2s ease

Vertical Tabs

Vertical tabs are used for contextual navigation within a page section.

EXAMPLE

Anatomy

1) Border
border-left: see States below

2) Text
font-face: Helvetica Now Text
font-weight: See States below
font-size: 18px
line-height: 28px
color: See States below

Text Mobile
font-size: 15px
line-height: 20px

Size & Spacing

STATES

Selected

Tab

Hover

Tab

Unselected

Tab

Text
font-weight: 700
color: Teal Dark Active

Text
font-weight: 300
color: Navy

Text
Same as Hover

Border
border-left: 4px solid
border-color: Teal Dark Active

Border
border-left: 1px solid
border-color: Gray 03

Hover Transition:
border-left: expands from mouse's direction, 0.2s ease

Border
border-left: none

EXAMPLE

Anatomy

1) Border
border-left: see States below

2) Text
font-face: Helvetica Now Text
font-weight: See States below
font-size: 18px
line-height: 28px
color: See States below
Text Mobile
font-size: 15px
line-height: 20px