The “Comp Chart – 2 columns” component is a table contains a list of items displayed in rows, where each item is represented by a dot. Depending on the purpose of the list, each row may also be accompanied by a control (expand/collapse). Tables provide users with a legible format for sets of information, which can include text or numeric data (see comp chart -price). Consistent table treatment helps users to comprehend information across screens and site sections. Text in tables should be concise to ensure readability and protect the presentation of the data within the grid.

Usage

Comp charts are used in main website as well as landing pages. Comp charts need to be organized in the same way and list features in the same matter in order for the customer to orient themselves easily and allow them to compare between products.

Fixed and flexible

Fixed
• The dots indicating the availabiliy
• Type sizes
• The colors
• Same features should always be described the same
to ensure easy orientation and absorption

Flexible

Appearance and behavior

Columns within tables are differentiated from QuickBooks online and Desktop by color and label; QuickBooks Green for QuickBooks online, and Intuit Blue for Desktop. Tables include column headers and may include a footer. Column headers use the center alignment as the content within the column. When multiple tables appear on the same screen, their fields should align vertically.

Do’s and dont’s

Do’s
• Add and substract features as needed

Do’s
• Don’t change the typesize within a breakpoint
• Do not randomly adjust the order of the features.

Copy guidelines

• Body 1 optional section subhead is sentence case and limited to one line
• Body 2 sentence case and limited to three lines max.
• Keep the feature description concise

Usage

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

Appearance and behavior

Usage

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,

  • Was this Helpful?
  •