Content Hierarchy
Usage
A card is comprised of the following three sections: header, body, and actions (optional).
Header
The header should clearly and concisely name the component’s function. By default, a card’s standard header (.heading-4) is left-aligned for legibility and consistent with other containers. Sometimes, there may be marketing scenarios in which a header is centered-aligned for optimal page layout. The decision to center-align a card’s header will be at the designer’s discretion.
Body
The body section of a card is usually comprised of multiple DLS components, e.g. text, functional components, data sets, etc., in order to provide the customer with enough information to take action.
Actions
It’s important to provide the customer with a clear call-to-action so that they can proceed to the appropriate next steps, view, or to complete a request.
Specs - Hierarchy
Types
Usage
There are three types of cards: standard, special and relative. Additionally, when two or more cards are paired together, we call them relative cards and their relationship changes how the cards may appear, to maintain hierarchy and design best practice throughout the page.
Standard Cards
Usage
Standard cards are the most basic kind of card. They can stand alone or be grouped together. Text on a standard card should be left aligned.
Specs - Standard Cards
Header = Heading 4
Body = Body 1
Format = Left-aligned
Medium & Large Breakpoints
Small & X-Small Breakpoints
Example - Standard Cards
Header
Body
<div class="dls-gray-02-bg pad" style="max-width: 350px">
<div class="card">
<div class="pad-responsive">
<p class="heading-4">Header</p>
</div>
<hr>
<div class="pad-responsive">
<p class="pad-1-tb body-1">Body</p>
</div>
<hr>
<div class="pad-responsive stack-1">
<button class="btn btn-block margin-auto-lr">Primary Action</button>
<button class="btn btn-block btn-tertiary margin-auto-lr">Tertiary Action</button>
</div>
</div>
</div>Special Cards
Usage
Special cards center the content and are used to differentiate it from other content on the page. An example of special cards are the balance, payment and loyalty cards located on the Account Hub.
Specs - Special Cards
Vertical spacing remains the same across all breakpoint ranges.
Header Label = Heading 3
Header Currency = Heading 6
Body Label = Heading 3
Data Entry = Body 1
Glyph = Large
Format = Center-aligned
Example - Special Cards
Payment Due
$10,000.12
Total Balance
A few words go a long way, please keep these to a maximum of three lines.
$14,000.00
No Pre-Set Spending Limit
A few words go a long way, please keep these to a maximum of three lines.
<div class="dls-gray-02-bg pad" style="max-width: 350px">
<div class="card text-align-center">
<div class="pad-responsive">
<p class="heading-3 dls-gray-05 margin-b">
Payment Due
</p>
<p class="heading-6">$10,000<span class="sup">.12</span></p>
</div>
<hr>
<div class="pad-responsive">
<div class="flex-inline">
<p class="heading-3 dls-gray-05" id="totalBalance-special-card">
Total Balance
</p>
<div class="tooltip-container" data-toggle="tooltip" style="padding-left: 5px">
<button data-attach-tooltip class="btn-tooltip glyph glyph-lg" aria-labelledby="totalBalance-special-card"></button>
<div class="tooltip tooltip-info" data-placement="right" data-trigger="click" data-type="info"
role="tooltip">
<div class="tooltip-arrow">
<div class="tooltip-arrow-pointer"></div>
</div>
<div id="info-2-special-card" class="tooltip-inner">
<p>A few words go a long way, please keep these to a maximum of three
lines.</p>
<button class="tooltip-close fluid dls-bright-blue">Close</button>
</div>
</div>
</div>
</div>
<p class="body-1">$14,000.00</p>
</div>
<hr>
<div class="pad-responsive">
<div class="flex-inline">
<p class="heading-3 dls-gray-05 pad-r-1" id="no-pre-set-special-card">
No Pre-Set Spending Limit
</p>
<div class="tooltip-container" data-toggle="tooltip" style="padding-left: 5px">
<button data-attach-tooltip aria-labelledby="no-pre-set-special-card" class="btn-tooltip glyph glyph-lg"></button>
<div class="tooltip tooltip-info" data-placement="right" data-trigger="click" data-type="info" role="tooltip">
<div class="tooltip-arrow">
<div class="tooltip-arrow-pointer"></div>
</div>
<div id="info-3-special-card" class="tooltip-inner">
<p>A few words go a long way, please keep these to a maximum of three
lines.</p>
<button class="tooltip-close fluid dls-bright-blue">Close</button>
</div>
</div>
</div>
</div>
<p><a class="link-underlined" href="#">Check spending Power</a></p>
</div>
<hr>
<div class="pad-responsive">
<button class="btn btn-block margin-auto-lr">Balance Details</button>
</div>
</div>
</div>Relative Cards
Usage
Relative cards follow the same spacing specifications as special cards. They display key information on a variety of customer experiences. Give special attention to:
- Alignment: Titles and buttons between cards should align whenever possible.
- Color: Use button color to indicate hierarchy between cards.
- Importance and dimension: All cards in the same row should be the same height.
View Buttons for more about button usage.
Example - Relative Cards
Do this.
Relative cards should stay under 500px height at 1024px breakpoint.
<div>
<div class="dls-gray-02-bg pad row stack-sm-down">
<div class="col-xs-12 col-md-4">
<div class="card card-relative text-align-center">
<div class="pad-responsive">
<p class="heading-3 dls-gray-05 margin-b">
Payment Due
</p>
<p class="heading-6">$10,000<span class="sup">.12</span></p>
</div>
<hr>
<div class="pad-responsive">
<div class="flex-inline">
<p class="heading-3 dls-gray-05" id="totalBalance-relative-card">
Total Balance
</p>
<div class="tooltip-container" data-toggle="tooltip" style="padding-left: 5px">
<button data-attach-tooltip class="btn-tooltip glyph glyph-lg" aria-labelledby="totalBalance-relative-card"></button>
<div class="tooltip tooltip-info" data-placement="right" data-trigger="click" data-type="info"
role="tooltip">
<div class="tooltip-arrow">
<div class="tooltip-arrow-pointer"></div>
</div>
<div id="info-2-relative-card" class="tooltip-inner">
<p>A few words go a long way, please keep these to a maximum of three
lines.</p>
<button class="tooltip-close fluid dls-bright-blue">Close</button>
</div>
</div>
</div>
</div>
<p class="body-1">$14,000.00</p>
</div>
<hr>
<div class="pad-responsive">
<div class="flex-inline">
<p class="heading-3 dls-gray-05 pad-r-1" id="no-pre-set-relative-card">
No Pre-Set Spending Limit
</p>
<div class="tooltip-container" data-toggle="tooltip" style="padding-left: 5px">
<button data-attach-tooltip aria-labelledby="no-pre-set-relative-card" class="btn-tooltip glyph glyph-lg"></button>
<div class="tooltip tooltip-info" data-placement="right" data-trigger="click" data-type="info"
role="tooltip">
<div class="tooltip-arrow">
<div class="tooltip-arrow-pointer"></div>
</div>
<div id="info-3-relative-card" class="tooltip-inner">
<p>A few words go a long way, please keep these to a maximum of three
lines.</p>
<button class="tooltip-close fluid dls-bright-blue">Close</button>
</div>
</div>
</div>
</div>
<p><a class="link-underlined" href="#">Check spending Power</a></p>
</div>
<hr>
<div class="pad-responsive margin-3-b-md-up">
<button class="btn btn-block margin-auto-lr margin-3-b-md-up">Balance Details</button>
</div>
</div>
</div>
<div class="col-xs-12 col-md-4">
<div class="card card-relative">
<div class="pad-responsive position-relative text-align-center">
<p class="heading-3 dls-gray-05 margin-b">Your payment is due in 14 days on</p>
<p class="heading-6">April 4</p>
</div>
<hr>
<div class="pad-responsive position-relative text-align-center">
<div class="stack-1">
<button class="btn btn-block margin-auto-lr">Make Payments</button>
<button class="btn btn-block margin-auto-lr btn-tertiary">Billing Statements</button>
</div>
</div>
</div>
</div>
<div class="col-xs-12 col-md-4">
<div class="card card-relative">
<div class="accent-bar dls-cobrand-amazon-bg"></div>
<div class="pad-responsive position-relative text-align-center">
<p class="heading-3 margin-b">Amazon Rewards</p>
<p class="heading-6">10,000 Points</p>
</div>
<hr>
<div class="pad-responsive position-relative text-align-center">
<div class="stack-1">
<button class="btn btn-block margin-auto-lr dls-cobrand-amazon-bg dls-black">Explore Rewards</button>
<button class="btn btn-block margin-auto-lr btn-tertiary">Open Savings</button>
</div>
</div>
</div>
</div>
</div>
</div>Don't do this.
These relative cards extend beyond a height of 500px at a 1024px breakpoint.
<div class="stack dls-example-containers-image-toggle stack">
<div class="media-container stack">
<div class="hidden-sm-down">
<img
src="../../assets/img/visuals/components/cards/example-relative-cards-dont-do-this-desktop-underlined.png"
class="fluid"
style="max-width:1130px;"
alt="Containers Specs">
</div>
<div class="hidden-md-up">
<img
src="../../assets/img/visuals/components/cards/example-relative-cards-dont-do-this-mobile-underlined.png"
style="max-width:375px;"
alt="Containers Specs">
</div>
</div>
</div>Showcase Cards
Usage
Showcase cards can display graphical elements and are configurable, unlike special and standard cards. Configurations include any combination of: a background color or a background image, an icon, and a clear call-to-action.
Specs - Showcase Cards with Icon and Buttons
Vertical spacing remains the same across all breakpoint ranges.
Icon = Large
Header Label = Heading 3
Font = Body 1
Format = Center-aligned
Example - Showcase Card with Icons, Buttons, and Backgrounds
<div class="dls-gray-02-bg pad-responsive">
<div class="row stack-sm-down">
<div class="col-xs-12 col-md-4">
<div class="card card-relative pad-responsive">
<div class="text-align-center">
<span class="icon icon-lg dls-bright-blue dls-icon-merchandise margin-1-t margin-b"></span>
<p class="heading-3 margin-1-b">Accepted at More Places</p>
<p class="body-1 margin-3-b">Your points will add up fast now that you can use your American Express Card at
more merchants than ever, including the big brand stores you shop at every day.</p>
</div>
<div class="stack-1">
<button class="btn btn-block margin-auto-lr">View Nearby Shops</button>
<button class="btn btn-block margin-auto-lr btn-secondary btn-overflow">About Shopping Rewards</button>
</div>
</div>
</div>
<div class="col-xs-12 col-md-4">
<div class="card card-relative pad-responsive">
<div class="card-img-bg"
style="background-image:url('../../assets/img/visuals/layout/containers-showcase.jpg');">
<div class="card-img-tint card-img-hero-tint dls-black-bg"></div>
</div>
<div class="position-relative text-align-center dls-white">
<span class="icon icon-lg dls-icon-merchandise margin-1-t margin-b"></span>
<p class="heading-3 margin-1-b">Accepted At More Places</p>
<div class="body-1 margin-3-b">With more Merchants choosing to accept American Express, including the big brand
stores you spend at every day, your points will add up fast.</div>
</div>
<div class="stack-1">
<button class="btn btn-block margin-auto-lr btn-white">View Nearby Place</button>
<button class="btn btn-block margin-auto-lr btn-white-secondary btn-overflow">About Shopping Rewards</button>
</div>
</div>
</div>
<div class="col-xs-12 col-md-4">
<div class="card card-relative dls-bright-blue-bg pad-responsive">
<div class="text-align-center dls-white">
<span class="icon icon-lg dls-icon-merchandise margin-1-t margin-b"></span>
<p class="heading-3 margin-1-b">Accepted At More Places</p>
<p class="body-1 margin-3-b">With more Merchants choosing to accept American Express, including the big brand
stores you spend at every day, your points will add up fast.</p>
</div>
<div class="stack-1">
<button class="btn btn-block margin-auto-lr btn-white">View Nearby Place</button>
<button class="btn btn-block margin-auto-lr btn-white-secondary btn-overflow">About Shopping Rewards</button>
</div>
</div>
</div>
</div>
</div>Rounded Corners Cards
Usage
Like showcase cards, rounded corner cards can display graphical elements and are configurable. Configurations include any combination of the following: an icon, a text link, and a call to action.
Specs - Rounded Corners Cards
Container Color = White (background), Gray 03 (stroke)
Corners = 4px radius
Header = Heading 4, Deep Blue
Body = Body 1, Gray 06
Class Name = .card-rounded
Example - Rounded Corners Cards
<div class="dls-gray-02-bg">
<div class="row pad-responsive stack-sm-down">
<div class="col-md-4 flex">
<div class="card card-rounded pad-responsive stack flex flex-column flex-justify-between">
<p class="heading-4 dls-deep-blue" role="heading" aria-level="2">
Header 1
</p>
<p class="body-1">
This is body copy. We recommend keeping this copy to a four line maximum in order to prevent cards from growing too tall.
</p>
<ul class="list-links-inline-separator">
<li><a href="#" class="link-underlined">Text Link 1</a></li>
<li><a href="#" class="link-underlined">Text Link 2</a></li>
</ul>
</div>
</div>
<div class="col-md-4 flex">
<div class="card card-rounded pad-responsive stack flex flex-column flex-justify-between">
<p class="heading-4 dls-deep-blue" id="tips" role="heading" aria-level="2">
10 tips for traveling with kids
</p>
<p class="body-1">
Wondering how you're going to survive a journey with kids? Relax - help is at hand.
</p>
<ul class="list-links-inline-separator">
<li><a aria-describedby="tips" href="#" class="link-underlined">Read Tips</a></li>
</ul>
</div>
</div>
<div class="col-md-4 flex">
<div class="card card-rounded pad-responsive stack flex flex-column flex-justify-between">
<p class="heading-4 dls-deep-blue" id="things-to-do" role="heading" aria-level="2">
Five things to do with family in Sydney
</p>
<p class="body-1">
Let Sydney blogger, journalist, photographer, and mother-of-two Jade Warne show you around.
</p>
<ul class="list-links-inline-separator">
<li><a aria-describedby="things-to-do" href="#" class="link-underlined">Discover More</a></li>
</ul>
</div>
</div>
</div>
</div>Actionable Cards
Usage
Actionable cards may be directly actionable, i.e. clicking or tapping anywhere within the card will trigger an action. Let customers know they can take action by using a hover state for this variation. These cards do not contain calls-to-action, as the entire card is actionable. Actionable cards have a hover effect on desktop. This hover effect is not available on mobile.
Specs - Actionable Cards
Container Color = White (background), Gray 03 (stroke)
Corners = 4px radius
Icon = Large, Bright Blue
Header = Heading 3, Bright Blue
Body = Body 1, Gray 06
Class Name = .card-actionable
Example - Actionable Cards
<div class="dls-gray-01-bg">
<div class="row pad-responsive stack-responsive-a">
<!-- Button Example -->
<div class="col-md-4 flex">
<a class="card card-rounded card-actionable pad-responsive text-align-left" href="#example">
<div class="flex">
<div class="pad-responsive-r">
<i data-dls-icon="airplane" data-dls-icon-variant="outline" data-dls-icon-size="lg" data-dls-icon-role="decorative"></i>
</div>
<div>
<h4 class="heading-3 margin-1-b display-block dls-bright-blue">
Header 1
</h4>
<p class="body-1 dls-gray-06">
This is body copy. We recommend keeping this copy to a four line maximum.
</p>
</div>
</div>
</a>
</div>
<!-- Link Example -->
<div class="col-md-4 flex">
<a class="card card-rounded card-actionable pad-responsive" href="#example">
<div class="flex">
<div class="pad-responsive-r">
<i data-dls-icon="gas-station" data-dls-icon-variant="outline" data-dls-icon-size="lg" data-dls-icon-role="decorative"></i>
</div>
<div>
<h4 class="heading-3 margin-1-b display-block">
2% Cash Back
</h4>
<p class="body-1 dls-gray-06">
At U.S. gas stations.
</p>
</div>
</div>
</a>
</div>
<!-- Div Example -->
<div class="col-md-4 flex">
<a class="card card-rounded card-actionable pad-responsive" href="#example">
<div class="flex">
<div class="pad-responsive-r">
<i data-dls-icon="grocery" data-dls-icon-variant="outline" data-dls-icon-size="lg" data-dls-icon-role="decorative"></i>
</div>
<div>
<h4 class="heading-3 margin-1-b display-block">
3% Cash Back
</h4>
<p class="body-1 dls-gray-06">
At U.S. supermarkets, on up to $6,000 per year in purchases (then 1%).
</p>
</div>
</div>
</a>
</div>
</div>
</div>Card Classes
| Class Name | Usage | Required |
|---|---|---|
.card |
creates a card with white background and light gray border | |
.card-relative |
makes card a vertical flexbox container with the last card section growing if needed | .card |
.card-flex |
makes card a flexbox container | .card |
.card-content |
content container for card | .card |
.pad-responsive |
adds responsive padding to all sides of a card | .card |
.card-img-bg |
sets background size cover | .card |
.card-img-tint |
sets opacity to 20% | .card |
.card-img-overlay |
stretches image to cover card | .card |