Switch to WilmingtonAccount Card - Actions
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 actions account card links the user to the account activity and details view while also presenting up to three actions associated with the account. An optional status bar will display temporary or urgent account information, such as a past due balance.
Variants
Used when there is enough space for 1 - 3 account-level actions to fit horizontally within the card. Actions are presented as icons with a label. The green arrow next to the account number links to the account activity and detail view.
Status Bar
Used to display temporary or urgent account information on either of the above variants. The yellow bar at the top of the card will change color to match the corresponding status. Consult our status guidelines when adding the status bar.
Error States
The card will display various errors when balance information can't be recalled.
Design Environment
Both the standard and link only variants of the actions account card will stack when space is limited.
Microcopy
Action labels should use strong verbs and specific language, similar to buttons . Icon labels and balance labels should stay on a single line of text. The status bar should be a short descriptive sentence ending in a period. Otherwise, follow the microcopy guidelines for the link and label components.