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 with caution: Candidate
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

Default - Gray

Header

Status or Sub-header

Body text

Link - Action

Default - White with border

View va-card default in Storybook

With Drop Shadow

View va-card default in Storybook

Benefit payments

+$1,862.96

Compensation & Pension - Recurring

Check mailed on March 31, 2023

Application status (Benefit application drafts)

FORM 20-0996

Application for Higher-level review

Alert:

Application expires on: June 26, 2023

Last opened on: April 27, 2023

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

How this component works

Default

Basic card

  1. Background color. White or $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.

Variations

Choosing between variations

Currently (06/2023), there are 3 variations to choose from:

1. Default gray

This variation was the previous default and is the Card variation most widely used across VA.gov. Visually, it features a gray background ($color-gray-lightest) with no border or drop shadow. Benefit payments and Application status are examples of this variation.

2. Default white

This variation is the new default and is codified in a web-component. Content should be structured in the same way. New variations of Card will start with this variation as the base. Currently you may choose to use either the gray or white default Card however, this newer variation is preferred.

3. With drop shadow

Use this variation for emphasis, for example at the top of a page or section, or as the primary card in a series of cards. When using in a series, use with the default white variation. Do not combine this variation with the default gray variation.

Instances of this component in production

There are many instances of the Card component in production. This is not an exhaustive list but does serve to augment the examples above and 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.

Appointment, large with icon

A large appointment card with an icon.
A large appointment card with an icon to identify the card type or category, in this case for an in-person appointment.

Claims status

A Claims status card in the Claim Status Tool.
A Claims status card showing status for a compensation claim with a slim Alert in at a mobile viewport width.

Financial Status Report

A Financial Status Report card.
A Financial Status Report (VA form 5655) card showing a household expense added with a Link - Active for editing the monthly amount and a Button - Icon for deleting the entry.

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.
A navigation card used in the MyHealtheVet landing page.
A navigation card used in the MyHealtheVet landing page which contains a category of links.

Number highlight

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

Behavior

Calls to action

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

Attributes and Properties

Property Attribute Type Default Description
background background boolean false If `true`, the card will have a gray background.
showShadow show-shadow boolean false If `true`, a drop-shadow will be displayed with a white background.

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 Radio button - 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: Jul 31, 2024