Account

Usage Style Code Playground
The account component is a representation of pertinent account data.

General Guidelines

The account display provides valuable information for the user to identify their accounts, at a glance. Each user may recognize their accounts by a different element in the full display. Some users may see their balance and immediately know which account they are looking at, while other users may recognize their accounts by the name, the number, or by the customizable color bar.

It is essential that the user feels certain of the account they are looking at or selecting. Therefore, the Account component should appear the same everywhere in the application.

Anatomy

Color indicator bar allows users to quickly and easily identify account. Color is themable by FI and may be changed by end user. Account number display is propriotaty per FI and and often per account type. Account holder number may appear with account number. Both may be formatted differently according to FI display requirements. (ex. ******345 - ***5678) Default is to show 7 characters; astericks masking numbers until the last four numbers. There are four states of accounts, three of which have icons associated with them.1. no icon signifies a single account holder2. people icon signifies joint account 3. link icon signifies a shared or linked account 4. external bank icon signifies an external bank. Account balance(s) are configurable by the FI. The three configuration options are the following: 1. Primary balance is the available balance with a secondary running balance 2. Primary balance is the running balance with a secondary available balance 3. Single balance. Other displays of account balance are as follows:Aggregated accounts through yodel may appear with an alert icon, pending icon, retry icon, or and error icon. They also display “as of DD MMM YYYY” to indicate when the last time the balance was synced. Skip-A-Pay appears with a status icon (pending, ineligible, successful, or skipped) and the due date of the next payment.

Truncation

The account name is truncated while the balance is always fully visible.

A truncated account name is showing with the full balance visible.

Usage

Configurations When
Full size all The customer needs to see primary information, and when a large space is available (for example: Dashboard, Accounts, and Dropdowns).
Full size name/number The customer needs to see primary information, horizontal space is available, and the balance is not required for the customer to make a decision or perform an action (for example: Skip-A-Pay and the Account Settings page).
Single line name only The customer needs to see a minimal amount of information and only a small space is available. Use name and number when possible (for example: Mobile records).
Single line name/number The customer needs to see secondary information and the balance is not required for the customer to make a decision or perform an action (for example: input fields and desktop records).
Single line name/balance The customer needs to see secondary information or a small space is available, and the balance is required for the customer to make a decision or perform an action. Use name and number when possible.
Single line all The customer needs to see secondary information or a small space is available, and the balance is required for the customer to make a decision or perform an action.

Do's and Don'ts

Do use only the styling shown in these pages, including sizing, padding, and font colors and sizes
Don't use different font sizes
Don't display the name alone with the horizontal format color bar
Don't use the wrong font weight
Don't use a different width for the color bar
The account component is a representation of pertinent account data.

Size and Padding

Horizontal account displays as follows: Color bar is five pixels wide, 45 pixels in height and has a 2 pixel radius. Five pixels padding in between the color bar and Account nickname. Nickname and account number are vertically stacked and left aligned. The space in between the nickname and number and the balance(s) is dynamic. Five pixels padding between account nickname and number. Five pixels padding between the “available balance” icon and the balance. Vertical account displays as follows: Color bar is five pixels wide, 24 pixels in height and has a 2 pixels radius. Five pixels padding in between the color bar and Account nickname with number to the right. The space between the name and number and the balance is dynamic.

Typography

The account nickname has a font size of 16 pixels, weight medium, color #333333. The account number has a font size of 12, weight regular, color #707070. The primary balance has a 16 pixels, weight medium, color #333333. The secondary balance has a font size of 12, weight regular, color #707070.

Dropdowns

The account component is a representation of pertinent account data.

Examples

For details on when to use this component, see the Usage tab.

Variants

The variants of this component are as follows:

Multi-Line

<div class="iris-account iris-account--multi-line" data-color="account-color-0">
    <span class="iris-account__color-bar"></span>
    <div class="iris-account__column iris-account__account-details">
        <div class="iris-account__info iris-account__primary-info">
            <span class="iris-account__account-name" title="Steve's Checking Account">Steve's Checking Account</span>
        </div>
        <div class="iris-account__info iris-account__secondary-info">
            <span class="iris-account__account-number"><span role="img" aria-label="Account number ending in">**********</span>123</span>
            <span class="iris-account__info-icon font-icon-fi" role="img" aria-label="External account"></span>
            <span class="iris-account__info-icon font-icon-pending" role="img" aria-label="Pending transactions"></span>
        </div>
    </div>
    <div class="iris-account-balance iris-account-balance--available-balance">
        <div class="iris-account-balance__row">
            <span class="iris-account-balance__icon available-balance-icon" role="img" aria-label="Available balance"></span>
            <span class="iris-account-balance__primary-info">$1,000.00</span>
        </div>
    </div>
</div>

Single Line

NOTE: For this variant you need to move the secondary info into a new account column.

<div class="iris-account iris-account--single-line" data-color="account-color-2">
    <span class="iris-account__color-bar"></span>
    <div class="iris-account__column iris-account__account-details">
        <div class="iris-account__info iris-account__primary-info">
            <span class="iris-account__account-name" title="Tim's Checking Account">Tim's Checking Account</span>
        </div>
    </div>
    <div class="iris-account__column iris-account__account-details">
        <div class="iris-account__info iris-account__secondary-info">
            <span class="iris-account__account-number"><span role="img" aria-label="Account number ending in">**********</span>123</span>
        </div>
    </div>
</div>

Account Balance

The account balance, because of aggregate accounts, has its own states. The available states are as follows::

<div class="iris-account-balance iris-account-balance--available-balance">
    <div class="iris-account-balance__row">
        <span class="iris-account-balance__icon available-balance-icon" role="img" aria-label="Available balance"></span>
        <span class="iris-account-balance__primary-info">$1,000.00</span>
    </div>
</div>
<div class="iris-account-balance iris-account-balance--available-balance">
    <div class="iris-account-balance__row">
        <span class="iris-account-balance__icon available-balance-icon" role="img" aria-label="Available balance"></span>
        <span class="iris-account-balance__secondary-info">$1,000.00</span>
    </div>
    <div class="iris-account-balance__row">
        <span class="iris-account-balance__primary-info" aria-label="Current balance $1,500.00">$1,500.00</span>
    </div>
</div>
<div class="iris-account-balance iris-account-balance--refresh">
    <div class="iris-account-balance__row">
        <span class="iris-account-balance__icon font-icon-retry" role="img" aria-label="Sync account balance"></span>
        <span class="iris-account-balance__primary-info">$1,000.00</span>
    </div>
    <div class="iris-account-balance__row">
        <span class="iris-account-balance__secondary-info">as of 24 JUL 2017</span>
    </div>
</div>
<div class="iris-account-balance iris-account-balance--pending">
    <div class="iris-account-balance__row">
        <span class="iris-account-balance__icon font-icon-pending" role="img" aria-label="Account sync is still in progress"></span>
        <span class="iris-account-balance__primary-info">$1,000.00</span>
    </div>
    <div class="iris-account-balance__row">
        <span class="iris-account-balance__secondary-info">as of 24 JUL 2017</span>
    </div>
</div>
<div class="iris-account-balance iris-account-balance--error">
    <div class="iris-account-balance__row">
        <span class="iris-account-balance__icon font-icon-error" role="img" aria-label="Error syncing account balance"></span>
        <span class="iris-account-balance__primary-info">$1,000.00</span>
    </div>
    <div class="iris-account-balance__row">
        <span class="iris-account-balance__secondary-info">as of 24 JUL 2017</span>
    </div>
</div>
<div class="iris-account-balance iris-account-balance--warning">
    <div class="iris-account-balance__row">
        <span class="iris-account-balance__icon font-icon-warning" role="img" aria-label="Account balance may be out of date"></span>
        <span class="iris-account-balance__primary-info">$1,000.00</span>
    </div>
    <div class="iris-account-balance__row">
        <span class="iris-account-balance__secondary-info">as of 24 JUL 2017</span>
    </div>
</div>

Accessibility

As always, we want all of the components in the application to be accessible. Please keep the following notes in mind while using this component:

  • Use role="img" and an aria-label attribute to describe masked account number
  • Use role="img" and a specific aria-label text on any icons appearing within the account component

Variables

The variables used in this component are as follows:

// Text variables
$account-font-size-primary-info: 1.5rem;
$account-font-size-secondary-info: 1.2rem;
$account-icon-size-info: 1.5rem;
$account-text-primary-info: $mine-shaft;
$account-text-secondary-info: $dove-gray;
$account-font-weight-primary-info: 700;
$account-font-weight-secondary-info: 400;

Themeability

The account bar colors are themeable using the _account.scss theme overides file. The variables accessible in that file are as follows:

// Account Colors
$account-bar-0: #0798D1 !default;
$account-bar-1: #6F9C2F !default;
$account-bar-2: #D96D01 !default;
$account-bar-3: #FFC703 !default;
$account-bar-4: #364495 !default;
$account-bar-5: #49AFA6 !default;
$account-bar-6: #A02886 !default;
$account-bar-7: #673300 !default;

Variant: Standard | State: None | Decorator: None

<div class="iris-account iris-account--multi-line" data-color="account-color-0">
    <span class="iris-account__color-bar"></span>
    <div class="iris-account__column iris-account__account-details">
        <div class="iris-account__info iris-account__primary-info">
            <span class="iris-account__account-name" title="Steve's Checking Account">Steve's Checking Account</span>
        </div>
        <div class="iris-account__info iris-account__secondary-info">
            <span class="iris-account__account-number"><span class="sr-only">Account number ending in </span>**********123</span>
        </div>
    </div>
    <div class="iris-account-balance iris-account-balance--available-balance">
        <div class="iris-account-balance__row">
            <span class="iris-account-balance__icon available-balance-icon" aria-hidden="true"></span>
            <span class="iris-account-balance__primary-info"><span class="sr-only">Available Balance </span>$1,000.00</span>
        </div>
        <div class="iris-account-balance__row">
            <span class="iris-account-balance__secondary-info"><span class="sr-only">Current Balance </span>$1,500.00</span>
        </div>
    </div>
</div>

Variant: Single Line | State: None | Decorator: None

<div class="iris-account iris-account--single-line" data-color="account-color-0">
    <span class="iris-account__color-bar"></span>
    <div class="iris-account__column iris-account__account-details">
        <div class="iris-account__info iris-account__primary-info">
            <span class="iris-account__account-name" title="Steve's Checking Account">Steve's Checking Account</span>
        </div>
    </div>
    <div class="iris-account__column iris-account__account-details">
        <div class="iris-account__info iris-account__secondary-info">
            <span class="iris-account__account-number"><span class="sr-only">Account number ending in </span>**********123</span>
        </div>
    </div>
</div>