Badges
Purpose
Badges are small indicators used to notify or provide supporting information at a quick glance.
Alert Badges
Usage
An alert badge notifies customers of any unread messages, updates, or other important account information.
Number Alert Badge
Specs
Height = 25px
Width = 25px (only applies to single and double digits)
Text Link (if applicable) = Body 1, Bright Blue
Class Name = .badge
Examples
Single digit
Double digit
Number exceeding 99
<div class="row margin-b stack">
<div class="col-sm-12">
<div class="badge">8</div>
</div>
<div class="col-sm-12">
<p class="dls-gray-05">Single digit</p>
</div>
</div>
<div class="row margin-b stack">
<div class="col-sm-12">
<div class="badge">42</div>
</div>
<div class="col-sm-12">
<p class="dls-gray-05">Double digit</p>
</div>
</div>
<div class="row stack">
<div class="col-sm-12">
<div class="badge margin-r">182</div>
<div class="badge">1300</div>
</div>
<div class="col-sm-12">
<p class="dls-gray-05">Number exceeding 99</p>
</div>
</div>Icon with Number Alert Badge
Specs
Stroke = 1px inside, White
Icon = Medium
Class Name = .badge-icon-default
Example
<div class="display-inline">
<div class="badge badge-icon-default">3</div>
<span class="sr-only">unread messages</span>
<i class="dls-bright-blue display-block" data-dls-icon="cards" data-dls-icon-variant="filled" data-dls-icon-size="md" title="Cards icon"></i>
</div>Text Alert Badge
Specs
Height = 25px
Width = Variable
Class Name = .badge-text
Examples - English
<div class="row links-list stack-3-r pad-1">
<div class="text-align-left">
<div class="badge badge-text dls-color-success-bg">Approved</div>
</div>
<div class="text-align-left">
<div class="badge badge-text dls-color-warning-bg">Denied</div>
</div>
<div class="text-align-left">
<div class="badge badge-text dls-color-bright-blue-bg">New</div>
</div>
</div>Outline Badges
Usage
An outline badge provides more context about a specific piece of information.
Specs
Height = 33px
Width = Variable; default (single or double digits) is 33x33px
Color = Bright Blue
Class Name = .badge-outline
Example - Outline badge near transaction
The Additional Card Member's initials are placed in an outline badge next to the transaction, to allow the primary Card Member to see which Card Member made which purchase.
<p>The Additional Card Member's initials are placed in an outline badge next to the transaction, to allow the primary Card Member to see which Card Member made which purchase.
</p>
<div class="flex stack-1-r margin-t">
<button class="tooltip-btn-circle" aria-label="Select all members"><span class="badge badge-outline filled">All</span></button>
<div data-toggle="tooltip" class="tooltip-container">
<button
data-attach-tooltip
class="tooltip-btn-circle"
aria-describedby="cf"
><span class="badge badge-outline">CF</span></button>
<div class="tooltip" data-placement="top" role="tooltip">
<div class="tooltip-arrow">
<div class="tooltip-arrow-pointer"></div>
</div>
<div id="cf" class="tooltip-inner">Charles Frost</div>
</div>
</div>
<div data-toggle="tooltip" class="tooltip-container">
<button
data-attach-tooltip
class="tooltip-btn-circle"
aria-describedby="kf"
><span class="badge badge-outline">KF</span></button>
<div class="tooltip" data-placement="top" role="tooltip">
<div class="tooltip-arrow">
<div class="tooltip-arrow-pointer"></div>
</div>
<div id="kf" class="tooltip-inner">Katherine Frost</div>
</div>
</div>
<div data-toggle="tooltip" class="tooltip-container">
<button
data-attach-tooltip
class="tooltip-btn-circle"
aria-describedby="jf"
><span class="badge badge-outline">JF</span></button>
<div class="tooltip" data-placement="top" role="tooltip">
<div class="tooltip-arrow">
<div class="tooltip-arrow-pointer"></div>
</div>
<div id="jf" class="tooltip-inner">Justin Frost</div>
</div>
</div>
</div>Status Badges
Usage
A status badge is a visual indicator of a specific service or feature. Always use it with a supporting text label for context.
Specs
Badge = 10x10px
Color = Warning (red), Attention (yellow) , Success (green), Neutral (gray)
Font = Body 1, Gray 06
Use Case Example = AutoPay
Class Name = .badge-status
States
Red: Error
Yellow: Suspended, Pending, or In Progress
Green: Active
Grey: Off or Inactive
Example - States
<div class="margin-1-b flex">
<span class="badge badge-status dls-color-warning-bg"></span>
<span>AutoPay Error</span>
</div>
<div class="margin-1-b flex">
<span class="badge badge-status dls-color-attention-bg"></span>
<span>AutoPay paused until Apr 2017</span>
</div>
<div class="margin-1-b flex">
<span class="badge badge-status dls-color-success-bg"></span>
<span>AutoPay On</span>
</div>
<div class="flex">
<span class="badge badge-status dls-color-neutral-bg"></span>
<span>AutoPay Off</span>
</div>Example - Autopay
Make a Payment
Amount
Minimum Payment
$35.00
Date
February 2, 2017
Today
Account
JPMorgan Chase Bank
Checking Account -7108
<div class="border bordered">
<div class="flex flex-align-center pad">
<h2 class="heading-4 pad-r flex-item-grow">Make a Payment</h2>
<div class="text-align-right flex-item-grow">
<div class="flex-inline">
<span class="badge badge-status dls-gray-04-bg"></span>
<span>AutoPay Off</span>
</div>
<a class="margin-1-l text-nowrap link-underlined" href="#example">Start AutoPay</a>
</div>
</div>
<div class="pad">
<div class="row">
<div class="col-xs-4 col-md-2">
<h3 class="body-1">Amount</h3>
</div>
<div class="col-xs-4 col-md-3">
<p>Minimum Payment</p>
</div>
<div class="col-xs-4 col-md-7">
<p>$35.00</p>
</div>
</div>
</div>
<div class="pad">
<div class="row">
<div class="col-xs-4 col-md-2">
<h3 class="body-1">Date</h3>
</div>
<div class="col-xs-4 col-md-3">
<p>February 2, 2017</p>
</div>
<div class="col-xs-4 col-md-7">
<p>Today</p>
</div>
</div>
</div>
<div class="pad">
<div class="row">
<div class="col-xs-4 col-md-2">
<h3 class="body-1">Account</h3>
</div>
<div class="col-xs-4 col-md-3">
<p>JPMorgan Chase Bank</p>
</div>
<div class="col-xs-4 col-md-7">
<p>Checking Account -7108</p>
</div>
</div>
</div>
<div class="pad text-align-right">
<button class="btn">Make a Payment</button>
</div>
</div>