The global header is an IDS component. The navigation contains elements that provide context and easy access to key functions throughout the site, and must be included at the top of every page. This convention provides a consistent user experience across all screens as well as the INTUIT ecosystem at large. The global navigation is only the top layer of the global header. The global header includes the secondary navigation as well as the jobs navigation.

Usage

QuickBooks Marketing
The header utilizes a call to action and the sign-in button.

Examples of diversity in headers

The header is flexible to accomodate different marketing and sales needs. Each item should be carefully concidered not to overload the bar.

 

CTA — The header allows to add one CTA.

 

800-number The header allows to display an 800-number. In general the recommendation is to move the number below the header in a separtae area for greater impact.

 

Functions The header allows to add functions such as search or shopping cart.

Fixed and flexible

Fixed

Logo (logomark size & treatment)
Consistent placement, sizing.

Header height
Keep header height at 60px across breakpoints

Resolution and breakpoints
Using approved IDS breakpoints (480, 768, 1024, 1200)

Hamburger glyph
20px height, 20 padding top and bottom

Hyperlink treatment
Consistent font size, and weight, and line height (regular, 16/20),
consistent behavior on roll over, selected

Sign-in button treatment and placement
Consistent width, height and vertical alignment

Spacing between links
40px

Hamburger menu treament
Section links will move in the hamburger menu as well as Sign In and other functional elements such as search.

Flexible

Content of the links and their destination

Functional elements of the header such as CTA’s, search functions, shopping cart, etc. are based on marketing needs and user experience.

Appearance and behavior

The structure of the header

The top header consists of four areas.

The logo, displaying either the Intuit logo or the logo of the business units.

The links, which lead to primary sections within site. The recommended number of section links is 3 — 4. 
There should never be more than 5.

The functional area for business units needs can be used for a call to action, a sales phone number, search or shopping cart.

The Intuit sign in demonstrates the unified sign in experience for the ecosystem.

The header supports 2 breakpoints on desktop.

Specifications

The measurements follow our typography and spacing guidelines. 
The header creates element level relationships such as button typography and sizes which will be extended through out the entire system.

Do’s and dont’s

Do’s
• Required on all screens
• For global level one and level two navigation

Do’s
• For navigation to content that resides within the core
architecture of the site.

Copy guidelines

• Links within the header are written in sentence case

• Links should be one or two words
• The words chosen should be unmistakable and as brief as possible

Usage

Please refer to the Desktop tab for sub-section overview, copy guidelines, interaction rules and behaviors, 
when to use/when not to use. Please be aware the navigation changes to a hamburger menu at this breakpoint.

Appearance and behavior

Specifications

Usage

Please refer to the Desktop tab for sub-section overview, copy guidelines, interaction rules and behaviors, 
when to use/when not to use. Please be aware the navigation changes to a hamburger menu at this breakpoint.

Appearance and behavior

  • Was this Helpful?
  •