Cards are versatile content structures that provide an entry point to more complex and detailed information.
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:
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.
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’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 list can be used for showing related items in a scannable format.
Tabs can show multiple views of related content.
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.
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.
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.
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 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 cards can be used to show essential content in a concise manner.
Primary and supplemental actions
Cards have three areas that can contain actions. These areas can help add hierarchy to the actions for the user.
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.
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 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.
Empty states may contain an icon and a short message to notify the user that no content is present.
Loading states display a circular progress indicator within the content area when waiting on a server response.
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.
Style specifications are available to inspect via Abstract. The following link will take you to their web-based interface.
Wide cards provide increased white space, ideally suited for desktop-size breakpoints.
Narrow cards use a more conservative container padding which works better on smaller breakpoints where space is at a greater premium.
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.
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
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.