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 select account card is an input field used in forms with the functionality of the select component.
Using icon links in this pattern may pose an accessibility risk, so avoid them whenever possible.
States
Select an account
Expand to see a list of available accounts
Empty
Instead of displaying account information, the empty state uses a title and subtitle to invite the user to make a selection.
Select an account
Expand to see a list of available accounts
Active
In the active state, a dropdown presents other account option with their own hover states, represented by a green bar. There is currently no limit on the number of accounts shown in the dropdown. If the options extend of the screen, the dropdown should stop and scroll within.
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.
Sorry, but we're having trouble displaying this account right now. Please try again later.
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.
Design Environment
The selected and active states will appear slightly different at smaller breakpoints.
Stacked
Used when space is limited and the balance information won't fit side by side with the down arrow icon. Help links may use the icon only variation at this width.
Active
To optimize touch interactions at smaller breakpoints, account options are listed in a full-screen modal as populated cards instead of in a dropdown. Selecting a card within the list will exit the modal and bring the user back to the initial screen.
Microcopy
The empty state text is predefined and may not be changed. Balance labels should stay on a single line of text. Otherwise, follow the microcopy guidelines for the link and label components.
Switch to Wilmington