Record

A record is a repeatable horizontal container that allows for the consistent layout of a variety of data.

General Guidelines

Records are used to display banking data to the customer. The information should be easily scannable, so that the user can find the information they are looking for quickly.

To allow for various screen needs, records have three height formats available: compact, cozy, and comfortable. Choose the right size to limit the amount of scrolling a customer needs to do to get the information that they need. Remember records can be expandable.

A record can appear as a simple list and it can have actions associated with it.

Placement

For layout purposes, ensure the record height does not hinder readability or scannability of the information it provides.

Records should have a minimum of a 10px padding around the text and should have a maximum of 30px.

Voice and Tone

Information displayed in a record should always provide a high level view of the data included in it. The language should be clear and concise. Labels and lists within records should be grammatically alike, for example, do not mix statements with directions.

Grammar and Mechanics

  • Record page information should be sentence case
  • No punctuation is needed
  • When using a grid format, the record fill color should alternate between a light gray and white to improve readability and scannability, especially for reports.
  • As a best practice, there should be a single drill-down text hyperlink associated to each record.
  • Additional actions should be represented by action buttons or embedded in a More icon.

Anatomy

Records may contain all or some of the components shown below. Only critical information should be surfaced. (I.e. For a transfer record the to and from accounts, the amount, the date, and the status are most important to the user when scanning. All other information can be seen when the record is expanded.)

Actions

There are only five actions that should be shown in a record.

Collapsable

Show details and/or editing fields.

Do’s and Don’ts

Do prioritze the content so that user doesn't have to question what they are reading
Do place details in the collapsed view
Do use comfortable padding on records with lots of information
Don't show non-critical details in summary view
Don't use any other action buttons on records
Don't use compact padding on records with lots of information
A record is a repeatable horizontal container that allows for the consistent layout of a variety of data.

Grid

All records should be built on a grid.

Padding

Based on how much content will be displayed three different sizes of padding.

States

Expanded Padding

A record is a repeatable horizontal container that allows for the consistent layout of a variety of data.

Examples

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

A record is a unique component in that it is a framework for displaying information in a cohesive and consistent manner. This page is more about what you CAN build with records and the basic patterns to compose those records with.

Simple Record

At its simplest form, the structure of a record is an element with a class of iris-record with a grid inside. The grid is the composition layer and is how the record has flexibility in displaying data.

Data goes here.
<div class="iris-record">
    <div class="container">
        <div class="row">
            <div class="col-12">Data goes here.</div>
        </div>
    </div>
</div>

Grid Record

The majority of records are going to contain multiple Iris components, structured in grid columns. Let's take a look at an example of a transaction row.

October 28, 2017
Internet Banking Transfer
-.53
<div class="iris-record" data-spacing="compact">
    <div class="container-fluid">
        <div class="row">
            <div class="col-2">
                <div class="iris-date iris-date--linear">
                    <span class="iris-date__full-date">October 28, 2017</span>
                    <span class="iris-date__day" aria-hidden="true">28</span>
                    <span class="iris-date__month" aria-hidden="true">Oct</span>
                    <span class="iris-date__year" aria-hidden="true">2017</span>
                </div>
            </div>

            <div class="col-5">
                <div>Internet Banking Transfer</div>
            </div>

            <div class="col-4">
                <div>-.53</div>
            </div>

            <div class="col-1">
                <div class="iris-chevron"></div>
            </div>
        </div>
    </div>
</div>

Zebra Striped Records

To create zebra striped records, wrap a group of records in a parent container with a class of striped. This will alternate the record background color between light grey and white to improve readility and scannability.

Data goes here.
Data goes here.
Data goes here.
<div class="striped">
    <div class="iris-record">
        <div class="container">
            <div class="row">
                <div class="col-12">Data goes here.</div>
            </div>
        </div>
    </div>
    <div class="iris-record">
        <div class="container">
            <div class="row">
                <div class="col-12">Data goes here.</div>
            </div>
        </div>
    </div>
    <div class="iris-record">
        <div class="container">
            <div class="row">
                <div class="col-12">Data goes here.</div>
            </div>
        </div>
    </div>
</div>

The grid allows for a fully open building model to decide how to format and structure the records for a given interface. To see additional examples of records built using this same format, please see the records pattern page.

Decorators

Compact

Compact Row (10px padding on top and bottom)
Compact Row (10px padding on top and bottom)
<div class="iris-record" data-spacing="compact">
    <div class="container">
        <div class="row">
            <div class="col-12">Compact Row (10px padding on top and bottom)</div>
        </div>
    </div>
</div>

Cozy

Cozy Row (20px padding on top and bottom)
Cozy Row (20px padding on top and bottom)
<div class="iris-record" data-spacing="cozy">
    <div class="container">
        <div class="row">
            <div class="col-12">Cozy Row (20px padding on top and bottom)</div>
        </div>
    </div>
</div>

Comfortable

Comfortable Row (30px padding on top and bottom)
Comfortable Row (30px padding on top and bottom)
<div class="iris-record" data-spacing="comfortable">
    <div class="container">
        <div class="row">
            <div class="col-12">Comfortable Row (30px padding on top and bottom)</div>
        </div>
    </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:

  • Always ensure that the accessibility notes for components used in the record are followed.

Variables

The variables used in this component are as follows:

// Border Variables
$record-border-color: $alto;

Themeability

Nothing is themeable in this component.

A record is a repeatable horizontal container that allows for the consistent layout of a variety of data.

Transaction List

Standard

October 28, 2017
Internet Banking Transfer
-.53
<div class="iris-record" data-spacing="compact">
    <div class="container-fluid iris-gutter--small">
        <div class="row flex-items--center">
            <div class="col-2">
                <div class="iris-date iris-date--linear">
                    <span class="iris-date__full-date">October 28, 2017</span>
                    <span class="iris-date__day" aria-hidden="true">28</span>
                    <span class="iris-date__month" aria-hidden="true">Oct</span>
                    <span class="iris-date__year" aria-hidden="true">2017</span>
                </div>
            </div>

            <div class="col-5">
                <div class="truncate">Internet Banking Transfer</div>
            </div>

            <div class="col-4">
                <div class="text--right font-weight--bold font-color--primary">-.53</div>
            </div>

            <div class="col-1 flex flex-justify--end">
                <div class="iris-chevron"></div>
            </div>
        </div>
    </div>
</div>

Running Balance

October 28, 2017
Internet Banking Transfer
-.53
$1,000,546,323.43
<div class="iris-record" data-spacing="compact">
    <div class="container-fluid iris-gutter--small">
        <div class="row flex-items--center">
            <div class="col-2">
                <div class="iris-date iris-date--linear">
                    <span class="iris-date__full-date">October 28, 2017</span>
                    <span class="iris-date__day" aria-hidden="true">28</span>
                    <span class="iris-date__month" aria-hidden="true">Oct</span>
                    <span class="iris-date__year" aria-hidden="true">2017</span>
                </div>
            </div>

            <div class="col-5">
                <div class="truncate">Internet Banking Transfer</div>
            </div>

            <div class="col-4">
                <div class="text--right font-weight--bold font-color--primary">-.53</div>
                <small class="text--right font--italic font-color--neutral block">$1,000,546,323.43</small>
            </div>

            <div class="col-1 flex flex-justify--end">
                <div class="iris-chevron"></div>
            </div>
        </div>
    </div>
</div>

Admin ACH

3226
ACH Only
Retail
Retail ACH
<div class="iris-record" data-spacing="cozy">
    <div class="container-fluid">
        <div class="row">
            <div class="col-1">
                <span class="font-weight--bold">3226</span>
            </div>

            <div class="col flex flex-content--between flex--wrap">
                <div class="flex width--100">
                    <div class="font-weight--bold block pad-right--sm">
                        ACH Only
                    </div>
                    <span class="iris-badge iris-badge--rounded iris-badge--neutral">
                        <div class="iris-badge__content">Retail</div>
                    </span>
                </div>

                <small>Retail ACH</small>
            </div>

            <div class="col-2 flex flex-items--center flex-justify--end">
                <button class="iris-button iris-button--ghost">
                    <span class="iris-button__icon font-icon-pencil font-size--md"></span>
                </button>

                <button class="iris-button iris-button--ghost">
                    <span class="iris-button__icon font-icon-trashcan font-size--md"></span>
                </button>
            </div>
        </div>
    </div>
</div>

Transfers

Scheduled

October 28, 2017
$200,000
Every week
<div class="iris-record" data-spacing="comfortable">
    <div class="container-fluid">
        <div class="row flex-items--center">
            <div class="col-1">
                <div class="iris-date iris-date--stacked-full">
                    <span class="iris-date__full-date">October 28, 2017</span>
                    <span class="iris-date__day" aria-hidden="true">28</span>
                    <span class="iris-date__month" aria-hidden="true">Oct</span>
                    <span class="iris-date__year" aria-hidden="true">2017</span>
                </div>
            </div>

            <div class="col-8 flex flex-content--between flex--wrap">
                <div class="flex flex-items--center width--100 pad-bottom--md">
                    <div class="font-weight--bold pad-right--lg">$200,000</div>
                    <div class="iris-account iris-account--single-line pad-right--lg width--auto" data-color="account-color-2" data-size="small">
                        <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="Lance's Checking Account">Lance'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>**********376</span>
                            </div>
                        </div>
                    </div>

                    <div class="font-icon-arrow-right pad-right--lg"></div>

                    <div class="iris-account iris-account--single-line width--auto" data-color="account-color-6" data-size="small">
                        <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="John's Checking Account">John'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>**********323</span>
                            </div>
                        </div>
                    </div>
                </div>

                <small>
                    <span class="font-icon-add"></span>
                    Every week
                </small>
            </div>

            <div class="col-3 flex flex-items--center flex-justify--end">
                <button class="iris-button iris-button--ghost">
                    <span class="iris-button__icon font-icon-pencil font-size--md"></span>
                </button>

                <button class="iris-button iris-button--ghost">
                    <span class="iris-button__icon font-icon-trashcan font-size--md"></span>
                </button>
            </div>
        </div>
    </div>
</div>

History

October 27, 2017
$435,000
Every two weeks
Succeeded
<div class="iris-record" data-spacing="comfortable">
    <div class="container-fluid">
        <div class="row flex-items--center">
            <div class="col-1">
                <div class="iris-date iris-date--stacked-full">
                    <span class="iris-date__full-date">October 27, 2017</span>
                    <span class="iris-date__day" aria-hidden="true">27</span>
                    <span class="iris-date__month" aria-hidden="true">Oct</span>
                    <span class="iris-date__year" aria-hidden="true">2017</span>
                </div>
            </div>

            <div class="col-8 flex flex-content--between flex--wrap">
                <div class="flex flex-items--center width--100 pad-bottom--md">
                    <div class="font-weight--bold pad-right--lg">$435,000</div>
                    <div class="iris-account iris-account--single-line pad-right--lg width--auto" data-color="account-color-3" data-size="small">
                        <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="Vera's Checking Account">Vera'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>****323
                                </span>
                            </div>
                        </div>
                    </div>

                    <div class="font-icon-arrow-right pad-right--lg"></div>

                    <div class="iris-account iris-account--single-line width--auto" data-color="account-color-7" data-size="small">
                        <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="Colin's Checking Account">Colin'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>****496
                                </span>
                            </div>
                        </div>
                    </div>
                </div>

                <small>
                    <span class="font-icon-add"></span>
                    Every two weeks
                </small>
            </div>
            <div class="col-2">
                <div class="iris-badge iris-badge--rounded iris-badge--positive">
                    <div class="iris-badge__content">Succeeded</div>
                </div>
            </div>

            <div class="col-1 flex flex-justify--end">
                <div class="iris-chevron"></div>
            </div>
        </div>
    </div>
</div>

BillPay

Scheduled

July 4, 1776
$150.00 America
Monthly
from
est to send on October 28, 2017
<div class="iris-record" data-spacing="comfortable">
    <div class="container-fluid">
        <div class="row flex-items--center">
            <div class="col-1">
                <div class="iris-date iris-date--stacked-full">
                    <span class="iris-date__full-date">July 4, 1776</span>
                    <span class="iris-date__day" aria-hidden="true">4</span>
                    <span class="iris-date__month" aria-hidden="true">Jul</span>
                    <span class="iris-date__year" aria-hidden="true">1776</span>
                </div>
            </div>

            <div class="col-1">
                <div class="iris-avatar" data-size="small" title="Home Costs">
                    <div class="iris-avatar__inner">
                        <span class="iris-avatar__icon font-icon-house" aria-hidden="true"></span>
                    </div>
                </div>
            </div>

            <div class="col-3 flex flex-content--between flex--wrap">
                <div class="font-weight--bold width--100 pad-bottom--md">
                    <span class="pad-right--md">$150.00</span>
                    <span>America</span>
                </div>

                <small>
                    <span class="font-icon-add"></span>
                    Monthly
                </small>
            </div>

            <div class="col-4 flex flex-content--between flex--wrap">
                <div class="flex flex-items--center width--100 pad-bottom--md">
                    <small class="pad-right--sm">from</small>
                    <div class="iris-account iris-account--single-line pad-right--lg width--auto" data-color="account-color-2" data-size="small">
                        <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="King George's Checking Account">King George'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>****9592
                                </span>
                            </div>
                        </div>
                    </div>
                </div>

                <small>
                    est to send on
                    <span class="iris-date iris-date--linear">
                        <span class="iris-date__full-date">October 28, 2017</span>
                        <span class="iris-date__day" aria-hidden="true">28</span>
                        <span class="iris-date__month" aria-hidden="true">Oct</span>
                        <span class="iris-date__year" aria-hidden="true">2017</span>
                    </span>
                </small>
            </div>

            <div class="col-3 flex flex-items--center flex-justify--end">
                <button class="iris-button iris-button--ghost">
                    <span class="iris-button__icon font-icon-pencil font-size--md"></span>
                </button>

                <button class="iris-button iris-button--ghost">
                    <span class="iris-button__icon font-icon-trashcan font-size--md"></span>
                </button>
            </div>
        </div>
    </div>
</div>

History

July 4, 1776
$150.00 America
Monthly
from
est to send on October 28, 2017
Succeeded
<div class="iris-record" data-spacing="comfortable">
    <div class="container-fluid">
        <div class="row flex-items--center">
            <div class="col-1">
                <div class="iris-date iris-date--stacked-full">
                    <span class="iris-date__full-date">July 4, 1776</span>
                    <span class="iris-date__day" aria-hidden="true">4</span>
                    <span class="iris-date__month" aria-hidden="true">Jul</span>
                    <span class="iris-date__year" aria-hidden="true">1776</span>
                </div>
            </div>

            <div class="col-1">
                <div class="iris-avatar" data-size="small" title="Home Costs">
                    <div class="iris-avatar__inner">
                        <span class="iris-avatar__icon font-icon-house" aria-hidden="true"></span>
                    </div>
                </div>
            </div>

            <div class="col-3">
                <div class="font-weight--bold width--100 pad-bottom--md">
                    <span class="pad-right--md">$150.00</span>
                    <span>America</span>
                </div>

                <small>
                    <span class="font-icon-add"></span>
                    Monthly
                </small>
            </div>

            <div class="col-4">
                <div class="flex flex-items--center width--100 pad-bottom--md">
                    <small class="pad-right--sm">from</small>
                    <div class="iris-account iris-account--single-line pad-right--lg width--auto" data-color="account-color-2" data-size="small">
                        <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="King George's Checking Account">King George'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>****9592</span>
                            </div>
                        </div>
                    </div>
                </div>

                <small>
                    est to send on
                    <span class="iris-date iris-date--linear">
                        <span class="iris-date__full-date">October 28, 2017</span>
                        <span class="iris-date__day" aria-hidden="true">28</span>
                        <span class="iris-date__month" aria-hidden="true">Oct</span>
                        <span class="iris-date__year" aria-hidden="true">2017</span>
                    </span>
                </small>
            </div>

            <div class="col-2">
                <div class="iris-badge iris-badge--rounded iris-badge--positive">
                    <div class="iris-badge__content">Succeeded</div>
                </div>
            </div>

            <div class="col-1 flex flex-justify--end">
                <div class="iris-chevron"></div>
            </div>
        </div>
    </div>
</div>

Settings // Notifications

Accounts

Transaction Alert

1 account

Balance Summary Alert

2 accounts
<div class="iris-content-header">
    <h4 class="iris-content-header__title">Accounts</h4>
</div>
<div class="width--lg mar-left--25">
    <div class="iris-record" data-spacing="cozy">
        <div class="container-fluid">
            <div class="row flex-items--center">
                <div class="col-4">
                    <h4>Transaction Alert</h4>
                </div>

                <div class="col-3">
                    <span class="font-color--neutral">1 account</span>
                </div>

                <div class="col-3 flex flex-items--center flex-justify--between">
                    <div class="font-icon-email-at font-size--md font-color--positive"></div>
                    <div class="font-icon-circle-filled font-size--sm font-color--neutral"></div>
                    <div class="font-icon-circle-filled font-size--sm font-color--neutral"></div>
                </div>

                <div class="col-2 flex flex-items--center flex-justify--end">
                    <button class="iris-button iris-button--ghost">
                        <span class="iris-button__icon font-icon-pencil font-size--md"></span>
                    </button>
                </div>
            </div>
        </div>
    </div>

    <div class="iris-record" data-spacing="cozy">
        <div class="container-fluid">
            <div class="row flex-items--center">
                <div class="col-4">
                    <h4>Balance Summary Alert</h4>
                </div>

                <div class="col-3">
                    <span class="font-color--neutral">2 accounts</span>
                </div>

                <div class="col-3 flex flex-items--center flex-justify--between">
                    <div class="font-icon-email-at font-size--md font-color--positive"></div>
                    <div class="font-icon-circle-filled font-size--sm font-color--neutral"></div>
                    <div class="font-icon-circle-filled font-size--sm font-color--neutral"></div>
                </div>

                <div class="col-2 flex flex-items--center flex-justify--end">
                    <button class="iris-button iris-button--ghost">
                        <span class="iris-button__icon font-icon-pencil font-size--md"></span>
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>

Settings // Widgets

Accounts See details
<div class="iris-record" data-spacing="cozy">
    <div class="container-fluid">
        <div class="row flex-items--center">
            <div class="col-1">
                <span class="font-icon-generic-icon-money font-size--xl"></span>
            </div>

            <div class="col-9">
                <span class="font-weight--bold pad-right--sm">Accounts</span>
                <a href="##">See details</a>
            </div>

            <div class="col-2 flex flex-items--center flex-justify--end">
                <button class="iris-button iris-button--ghost">
                    <span class="iris-button__icon font-icon-star-line font-size--md"></span>
                </button>

                <button class="iris-button iris-button--ghost">
                    <span class="iris-button__icon font-icon-pencil font-size--md font-size--md"></span>
                </button>
            </div>
        </div>
    </div>
</div>

ACH Activity

Scheduled

July 28, 2017
Payroll
$5,900
Requires Authorization
<div class="iris-record" data-spacing="cozy">
    <div class="container-fluid">
        <div class="row flex-items--center">
            <div class="col-1">
                <div class="iris-date iris-date--stacked-full">
                    <span class="iris-date__full-date">July 28, 2017</span>
                    <span class="iris-date__day" aria-hidden="true">28</span>
                    <span class="iris-date__month" aria-hidden="true">Jul</span>
                    <span class="iris-date__year" aria-hidden="true">2017</span>
                </div>
            </div>

            <div class="col-4">
                <strong>Payroll</strong>
            </div>

            <div class="col-2">
                <strong>$5,900</strong>
            </div>

            <div class="col-3 flex flex-justify--end">
                <span class="iris-badge iris-badge--rounded iris-badge--negative">
                    <div class="iris-badge__content">Requires Authorization</div>
                </span>
            </div>

            <div class="col-2 flex flex-items--center flex-justify--end">
                <button class="iris-button iris-button--ghost">
                    <span class="iris-button__icon font-icon-pencil font-size--md"></span>
                </button>

                <div class="iris-chevron"></div>
            </div>
        </div>
    </div>
</div>

History

July 28, 2017
Payroll
$5,900
Rejected
<div class="iris-record" data-spacing="cozy">
    <div class="container-fluid">
        <div class="row flex-items--center">
            <div class="col-1">
                <div class="iris-date iris-date--stacked-full">
                    <span class="iris-date__full-date">July 28, 2017</span>
                    <span class="iris-date__day" aria-hidden="true">28</span>
                    <span class="iris-date__month" aria-hidden="true">Jul</span>
                    <span class="iris-date__year" aria-hidden="true">2017</span>
                </div>
            </div>

            <div class="col-4">
                <strong>Payroll</strong>
            </div>

            <div class="col-3">
                <strong>$5,900</strong>
            </div>

            <div class="col-3 flex flex-justify--end">
                <span class="iris-badge iris-badge--rounded iris-badge--negative">
                    <div class="iris-badge__content">Rejected</div>
                </span>
            </div>

            <div class="col-1 flex flex-items--center flex-justify--end">
                <div class="iris-chevron"></div>
            </div>
        </div>
    </div>
</div>

ACH Templates

Name
Account
Status
Amount
Hamilton
Checking
18640683729573953
Active
$56,325.93
<div class="iris-content-header">
    <div class="container-fluid">
        <div class="row">
            <div class="col-3">
                <span class="iris-content-header__item">Name</span>
            </div>

            <div class="col-3">
                <span class="iris-content-header__item">Account</span>
            </div>

            <div class="col-2">
                <span class="iris-content-header__item">Status</span>
            </div>

            <div class="col-3 text--right">
                <span class="iris-content-header__item">Amount</span>
            </div>
        </div>
    </div>
</div>

<div class="iris-record" data-spacing="compact">
    <div class="container-fluid iris-gutter--small">
        <div class="row flex-items--center">
            <div class="col-3">
                Hamilton
            </div>

            <div class="col-3">
                <div class="truncate">Checking</div>
                <small class="block truncate">18640683729573953</small>
            </div>

            <div class="col-2">
                <div class="iris-badge iris-badge--rounded iris-badge--positive">
                    <div class="iris-badge__content">Active</div>
                </div>
            </div>

            <div class="col-3 text--right">
                <strong>$56,325.93</strong>
            </div>

            <div class="col-1 flex flex-justify--end">
                <button class="iris-button iris-button--ghost" aria-label="Edit">
                    <span class="iris-button__icon font-icon-pencil font-size--md"></span>
                </button>
            </div>
        </div>
    </div>
</div>