Tabs separate content into panes so users can easily access additional related content without scrolling down the page.

Resources

When to use horizontal tabs

Use tabs to organize content into selectable buckets. Like a file folder in a drawer, tabs are scannable to quickly highlight information a customer might want. The customer can access further content without having to scroll a full page nor opening a new page.

Please consider these parameters:

Use tabs when content is closely related, but mutually exclusive

Use tabs when it is not important to see more than one content pane at a time

It is recommended that tabs are used on a white background

When not to use tabs

Key features, benefits, or pricing that affects buying decisions or understanding the function of a product should be on the main page, not a in a tab

Do not use tabs when there are less than 3 tabs

Tabs cannot be used as a comparison chart

Minimize instances of tabs used on a single page to no more than two

Appearance and behavior

When a user selects a tab, the related content appears. That content should be unique and independent from other tabs.

Use tabs when content is closely related, but mutually exclusive

Content in tabs should be supportive of the main product; key benefits and features should be on the main page

Use tabs when it is not important to see more than one content pane at a time

It is recommended that tabs are used on a white background

 

Desktop Example (Single Line)

Desktop Example (Multiple Lines)

Font specs

Label
Font: AvenirNext forIntuit, 20px/28px Med (500)
Color: #393A3D


Padding specs


Active Label & Labels
Top: 20px
Left: 20px (40px combined)
Bottom: 20px
Right: 20px (40px combined)

Border specs


Active state
Border: solid 4px #2CA01C
Border-radius: 4px


Divider line
Border: solid 2px #E3E5E8

Motion and animation

The Standard Accordion has some delightful micro animations that are displayed when opening and closing an accordion.

motion prototype

Content guidelines

Coming soon…

Responsive behavior

  • Was this Helpful?
  •