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

Sample card component


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


  • 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.



A card can include the following elements:

  1. Container
  2. Header
  3. Content
  4. Footer
Diagram of a typical card including areas for the container, header, content, and footer


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
Display a single card full-width on mobile.


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 use header dividers on consumer dashboard cards
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.


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.


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.

A card layout with a sample map in the media container

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

A card with sample list content
Dashboard cards should include pagination controls when there are more than six items to display.

Tabs can show multiple views of related content.

A card layout with two tabs in the content area
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.

A card layout with four sample account summaries
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.

A card layout with three sample vertical icon buttons

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.
Keep the footer simple and concise.
Do not overload the footer with elements.


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


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

A sample large card layout


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.

A sample small card layout


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

A sample summary card layout



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.

An example of a card's secondary action area limited to three actions
Limit the number of secondary actions to three including an overflow menu, if present.
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 menu

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
Always place an overflow menu behind the rightmost icon link of the card header.

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.

Example of a search field within the card header


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.

Example of an expanded filter dropdown


Empty state

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

A sample card layout with an empty state
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.

A sample card layout with a loading state

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.

A sample card layout with an error state
An example of a card error state with an action that reloads the card's content
Provide a way to reload the card's content where appropriate.
An example of a card with overly apologetic text
Avoid apologetic error messages.


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

Inspect component



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 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


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

Dark text color used for primary content in layouts


Medium dark text color used for secondary or muted content in layouts


Themed text that matches the institution's branding; matches the link button text colors, but lacks the button's various interactive state properties



0 3px 12px 0 #00000026

Used to theme primary card titles of cards


Default card and list background



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