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
