Account

In progress

The account component displays essential account information such as account name, account number, balance, account color, and other non-essential (but helpful) information such as, payment due dates, sync status, sharing preferences and more.

Account

Anatomy

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

Stacked

In total, the Stacked variant is made up of 13 different atoms that can be displayed or hidden to help the user accomplish a specific task. While the graphic below displays all 13 atoms at once, it is impossible for all 13 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 13 atoms together. 

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


Current & available balance type treatment

The default level of type for current and available balances is Medium heading, but can be configured to be Body 1 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)

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
  2. Account nickname — Body 1
  3. Nickname truncation — Body 1 (Horizontal ellipsis Unicode-2026)
  4. Account number (redacted characters) — Overline
  5. Account number (displayed characters) — Body 1
  6. Aggregated account connection status affordance — Quick action button-24 (optional)
  7. Available balance — Body 1 (optional)
  8. Available balance icon — Avatar-24 (optional)
  9. Account relationship identifier — Avatar-24 (optional) 
  10. 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
  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 — Medium heading (optional)
  7. Account relationship identifier — Avatar-24 (optional)
  8. Account number (displayed characters) — Body 1
  9. Account number (redacted characters) — Overline

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. 


Specs

Color

Element Property Value
Account color Background color Dynamic based on the branded account colors
Current balance, Available balance icon, Account nickname, Nickname truncation, Account number (redacted characters), Account number (displayed characters) Text/icon color ∆colorPlatformGray900
Aggregation icon (other) Icon color ∆colorBrandedAffordanceAccessible
Aggregation icon (retry) Icon color ∆colorBrandedAffordanceAccessible
Aggregation icon (error) Icon color ∆colorBrandedAffordanceError
Aggregation icon (caution) Icon color ∆colorBrandedAffordanceCaution

Elevation

No elevation considerations for this component.

Spacing

Stacked

The stacked account component would never look like this (see anatomy section), but should be built to allow atoms to be hidden, and the rest of the visible content respond accordingly.

Overall the account component is aligned to the top left of the container with a keyline to the right of the account color.

The account content is aligned to the top left of the parent container.

The balance content is aligned to the left of the parent container, and vertically centered.

The balance meta info is vertically centered and aligned to the balances container.

Single line

Held account 

The account identifiers content is left aligned, and the balance content is right aligned.

External account

The account identifiers content is left aligned, and the balance content is right aligned.

Limited space

The single line account component needs to always remain a single line. When space is limited, and the balance content is not necessary, consider only showing the account identifier content. By default, both the account identifier and balance content are equally important. As such, when space is limited the component should truncate the number of redacted characters to a max of 4, and displayed characters to a max of 4.

In certain cases, the account number needs to be prioritized and should show all of the redacted and displayed characters. When this occurs, the account nickname will need to be truncated further to provide the needed space (see graphic below).


While the default type size for the account nickname, number, and balance is Body 1, if needed this can be swapped out for 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.

When using Caption, also set the icon to the small (16px) size to match the caption line height.

Type set to Caption:


Type set to Body 1:

Double line

Held account

The account identifiers content is left aligned, and the balance content is right aligned.

External account

The account identifiers content is left aligned, and the balance content is right aligned.

Triple line


States

The account component itself does not have any states to consider since it will always be nested inside a card, selectable tile, list item (within a list view for example), and will allow the states of the parent container to pass through.

Quick action buttons within the account component follow all the states specific to the quick action button, and no unique considerations are needed. See the documentation for the quick action button component for state details.

Theming

All theming controls are based on design tokens coming from Theme Builder. No hard-coded values should be utilized.

Color

Element Property Value
Account 0 Background color ∆colorBrandedAccountColor0
Account 1 Background color ∆colorBrandedAccountColor1
Account 2 Background color ∆colorBrandedAccountColor2
Account 3 Background color ∆colorBrandedAccountColor3
Account 4 Background color ∆colorBrandedAccountColor4
Account 5 Background color ∆colorBrandedAccountColor5
Account 6 Background color ∆colorBrandedAccountColor6
Account 7 Background color ∆colorBrandedAccountColor7

Type

Element Property Value
Current/Available balance — Medium heading (stacked) Font family ∆typeBrandedMediumHeadingFontFamily
Current/Available balance — Medium heading (stacked) Font weight ∆typeBrandedMediumHeadingFontWeight
Current/Available balance — Medium heading (stacked) Character spacing ∆typeBrandedMediumHeadingCharacterSpacing
Current/Available balance — Medium heading (stacked) Text transform ∆typeBrandedMediumHeadingTextTransform

Placement

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)

Behavior

No special motion or behavior considerations are needed for this component.

Developer Docs

Vue Developer Docs

Component documentation coming soon!