Account

The essential parts of the account component is the account nickname, account number and account color. All other elements are optional, and should only be used in aiding the user to accomplish a specific task. The account component comes in four variants: stacked, single line, double line, and triple line with an option to have either the account color as a circle or line variant.

Stacked

In total, the Stacked variant is made up of 12 different atoms that can be displayed or hidden to help the user accomplish a specific task. While the graphic below displays all 12 atoms at once, it is impossible for all 12 atoms to be displayed at the same time (some atoms would only appear with held accounts and others only appear with external accounts as an example). For the purposes of seeing how the component is structured, the graphic below shows all 12 atoms together.  Note: Current and available balances should not be shown at the same time. (If you need to show both, use a double lined variant) Available icon and available now text should not be shown at the same time.

1. Other data — Caption (optional)
2. Available balance icon — Avatar-24 (optional)
3. Maturity/payment info — Caption (optional)
4. Account color — (Optional)
5. Account nickname — Body 1
6. Nickname truncation — Body 1 (Horizontal ellipsis Unicode-2026)
7. Account number (displayed & redacted characters) — Body 2
8. Account relationship identifier — Avatar-24 (Up to 2 optional)
9. Available now messaging — Caption (optional)
10. Aggregated account connection status affordance (optional) — Quick action button-24  or static Avatar if no action is available.
11. Current/Available balance — Medium heading, Subtitle 2, or Body 1 (optional)
    

Stacked Values

This account stacked variant is helpful when needing to show all of the account nickname and account number without having the possibility of severe truncation. The account name, account number and value all stack. This will be commonly used inside of the account dropdown. 

1. Account color - (Optional)
2. Account nickname (Body 1) 
3. Nickname truncation — Body 1 (Horizontal ellipsis Unicode-2026)
4. Account number (displayed & redacted characters) — Caption
5. Account relationship identifier — Avatar-24 (Up to 2 optional)
6. Available balance icon — Avatar-24 (optional)
7. Current/Available balance — Medium heading, Subtitle 2, or Body 1 (optional)
8. Aggregated account connection status affordance (optional) — Quick action button-24 or static Avatar if no action is available.

‍

Account color treatment

The account color can either be a circle or line depending on the theme design chosen by the FI. This applies to the stacked, single line, double line and triple line account variants. Note: The circle is the default for the component. 

1. Account color (12px circle)

1. Account color (16x4px line)

Balance type treatment

The default level of type for current and available balances is Medium heading, but can be configured to be Body 1 or Subtitle 2 if the stacked variant needs to fit in a smaller space or the balance doesn’t need to demand such a prominent focus.

Redacted characters

The number of redacted characters for account numbers, the symbol used as the redacted character, and arrangement (redacted first vs redacted last) are all configurable. With multiple ways to configure redacted characters, the pattern used here is just to show the type treatment. Due to the overwhelming amount of configuration for this atom, when this is portrayed in design files, this is the pattern that will be shown. If there’s not enough space to display both the redacted and displayed characters, then wrap to a second line — bringing the account relationship identifier with it, and pushing the balance due/maturity content down.

Stacked structure

The stacked component is an organism made up of two distinct molecules, and all 13 atoms are nested within one of these molecules: account content, and balance content.

1. Account content 
2. Balance content
   

The account content can further be broken down into account identifiers and payment information. The account identifiers are the color, nickname, number, and relationship iconography. Payment information is the messaging to the user of upcoming payments, CD maturity, etc. 

The balance content is made up of not only balances, but also meta information related to the balance, and actions possible with balances coming from aggregated accounts.

Standard arrangements

By turning on or off certain pieces of data within the account component, a wide range of variations can be displayed to the user. While there’s no set number of arrangements (since the display of elements would be on or off depending on the solution needed), some standard arrangements are as follows:

Held account with payment due info

Held account without payment due info 

External account (aggregation)

Alternative balance style (Subtitle 2)

Alternative balance style (Body 1)

Single line

With the account information left aligned, and balance information right aligned, the single line variations are great for small areas. 

1. Account color - (Optional)
2. Account nickname — Body 1
3. Nickname truncation — Body 1 (Horizontal ellipsis Unicode-2026)
4. Account number (displayed & redacted characters) — Body 2
5. Aggregated account connection status affordance — Quick action button-24 (optional)
6. Available balance — Body 1 (optional)
7. Available balance icon — Avatar-24 (optional)
8. Account relationship identifier — Avatar-24 (Up to 2 optional) 
9. Mask/unmask affordance — Quick action button-24 (not shown, but would appear in the same location as number 9)

While the default type size for the account nickname, number, and balance is Body 1, if needed this can be configured to be Caption instead. One example of when this is done is when the single line account component appears within a text field. Since the space available is especially limited, using Caption provides more space for the account number and balance information. 

Double line

With the account information left aligned, and balance information right aligned, the two line variations are still great for small areas, but provide just a little more space for the nickname and supplemental balance details (current balance or external account balance “as of date”). 

1. Account color - (Optional)
2. Account nickname — Body 1
3. Aggregated account connection status affordance — Quick action button-24(optional)
4. Available balance — Body 1 (optional)
5. Balance “as-of” date — Caption (optional)
6. Current balance — Caption  (optional)
7. Account relationship identifier — Avatar-24 (Up to 2 optional)
8. Account number (displayed & redacted characters) — Caption

Triple line

With the account information left aligned, and balance information right aligned, the three line variations are identical to the two line variant; but also display CD Maturity dates and payment information on the third line. 

The account component should ideally not live by itself, but should always be contained within another component such as a card, selectable tile, input field, dropdown, list view, etc. As a result of this, the account component width should be determined by the parent container, and should stretch horizontally to fill the container.

When space is limited such that the entire account component cannot fit within the horizontal space provided, certain elements can truncate, and others wrap. Use the following list to determine which items wrap, truncate, and take priority (never wrap or truncate). 

Priority

• Current balance (use Body 1 alternate instead of Medium heading for stacked if space is limited)
• Available balance (use Body 1 alternate instead of Medium heading for stacked if space is limited)

Truncate

• Account nickname 
• Account number (only truncate for FI’s that have configured more than 4 redacted characters and 4 displayed characters)

Wrap

• Balance “as-of” date
• Maturity/payment information
• Iconography (if multiple icons are shown in succession, wrap all icons together)