Skip to content

Components / Card

Card

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

Sample card component

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:

  1. Container
  2. Header
  3. Content
  4. Footer
Diagram of a typical card including areas for the container, header, content, and 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 sample of header variations showing typical placement of the various elements
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
A sample dashboard screen showing incorrect usage of cards with header dividers
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.

A card layout with a sample map in the media 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.

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
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.
A diagram of sample footer layouts that include elements such as actions, pagination controls, and text.
Footer elements provide supplemental ways of engaging with card content.
Do
Keep the footer simple and concise.
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.

A sample large card layout

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.

A sample small card layout

Summary

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

A sample summary card layout

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.

An example of a card's secondary action area limited to three actions
Do
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
Do
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

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

States

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

© 2020 Jack Henry & Associates, Inc. Trademark notice
Version 2.0.0-beta.5.1. Last updated December 16, 2020.