The Promo-banner in contrast to the On-page banner will announce critical promotions and sits on top of the page either above the navigation or right below. Clearly visible to catch the user immediate attention.


Promo banners are used for seasonal events such as the 4th of July, Thanks Giving or special campgains when we roll out a new feature or anew program benefiting out customers.

On page banner
below the header

On page banner
above the header.

Please be very thoughtful about the postion and content of the banner to create a clear call to action and not clutter.

Fixed and flexible

• Typesize Headline 3 or Body 1, Color: White
• Banner background color: QuickBooks Green or Gray

• Center or left align, depending on impact

Appearance and behavior

The CTA will link to another page.

Do’s and dont’s

• The Promobanner carries the highest CTA on the page, therfore the banner could potentially carry a different banner just as INTUIT blue to get the attention required.
• When adding a promo banner you are responsible for the hero image content to stay successful. Please eliminate extra changes in type size, and CTA’s. If you add the banner you potentially have to change the homepage banner.

• There can only be one promo banner on a page.
• This promo banner can only have one CTA
• Please don’t mix phone numbers and CTAe.

Copy guidelines

• Content is sentence case and limited to one line
• Keep the message concise, the CTA precise


Please refer to the Desktop tab for sub-section overview, copy guidelines, interaction rules and behaviors, 
when to use/when not to use. Just as in Desktop the banner can be used above the navigation or below.

Appearance and behavior


On small mobile devices, the content will stack. The homepage hero needs to be adjusted. The promo banner should not show up above the navigation,

Appearance and behavior

  • Created by
  • Last modified May 31, 2019 by
  • Was this Helpful?