American Express American Express |

Notifications

Purpose

A succinct and clear message lets customers understand and manage time-sensitive notifications and tasks.

Some messages serve as a notice only, while others encourage the customer to take action. Messages can be accompanied by icons, providing clearer context. The priority level of a message determines its location, size, and length of time of display. Colors are especially effective in conveying the status or tone of the message.

Page-Level Messages

Usage

Page-level messages prominently appear directly below the navigation and above all other components displayed on the page.

The width of a page-level message will always match and maintain parity with the page’s content width. For example, if a page content width is 980px, then the width of the message will also be 980px.

Requirements

Some notification components may require both dls.css and dls.js for dismissible functionality.

Variations

There are four types of page-level messages:

Positive: Used when an action was performed successfully.
Neutral: Used when there are tips or information that’s less important.
Warning: Used when an action is out of the ordinary or might not be desired.
Custom: Used when the above messages do not meet the business requirements.

Example

Page Level Message

Example - Positive

Copy
<div class="alert alert-positive alert-dismissible anim-fade in" data-toggle="dismissible" role="alert">
  <i class="icon" data-dls-icon="success" data-dls-icon-variant="outline" data-dls-icon-size="md" data-dls-icon-role="decorative"></i>
  <span>This is a positive alert message with a <a class="link-underlined" href="#example">text link</a> inline.</span>
  <button type="button" class="glyph glyph-lg dls-gray-05" aria-label="Close" data-dismiss>
    <i class="glyph glyph-lg dls-gray-05" data-dls-glyph="close"></i>
  </button>
</div>

Example - Neutral

Copy
<div class="alert alert-neutral alert-dismissible anim-fade in" data-toggle="dismissible" role="alert">
  <i class="icon" data-dls-icon="info" data-dls-icon-variant="outline" data-dls-icon-size="md" data-dls-icon-role="decorative"></i>
  <span>This is a neutral alert message with a <a class="link-underlined" href="#example">text link</a> inline.</span>
  <button type="button" class="glyph glyph-lg dls-gray-05" aria-label="Close" data-dismiss>
    <i class="glyph glyph-lg dls-gray-05" data-dls-glyph="close"></i>
  </button>
</div>

Example - Warning

Copy
<div class="alert alert-warn alert-dismissible anim-fade in" data-toggle="dismissible" role="alert">
  <i class="icon" data-dls-icon="warning" data-dls-icon-variant="outline" data-dls-icon-size="md" data-dls-icon-role="decorative"></i>
  <span>This is a warning alert message with a <a class="link-underlined" href="#example">text link</a> inline.</span>
  <button type="button" class="glyph glyph-lg dls-gray-05" aria-label="Close" data-dismiss>
    <i class="glyph glyph-lg dls-gray-05" data-dls-glyph="close"></i>
  </button>
</div>

Example - Custom

Copy
<div class="alert alert-neutral alert-dismissible anim-fade in" data-toggle="dismissible" role="alert">
  <i class="icon" data-dls-icon="processing" data-dls-icon-variant="outline" data-dls-icon-size="md" data-dls-icon-role="decorative"></i>
  <span>This is a processing message with a <a href="#" class="link-inline link-underlined">text link</a> inline.</span>
  <button type="button" class="glyph glyph-lg dls-gray-05" aria-label="Close" data-dismiss>
    <i class="glyph glyph-lg dls-gray-05" data-dls-glyph="close"></i>
  </button>
</div>

<div class="alert alert-neutral alert-dismissible anim-fade in" data-toggle="dismissible" role="alert">
  <i class="icon" data-dls-icon="processing" data-dls-icon-variant="outline" data-dls-icon-size="md" data-dls-icon-role="decorative"></i>
  <span>Your last payment of $1.00 was received on Mon. June 27, 2022, and is being processed. Your balance will be updated in 24-36 hours.</span>
  <button type="button" class="glyph glyph-lg dls-gray-05" aria-label="Close" data-dismiss>
    <i class="glyph glyph-lg dls-gray-05" data-dls-glyph="close"></i>
  </button>
</div>

Component-Level Messages

Usage

Component-level messages appear within a component.

Examples of component-level messages include, but are not limited to: form field error states, component null (when a component doesn’t load), and other notifications about a specific component’s status.

Example - Form Level Error Message

In this example, the form is a component, so the error message appears above the form and within the component container.

Copy
<div class="card">
    <form class="form-has-warning">
        <div class="pad-responsive-lr pad-tb alert dls-red" role="alert">
          <i class="margin-1-r" data-dls-icon="warning" data-dls-icon-variant="filled" data-dls-icon-size="sm" data-dls-icon-role="decorative"></i>
          <span>You’ve entered an incorrect User ID or password. Try again.</span>
        </div>
        <hr>
        <div class="pad-responsive stack">
            <div>
                <label for="eg1-user">User ID</label>
                <input type="text" id="eg1-user" class="form-control" value="char•••••">
            </div>
            <div>
                <label for="eg1-pass">Password</label>
                <input type="password" id="eg1-pass" class="form-control">
            </div>
            <div>
                <label for="eg1-card">Cards - My Accounts</label>
                <div class="select form-control" data-toggle="select">
                    <select aria-label="navigate to" id="eg1-card">
                        <option value="1"></option>
                        <option value="2">Membership Rewards</option>
                        <option value="3">Merchant Account</option>
                        <option value="4">American Express @ Work</option>
                    </select>
                </div>
            </div>
            <div>
                <div class="checkbox">
                    <input type="checkbox" id="eg1-save" class="form-control" name="eg1-save" vale="1" />
                    <label for="eg1-save">Remember Me</label>
                </div>
            </div>
            <div>
                <button type="submit" id="dls-example-login-button" class="btn fluid margin-auto-lr">Log In</button>
            </div>
            <ul class="list-links">
                <li>
                    <a class="link-underlined" href="#example">Forgot User ID or Password?</a>
                </li>
                <li>
                    <a class="link-underlined" href="#example">Create New Online Account</a>
                </li>
            </ul>
        </div>
    </form>
</div>

Example - Component Null

Copy
<div class="alert alert-neutral alert-dialog border-0" role="alert">
  <i class="icon" data-dls-icon="info" data-dls-icon-variant="filled" data-dls-icon-size="md" data-dls-icon-role="decorative"></i>
  <p>Sorry about that. Your Rewards information is unavailable at this time. Please try again later.</p>
</div>

Example - Zero Data State

Copy
<div class="alert alert-neutral alert-dialog border-0" role="alert">
  <p class="label-2">There are no transactions yet for this period.</p>
  <p class="body-1">Previous transactions can be found by changing the date range.</p>
</div>

System-Level Messages

Usage

System-level messages convey important statuses related to the customers account.

Examples: when the customers card has been canceled or when our back-end system fails to properly load and populate the expected data and/or content of a page.

Example - Update Failed

Copy
<div class="pad-responsive-lr pad-3-tb text-align-center border" role="alert">
  <i class="icon dls-color-warning margin-b" data-dls-icon="warning" data-dls-icon-variant="outline" data-dls-icon-size="lg" data-dls-icon-role="decorative"></i>
  <h1 class="heading-4 margin-1-b">We were unable to update your password.</h1>
  <p class="body-3">We're sorry, but it looks like something went wrong. Please try again later. If you need immediate assistance, please <a href="#example" class="link-underlined">contact us</a>.</p>
</div>

Example - Page Doesn’t Exist

Copy
<div class="border text-align-center pad-3-tb" role="alert">
  <div class="pad-responsive-lr stack">
    <i class="icon dls-color-warning" data-dls-icon="warning" data-dls-icon-variant="outline" data-dls-icon-size="lg" data-dls-icon-role="decorative"></i>
    <h1 class="heading-4 margin-1-b">We're sorry, but we couldn't find this page.</h1>
    <p class="body-3">The web address you've requested has either moved or no longer exists.</p>
  </div>
  <hr class="margin-3-tb" />
  <a class="btn btn-primary margin-responsive-lr" href="#example">Go to Account Home</a>
</div>

Journey Completion Messages

Usage

When customers successfully conclude a journey, provide a journey completion message. Customers may also see primary and secondary buttons for related journeys, as well as legal and/or supplementary copy below. While this is a recommended template for designers, the exact content will depend on the journey.

Example

Copy
<div class="border text-align-center">
    <div class="pad-responsive-lr stack pad-3-t">
      <i class="dls-color-success" data-dls-icon="success" data-dls-icon-variant="outline" data-dls-icon-size="lg" data-dls-icon-role="decorative"></i>
      <h1 class="heading-4 dls-gray-05 margin-3-b">
          Thank you! Your payment has been submitted.
      </h1>
      <p>
          <span class="label-2 dls-gray-05">Confirmation number: </span>
          <span class="body-1 dls-black">12345</span>
      </p>
      <p>
          Your payment of <span class="font-weight-medium">$2,000.32</span> has been
          received for your Blue Cash Preferred <sup>®</sup> Card -5555 on
          <span class="font-weight-medium">Wed, Oct 19</span> from <span class="font-weight-medium">
          JP Morgan Chase Bank Personal Checking -4444.</span> Your balance
          will be updated in 24-36 hours.
      </p>
      <ul class="list-links-inline-separator">
          <li><a class="link-underlined" href="#example">Print</a></li>
          <li><a class="link-underlined" href="#example">Save</a></li>
      </ul>
      <div class="stack-1-a-sm-down pad-1-t pad-3-b">
          <button class="btn btn-max btn-secondary margin-1-lr-sm-up">Go to Account Home</button>
          <button class="btn btn-max">Make Another Payment</button>
      </div>
    </div>
    <div class="pad-3-tb pad-responsive-lr dls-gray-01-bg">
        <p>
            You have the option to cancel this payment through 12:00 MST.
            Limitations apply. For help regarding payments, please visit our FAQs.
        </p>
    </div>
</div>

Functionality

Notification components may require both dls.css and dls.js for dismissible functionality. If you are using dls.js, reference the attributes below.

Attribute Name Options Description Required
data-toggle dismissible Creates a dismissible object; required for dls.js functionality. yes
data-dismiss none Removes the component specified by data-toggle on click. Placed on the element that triggers the dismissible function. no