Cards

Usage

We use Post-it notes and cards in the real world all the time. People can quickly read and understand the content there. Similarly, cards in QuickBooks show content that users can scan and interact with quickly. Cards also look good on small screens, so they help us make sure customer information and insights are useful and actionable on any device.

When to use cards, containers, and tables

Use cards when users might interact with the content. We need to group and present variable, transient content that users might want to interact with. We know the user is more likely to search through or explore the content, instead of just scanning. We don’t need to emphasize the order of the content (tables organize and order content better).

 

Use containers when users will simply view the content. We want to group and present static content without interaction (or with just limited interaction). We know the user is more likely to scan the content, instead of searching or exploring. We don’t need to emphasize the order of the content (tables organize and order content better).

 

Use tables when users probably will interact with the content, sorting and organizing the rows and tables as needed. The user wants to reorganize, compare, or sort data. We know the user is more likely to search and explore the data, instead of just browsing. The order of the content is important.

 

Types of cards

Discovery and first-time-use cards To help first-time users and others discover additional features and capabilities of the product, we present these discovery cards. They’re a starting point for a task, alert, or feature. The call to action takes the user somewhere else in the product. We present this card when the discovery element is not associated with an existing insight. See content guidelines for discovery / FTU cards

Carousel: Default / Hover Two-sided: Default / Hover (slide-up) / Dismiss (flipped)

Kanban cards Kanban cards make up a collection that represents a flow or categories of information. With these cards, users can easily track progress.

Default / Hover / Active and focus

App cards App cards display information about third-party apps. These cards give users an at-a-glance view of an app and some of its key information, such as ratings and price.

Default / Hover

Insight cards Insight cards present information about the users’ business based on usage and financial data. For first-time users, these insight cards are similar to discovery cards, but insight cards call out enhanced functionality related to some piece of data about the user’s business. Be sure to use this type of card when the content is clearly associated with a visualization of the user’s data.

 

Appearance and behavior

Cards can

• Move
• Be moved
• Automatically update
• Be generated by the system

Users can

• Add
• Dismiss
• Expand
• Take other actions

Borders

Borders are 1 px with a 4 px corner radius and 2 px drop shadow.

Default #D4D7DC / Hover #8D9096 (web only) / Active and Focus #2CA01C

 

Spacing

Recommended padding is 20 px for web and 8 px for mobile. For all other padding, follow the spacing guidelines.

Web 20px / Mobile 8px

 

Color

Front fill should always be white. We recommend to use #6B6C72 fill for cards that flip. For all other card elements, refer to our current color palette.

Front fill #FFFFFF / Back fill #6B6C72

 

Background

Recommended margin is 20 px.

Web #ECEEF1 / Mobile #F4F5F8

 

Typography

Most cards have headers. Some do not. Always follow the typography and voice and tone guidelines. Cards can have additional typographic content such as labels, data segments, or body copy. Limit the number of styles of cards on any given screen to no more than five.

 

Data visualization

Cards with data visualization can provide an at-a-glance summary of data. For more guidelines, refer to the data visualization framework.

 

Illustrations

Cards can contain illustrations to add more visual context. Illustrations should be left-aligned, fill the space when possible, and scale down for mobile. For more guidelines, refer to the using illustrations framework.

 

Actions and controls

The entire card can be clickable, and other actions can be included inside the card. As the user moves a cursor to a card, the cursor should change to a pointer.

Responsive behavior

Grid system

When following the 12 column grid, cards go smoothly from web to mobile. Cards that sit side by side on the web will stack (and may adapt dimensions) on mobile screens.

1200 px

1024 px

768 px

320 px

Content guidelines for cards

Discovery and first-time use cards

Four content elements make up this card.

• Module title: The title for this card is static (“Tips”).
• Headline: Pique the user’s curiosity with a clever, optimistic headline. This is the place to evoke emotion and put a smile on the customer’s face. It’s not about simply describing the features or benefits. Write the headline first, and then work with an illustrator to create a visual that enhances the story.
  Character limit, including spaces: 25
• Description: Briefly describe the important features and benefits. Be optimistic, use language the customer will understand, and focus on the payoff.
  Character limit, including spaces: 70
• Call-to-action link: Tell the user what to do next. Include the name of the offering if possible. Customers tend to read headlines and calls to action and skip over everything else, so make sure your CTA clearly communicates what the offering is.
  Character limit, including spaces: 25

 

Examples

Header: AvenirNext forINTUIT demi 16px/20px
Body: AvenirNext forINTUIT regular 14px/20px
Text alignment: Left
Color: #393A3D
Illustration: 100px x 80px
Illustration alignment: Left, fill out the space as needed

Headers: AvenirNext forINTUIT medium 19px/24px
Body:AvenirNext forINTUIT regular 14px/20px
Link: AvenirNext forINTUIT demi 14px/20px
Text alignment: Left
Color: #393A3D (link color: #0077C5)