Card

Examples

Anatomy

Basic

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

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

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

Appointment with status

Claims and appeals

Form status

Media

Number highlight

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:

• $xsmall-screen up to $medium-screen:
  • Card maximum width = 304px
  • Card minimum width = 280px
• $medium-screen through $large-screen and above:
  • Card maximum width = 752px
  • Card minimum width = 384px

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.

Containers for links in the Mobile app

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

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

Related

Sub-components used in this component:

• Section titles
• Link - Action
• Tag