Cards organize and present content in a container that users can easily scan and interact with.
When to show your cards
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
Types of cards
Kanban cardsKanban 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 cardsApp 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
|
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 (lifestyle illustrations and utility illustrations).
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.
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)
Fixed
Borders
– Default is gray 5 (#D4D7DC)
– Hover is gray 3 (#8D9096)
– Select is green 2 (#2CA01C)
Corner radius
– 4px (works with atomic 4px grid)
Background
– White or gray 7 (#ECEEF1)