Card

Cards are versatile content structures that provide an entry point to more complex and detailed information.

Usage

When to use

Grouping different aspects of a broader category
Curating digestible overviews of more detailed content
Creating a self-contained unit that can be brought into other content structures

Editorial

Use sentence case for card titles. The only exception is when data sources return content formatted in a different character case and cannot otherwise be adjusted.
Do not include punctuation at the end of a card title.

Structure

Elements

A card can include the following elements:

Container
Header
Content
Footer

Container

All cards have a container that holds all related elements and defines the card’s elevation. By default, cards have a constant width and a variable height that is based on the card content. Card width can be adjusted to the width of its parent container as needed.

Example of a single card shown at full-width — Do

Display a single card full-width on mobile.

Header

The card header briefly summarizes the content of the card and contains the primary actions for interacting with the card.

A card header can contain the following elements:

Thumbnail: A thumbnail can be included to the left of the title to display an avatar, logo, or icon.
Title: The card title should succinctly summarize the content of the card.
Subtitle: The card subtitle can be used to provide brief contextual information that compliments the title.
Action area: The header action area provides the primary interactions with the card and its content. These can take the form of buttons, icon links, or other user interface controls.
Divider: Optional. The divider provides visual separation from the card content.
Navigation button: A back navigation button can appear before the thumbnail and card title when the card is part of a workflow.

A card header incorporates title content and a limited number of actions to give context for and interact with the content of the card.

A sample dashboard screen showing incorrect usage of cards with header dividers — Don't

Don't use header dividers on consumer dashboard cards

Caution

Tabs can be integrated into the header for certain card layouts, but quickly overcrowd the space and create accessibility challenges. Consider using tabbed views within the content area instead.

Content

A card’s content area can contain a variety of elements including text, images, and lists. Always choose content types that best support the information being displayed within the card.

The following content types work well to summarize information and prioritize calls-to-action.

Media

Cards can include a media element such as a photo, graphic, map, or icon to create a visually-rich feature. The media can be placed above or below the header depending on the requirements of the content. The media element spans the full width of the card container.

Lists

A list can be used for showing related items in a scannable format.

A card with sample list content — Do

Dashboard cards should include pagination controls when there are more than six items to display.

Tabs

Tabs can show multiple views of related content.

Account summaries

Account summaries are helpful for showcasing like data across multiple categories such as balances across several accounts. Footer text can provide helpful notes related to the data.

Vertical icon buttons

A card can feature several calls-to-action represented as vertical icon buttons. Use this content type to connect users to major features or services.

Combination

Combine two different content types such as a group of vertical icon buttons and a list to add more context or provide targeted calls-to-action.

A card layout that combines a group of vertical icon buttons with list items in the content area

The card footer contains supplemental information and actions pertaining to the card.

There are four elements that can be used within a card footer:

Divider: Optional. Similar to the card header, the footer can also include a divider that creates visual separation from the content area.
Actions: Optional. Supplemental footer actions can be in the form of buttons or links and are often used for leading the user to a related detail page or interacting with the card content.
Pagination controls: Optional. Pagination controls can be included in the footer area when list content includes a lengthy number of items.
Text: Optional. The text area of a card’s footer is best used for brief reference content related to the card.

Footer elements provide supplemental ways of engaging with card content.

Don't

Do not overload the footer with elements.

Variations

The card is a versatile content type that can accommodate a varied number of layouts based on the needs of the content.

Large

Cards typically use a large format where all of the content and actions are initially visible.

Small

A card may be collapsed into a smaller format to show summary information as a series of chips. The option to switch between the large and small size is placed within a card’s overflow menu.

Summary

Summary cards can be used to show essential content in a concise manner.

Behavior

Actions

Primary and supplemental actions

Cards have three areas that can contain actions. These areas can help add hierarchy to the actions for the user.

A diagram of the three action areas typically found within a card

Primary action area

The primary action area of a card is typically within the content itself. For example, a user might click a list item within a transaction history card to view additional details about that transaction.

Secondary action area

The secondary action area of the card is found within the card header and typically contains actions that allow the user to interact with the content and layout of the card.

Tertiary action area

A tertiary action area can be included within the card footer and is typically a button that leads to a more detailed content page.

Overflow menus are used when a card has multiple secondary actions. Overflow menus should always be included on dashboard cards to better organize dashboard-specific actions, but they may also be used on other cards where more than three secondary actions are present.

Example of a card overflow menu expanded — Do

Always place an overflow menu behind the rightmost icon link of the card header.

Search

Cards that contain long content lists such as transaction history can often benefit from a search action within the header. This is typically represented by an icon that reveals a search input when clicked.

Filters

Filters may be placed as a dropdown within the action area of the header and can be used to show smaller subsets of information within the card.

States

Empty state

Empty states may contain an icon and a short message to notify the user that no content is present.

An example of a card empty state with an action in the footer — An action can be included to start a process that adds content to the card.

Loading state

Loading states display a circular progress indicator within the content area when waiting on a server response.

Error state

Error states may contain an icon and a short message within the content area to notify the user of a problem loading card data due to a network error.

An example of a card error state with an action that reloads the card's content — Do

Provide a way to reload the card's content where appropriate.

An example of a card with overly apologetic text — Don't

Avoid apologetic error messages.

Style

Style specifications are available to inspect via Abstract. The following link will take you to their web-based interface.

Inspect component

Breakpoints

Wide

Wide cards provide increased white space, ideally suited for desktop-size breakpoints.

A redlined example of a card showing the 24-pixel container padding

Narrow

Narrow cards use a more conservative container padding which works better on smaller breakpoints where space is at a greater premium.

A redlined example of a card showing the 16-pixel container padding

Theming

The following table lists the theme properties used to style this component and any variations as well as a sample value.

A full list of properties used within the design system—as well as general usage guidelines—is available on the Theme properties page.

Examples of each theme property may be referenced by clicking a property name in the “property” column.

Sample	Property	Sample value
	`bodyTextPrimaryColor` Dark text color used for primary content in layouts	`#071523FF`
	`bodyTextSecondaryColor` Medium dark text color used for secondary or muted content in layouts	`#64707DFF`
	`bodyTextThemeColor` Themed text that matches the institution's branding; matches the link button text colors, but lacks the button's various interactive state properties	`#2A73A8FF`
	`cardCornerRadius`	`10px`
	`cardShadow`	`0 3px 12px 0 #00000026`
	`cardTitleTextColor` Used to theme primary card titles of cards	`#071523FF`
	`primaryContentBackgroundColor` Default card and list background	`#FFFFFFFF`

Accessibility

Text colors must pass level AA of the WCAG 2.0 Accessibility Guidelines for color contrast.