An on-page banner highlights a single message with a call to action button or link. Messaging may be critical, important or informational. The on-page banner has two options: 1-line the is centered with a secondary button or 2-lines left-aligned with a secondary button fixed to the far right column.

Usage

On-page banners are usually used envoke a specific CTA. They should be placed purposeful. They can not show up right underneath the header. Meaningful content needs placing between the header component and the on-page banner in order to be effective and not distract from other CTA’s on the page.

on page banner example desktop

QuickBooks
Accountant Screen

Fixed and flexible

Fixed
• Typesize Body 1, AvenirNext for Intuit, Color: White
• Banner background color: QuickBooks Green or Gray
• Recommended only one per page

Flexible
Center or left align, depending on impact

Appearance and behavior

grid

on_page_banner

The CTA will link to another page.

Do’s and Dont’s

Do’s
Repeated CTA that appears higher on the page and 
is lost when scrolling Screen-level messages display at the bottom of a 
 ‘Pricing’ sub-section and/or above the page 
 ‘Property Footer’

Don’ts
Do not use in the ‘Structural Section” of the page including:Header, Hero, On-page Nav, or Footer. Do not use at the top of the page or more than once on a page. A primary CTA button (green) on a green 
 background. Do not use a button and a link in one banner. There can only one CTA in the bar

Dont’s

Conent guidelines

Content is sentence case and limited to one or two line
Keep the message concise

Please refer to the Desktop tab for sub-section overview, copy guidelines, interaction rules and behaviors, 
when to use/when not to use.

on page banner tablet

Appearance and behavior

on_page_banner

Usage

• For phone version (screen width 320 > 768px, the content and CTA button is centered.
• Please refer to the Desktop tab for sub-section overview, copy guidelines, interaction rules and behaviors, when to use/when not to use.

on page banner mobile example

Appearance and behavior

on page banner mobile

  • Was this Helpful?
  •