Account
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

Truncation
The account name is truncated while the balance is always fully 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


Don't display the name alone with the horizontal format color bar

Don't use a different width for the color bar
Size and Padding

Typography

Dropdowns

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 anaria-label
attribute to describe masked account number - Use
role="img"
and a specificaria-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>