Account Card - Checkbox

The account card presents the user with actions and information associated with their bank accounts. The account name or nickname and the last four digits of the account number tell the user which of their accounts they are looking at. The mandatory primary balance appears as an amount with a label, and an optional secondary balance displays an amount and a label with or without a due date. Use an icon link to offer contextual help only if the balance label needs further explanation.

The checkbox account card is an input field used in forms with the states and functionality of the checkbox component.

Using help links in this pattern may pose an accessibility risk, so avoid them whenever possible.

Usage

This variant's not built yet

Selected

The user can select multiple accounts at the same time.

Error States

The card will display various errors when balance information can't be recalled.

Functional

Used when some of the information in the account card can't be shown but the associated actions are still functional. Only show errors where the information is missing. The yellow bar will remain yellow in the error state unless using a status bar.

Non-Functional

When no information can be shown, or the actions on the card are not functional, the error message will appear without a border.

Microcopy

Balance labels should stay on a single line of text. Otherwise, follow the microcopy guidelines for the link and label components.