Resources
On-Page navigation usage
The on-page nav is only used for heavy content pages. It allows the user to quickly switch between sections without leaving the page. The on-page nav sits right below the hero image.
When to use tabs
It is used to support quick access to deeper level content without scrolling the entire page
Use for level two navigation (anchor links) on Product pages
When a Product page has a minimum of three sections
When not to use tabs
As primary navigation
To navigate to another page
As a secondary navigation
Appearance and behavior
Provides a common navigational system that allows the user to access core product features
Text link become inactive when related section content appears (on state)
Becomes a ‘sticky’ header when page scrolls past the hero image
Hero CTA button appears only on the ‘sticky’ header state
Each section has equal padding (20px) at the beginning of the first word and end of the last word
Desktop Example (ON HOVER)
Desktop Example (STICKY STATE WITH GLOBAL NAV)
Font specs
Active label
Font: AvenirNext forIntuit, 16px/20px Demi (600)
Color: #393A3D
Inactive label
Font: AvenirNext forIntuit, 16px/20px Reg (400)
Color: #6B6C72
Padding specs
Label
Top: 20px
Left: 40px
Bottom: 20px
Right: 40px
Stroke specs
Stroke: solid 1px #D4D7DC
Elevation specs
Drop shadow
Color: #000000
Opacity: 10%
X: 0
Y: 4
Blur: 12
Spread: 0
Responsive behavior
