Skip to main content
U.S. flag

An official website of the United States government

Dot gov

The .gov means it’s official.
Federal government websites often end in .gov or .mil. Before sharing sensitive information, make sure you’re on a federal government site.

Https

The site is secure.
The https:// ensures that you are connecting to the official website and that any information you provide is encrypted and transmitted securely.

Components

Card

Use: Deployed
A card groups short, related pieces of personalized information into a series of discrete containers, similar to physical index or playing cards. The goal of a card is to present a snapshot of information in one digestible chunk with the option to navigate to more detailed content. The user should be able to easily scan a sequence of cards and take action on the most relevant items.

Examples

Anatomy

Basic

Basic card

  1. Background color. Currently $color-gray-lightest.
  2. Header. Header that summarizes the card’s content.
  3. Secondary content. Body text. Includes next steps and bold dates/times to draw attention to the most important details on the card.
  4. Call to action. An action link should be used for the primary call-to-action. A link may also be used.

Status via Tag

Status card via Tag

Use this variation when you have a short status which can use the Tag component.

  1. Background color. Currently $color-gray-lightest.
  2. Status. Status using the Tag component.
  3. Header. Header that summarizes the card’s content.
  4. Secondary content. Body text. Includes next steps and bold dates/times to draw attention to the most important details on the card.
  5. Call to action. An action link should be used for the primary call-to-action. A link may also be used.

Status via label with indicator

Status card via label with indicator

Use this variation when you have a longer status label.

  1. Background color. Currently $color-gray-lightest.
  2. Header. Header that summarizes the card’s content.
  3. Status. Status with indicator. Accommodates longer status labels.
  4. Secondary content. Body text. Includes next steps and bold dates/times to draw attention to the most important details on the card.
  5. Call to action. An action link should be used for the primary call-to-action. A link may also be used.

You can see these options in use in the variations below.

Usage

When to use Card

  • Collections. Cards usually appear in a collection, rather than in isolation, contain identical or similar information, and are uniform in their look and feel so that users can easily scan the collection of related items and actions.
  • Framing a call to action. Cards are often used to highlight and frame a specific call to action or decision a user needs to take.
  • Conveying status. Cards are flexible enough to contain many types of information. However, Cards at the VA often contain time-sensitive information with a status such as appointments, a claim, or submission of a form. When showing status use the Tag component or an icon with a text description to indicate the status.

When to consider something else

  • Eligibility information or other content highlight. The Featured content component, which is the only card-like element represented in Drupal, is meant to act as a content highlight for the most important information on the page. It was originally intended to highlight eligibility information. Featured content is not a Card and they should not be used interchangeably.
  • Dynamic content. Do not use a Card when inserting content into the page in response to a user action. In those cases use a variation of an Alert component.
  • Forms - A Card is not a Fieldset. A fieldset can be used to cluster related form fields into a sub-section of a form. The visual design of a fieldset should not mimic a Card.
  • Large data - A Card is not a Table row. A collection of cards does not scale up to large data sets. If users needs to compare large amounts of data consider a table.
  • Navigation - A Card is not a Button or a Link. While a Card may contain a call-to-action link, and may itself be a link, it is not solely a navigation element. Do not use a Card to act as a large tap target.

When to use caution

  • Search results. Cards can be returned as a treatment for search results depending on the density of the data. However, the card may in fact add unnecessary visual noise when displaying a list of results. In those cases, if the data density is low consider removing the card container and having rows of results. If the data density is high consider adding pagination and the ability to search and/or filter the results.

Variations

Instances of this component in production

There are many instances of the Card component in production. This is an an exhaustive list but does serve to highlight well defined instances of a Card.

Appointment

An appointment card in MyVA.
An appointment card in MyVA.

Appointment with status

An appointment card with a status of canceled.
An appointment card for a canceled appointment.

Claims and appeals

A Claims and Appeals card in MyVA.
A Claims and Appeals card showing status for a claim in MyVA at a mobile viewport width.

Form status

A form status card in MyVA.
A form status card showing the status of a form that a Veteran is in the process of filing out in MyVA.

Media

A media card for the GI Bill Comparison Tool .
A media card features an image or icon and contains a call-to-action with a description.

Number highlight

A Number highlight card showing a disability rating.
A Number Highlight card brings attention to a specific number or statistic.

Payment

A payment card example.
A payment card showing a type of payment.

Behavior

Calls to action

  • Make cards actionable. A Card should be actionable. That can be accomplished either by making the Card itself a link or by the use of the action link component.
  • Action links for primary CTA. An action link should be used for the primary call-to-action.
  • Max 3 CTAs. A card should not contain more than three calls-to-action (CTAs).
  • Secondary and tertiary actions. Secondary and tertiary actions can use the secondary variation of action link, an active or other link variation, or a default link.

Communicating status

  • Tag for status. Use the Tag component to communicate status.
    • NOTE: There are some accessibility concerns with the Tag component when used in the context of a Card that have been raised but remain untested. If you are testing this component consider using a bold font-weight and letter-spacing to improve the legibility of the Tag.
  • Make accessible color choices. If you are using color as a supplementary status indicator, make sure your color choices are accessible and intuitive.
  • Color and another. Never rely on color alone to communicate status.

Placement

Dimensions

Cards use the following widths:

Layout

Cards can sit inside or outside of a grid layout. Cards start with 1.5 spacing units (1.2rem/12px) below each card to separate them. Then the spacing increases to 2 spacing units (1.6rem/16px) of margin on all sides at the $medium-screen and above breakpoint.

Element states

  • When a Card behaves as a link it must have hover, focus, and active states. The hover state should be a 2px solid $color-primary border. An appropriate focus status would add a 2px solid outline.

Code usage

There is not currently a va-card web component.

Not a Card

There are a few design elements that look like a Card but do not behave like a Card and are actually instances, or variations, of other components or are simply containers that share the same background color as a Card. These Card adjacent designs should not be thought of as a Card component and do not adhere to the guidelines defined here.

A mobile link that looks like a Card.
Mobile link. Not a Card.

The Mobile App uses a Card-like container around an active link to make the link a large tap target on mobile. This treatment should be thought of as a mobile-specific link variation rather than an instance of a Card.

Containers for asking users for multiple responses (aka List and Loop) in forms

A container for an action in a form used in the Ask users for multiple responses (aka List and Loop) pattern.
Container for a button and title. Not a Card.

The pattern for asking users for multiple responses (aka List and Loop) uses a Card-like container to enter the loop to edit or remove an item in the list. This treatment is specific to that pattern and should not be thought of as an instance of a Card.

Containers for radio button tiles and checkboxes

A container for a checkbox and description in a form.
Container for a checkbox. Not a Card.

A radio button tile has a title and description within the label and a Card-like container around the radio button and label. This treatment can be seen in the U.S. Web Design System Radio buttons - Tile variation. It is also in use around checkboxes in parts of VA.gov. This treatment is specific to radio buttons and checkboxes and should not be thought of an an instance of a Card.

Content considerations

  • Concise headers and text. Keep card content (especially header text) short, crisp, and to-the-point: Users should be able to glean the most important information at-a-glance, and have the option to view additional details by clicking a link or action link.
  • Translation proof. Avoid using dynamic content within the middle of a sentence to future-proof the card for translation.
  • Statuses: Currently, the following status names that are known to be in-use:
    • Appeals has over 40 status labels.
    • Appointments:
      • Upcoming
      • Requested
      • Past
      • Canceled
    • Claims:
      • Claim received
      • Initial review
      • Evidence gathering, review, and decision
      • Preparation for notification
      • Complete

Accessibility considerations

  • Use the appropriate heading level for your page. Set the heading level based on the content of your page to make sure card headings are in the correct, logical outline order. Use CSS to style the header visually if you need a different visual representation.
  • Use unordered lists and list items. Use a ul for a card group and an li for each card. This formatting allows screen readers to enumerate the items in the card group and allows shortcuts between list items.
  • Keyboard navigation. The tab key should bring focus to the call(s) to action within the card. The enter key or spacebar should open a Link or Link - Action.

Sub-components used in this component:

Edit this page in GitHub (Permissions required)
Last updated: Aug 25, 2022