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
