Cards are blocks of content that are surrounded by a border.
A single card with multiple links. In this layout the heading is a link.
<article class="m-card">
<h2 class="m-card_heading">
<a href="#">
<div class="m-card_icon">{% include icons/lightbulb.svg %}</div>
<span>Bank accounts</span>
</a>
</h2>
<ul class="m-list">
<li class="m-list_item">
How quickly can I get money after I deposit a check into my
checking account? What is a deposit hold?
<a href="#" class="a_link">
Read answer
</a>
</li>
<li class="m-list_item">
I would like to be able to have my friend or family member
help with my bill-paying and banking.
What are my options?
<a href="#" class="a_link">
Read answer
</a>
</li>
</ul>
<p class="m-card_footer">
<a href="#">
Learn more about bank accounts
</a>
</p>
</article>A single featured card.
The .m-card__featured modifier is added.
A featured card differs from the default card in that the whole
content area is wrapped in a link.
<article class="m-card m-card__featured">
<a href="#">
<h2 class="m-card_heading">
<div class="m-card_icon">
{% include icons/lightbulb.svg %}
</div>
</h2>
<p>
Have a problem with a financial product or service?
</p>
<div class="m-card_footer">
<span>Submit a complaint</span>
</div>
</a>
</article>A single topic card.
The .m-card__topic modifier is added.
<article class="m-card m-card__topic">
<a href="#">
<div class="m-card_icon">
{% include icons/lightbulb.svg %}
</div>
<div class="m-card_footer">
<span>Credit reports</span>
</div>
</a>
</article>A topic card with a call to action for its card group.
The .m-card__topic and .m-card__topic-action modifiers are added.
<article class="m-card m-card__topic m-card__topic-action">
<a href="#">
<div class="m-card_icon">
{% include icons/arrow-right-round.svg %}
</div>
<div class="m-card_footer">
<span>See all money topics</span>
</div>
</a>
</article>A single highlight card.
The .m-card__highlight modifier is added.
<article class="m-card m-card__highlight">
<a href="#">
<h3>
Protecting your finances during the coronavirus emergency
</h3>
<p>
We are committed to providing up-to-date information and resources.
Learn more about protecting and managing your finances during this difficult time.
</p>
<div class="m-card_footer">
<span>Read more</span>
</div>
</a>
</article>A single breakout card.
The .m-card__breakout modifier is added.
<article class="m-card m-card__breakout">
<a href="#">
<img class="m-card_img"
src="https://dummyimage.com/210x120/"
alt="">
<div class="m-card_inner-wrapper">
<div class="m-card_footer">
<span>
Buy a house
</span>
</div>
</div>
</a>
</article>A default group of cards together is stacked vertically.
<div class="o-card-group">
<div class="o-card-group_cards">
<article class="m-card">
<h2 class="m-card_heading">
<a href="#">
<div class="m-card_icon">{% include icons/lightbulb.svg %}</div>
<span>Bank accounts</span>
</a>
</h2>
<ul class="m-list">
<li class="m-list_item">
How quickly can I get money after I deposit a check
into my checking account? What is a deposit hold?
<a href="#" class="a_link">
Read answer
</a>
</li>
<li class="m-list_item">
I would like to be able to have my friend or family
member help with my bill-paying and banking.
What are my options?
<a href="#" class="a_link">
Read answer
</a>
</li>
</ul>
<p class="m-card_footer">
<a href="#">
Learn more about bank accounts
</a>
</p>
</article>
<article class="m-card">
<h2 class="m-card_heading">
<a href="#">
<div class="m-card_icon">{% include icons/car.svg %}</div>
<span>Auto loans</span>
</a>
</h2>
<ul class="m-list">
<li class="m-list_item">
What effect will shopping for
an auto loan have on my credit?
<a href="#" class="a_link">
Read answer
</a>
</li>
<li class="m-list_item">
I owe more on my current loan than my current
vehicle is worth. What do I need to know
if I buy a new vehicle?
<a href="#" class="a_link">
Read answer
</a>
</li>
</ul>
<p class="m-card_footer">
<a href="#">
Learn more about auto loans
</a>
</p>
</article>
<article class="m-card">
<h2 class="m-card_heading">
<a href="#">
<div class="m-card_icon">{% include icons/credit-card.svg %}</div>
<span>Credit cards</span>
</a>
</h2>
<ul class="m-list">
<li class="m-list_item">
What is a credit card interest rate? What does APR mean?
<a href="#" class="a_link">
Read answer
</a>
</li>
<li class="m-list_item">
How do I dispute a charge on my credit card bill?
<a href="#" class="a_link">
Read answer
</a>
</li>
</ul>
<p class="m-card_footer">
<a href="#">
Learn more about credit cards
</a>
</p>
</article>
</div>
</div>A group of cards broken into two columns.
The .o-card-group__column-2 modifier is added.
<div class="o-card-group o-card-group__column-2">
<div class="o-card-group_cards">
<article class="m-card">
<h2 class="m-card_heading">
<a href="#">
<div class="m-card_icon">{% include icons/lightbulb.svg %}</div>
<span>Bank accounts</span>
</a>
</h2>
<ul class="m-list">
<li class="m-list_item">
How quickly can I get money after I deposit a check
into my checking account? What is a deposit hold?
<a href="#" class="a_link">
Read answer
</a>
</li>
<li class="m-list_item">
I would like to be able to have my friend or family
member help with my bill-paying and banking.
What are my options?
<a href="#" class="a_link">
Read answer
</a>
</li>
</ul>
<p class="m-card_footer">
<a href="#">
Learn more about bank accounts
</a>
</p>
</article>
<article class="m-card">
<h2 class="m-card_heading">
<a href="#">
<div class="m-card_icon">{% include icons/car.svg %}</div>
<span>Auto loans</span>
</a>
</h2>
<ul class="m-list">
<li class="m-list_item">
What effect will shopping for
an auto loan have on my credit?
<a href="#" class="a_link">
Read answer
</a>
</li>
<li class="m-list_item">
I owe more on my current loan than my current
vehicle is worth. What do I need to know
if I buy a new vehicle?
<a href="#" class="a_link">
Read answer
</a>
</li>
</ul>
<p class="m-card_footer">
<a href="#">
Learn more about auto loans
</a>
</p>
</article>
<article class="m-card">
<h2 class="m-card_heading">
<a href="#">
<div class="m-card_icon">{% include icons/credit-card.svg %}</div>
<span>Credit cards</span>
</a>
</h2>
<ul class="m-list">
<li class="m-list_item">
What is a credit card interest rate? What does APR mean?
<a href="#" class="a_link">
Read answer
</a>
</li>
<li class="m-list_item">
How do I dispute a charge on my credit card bill?
<a href="#" class="a_link">
Read answer
</a>
</li>
</ul>
<p class="m-card_footer">
<a href="#">
Learn more about credit cards
</a>
</p>
</article>
</div>
</div>A group of cards broken into three columns.
The .o-card-group__column-3 modifier is added.
<div class="o-card-group o-card-group__column-3">
<div class="o-card-group_cards">
<article class="m-card">
<h2 class="m-card_heading">
<a href="#">
<div class="m-card_icon">{% include icons/lightbulb.svg %}</div>
<span>Bank accounts</span>
</a>
</h2>
<ul class="m-list">
<li class="m-list_item">
How quickly can I get money after I deposit a check
into my checking account? What is a deposit hold?
<a href="#" class="a_link">
Read answer
</a>
</li>
<li class="m-list_item">
I would like to be able to have my friend or family
member help with my bill-paying and banking.
What are my options?
<a href="#" class="a_link">
Read answer
</a>
</li>
</ul>
<p class="m-card_footer">
<a href="#">
Learn more about bank accounts
</a>
</p>
</article>
<article class="m-card">
<h2 class="m-card_heading">
<a href="#">
<div class="m-card_icon">{% include icons/car.svg %}</div>
<span>Auto loans</span>
</a>
</h2>
<ul class="m-list">
<li class="m-list_item">
What effect will shopping for
an auto loan have on my credit?
<a href="#" class="a_link">
Read answer
</a>
</li>
<li class="m-list_item">
I owe more on my current loan than my current
vehicle is worth. What do I need to know
if I buy a new vehicle?
<a href="#" class="a_link">
Read answer
</a>
</li>
</ul>
<p class="m-card_footer">
<a href="#">
Learn more about auto loans
</a>
</p>
</article>
<article class="m-card">
<h2 class="m-card_heading">
<a href="#">
<div class="m-card_icon">{% include icons/credit-card.svg %}</div>
<span>Credit cards</span>
</a>
</h2>
<ul class="m-list">
<li class="m-list_item">
What is a credit card interest rate? What does APR mean?
<a href="#" class="a_link">
Read answer
</a>
</li>
<li class="m-list_item">
How do I dispute a charge on my credit card bill?
<a href="#" class="a_link">
Read answer
</a>
</li>
</ul>
<p class="m-card_footer">
<a href="#">
Learn more about credit cards
</a>
</p>
</article>
</div>
</div>A group of featured cards together with a heading and green background.
The .o-card-group__bg-green modifier is added to the group and
the .m-card__featured modifier is added to the cards.
<div class="o-card-group o-card-group__column-3 o-card-group__bg-green">
<h2>We want to hear from you</h2>
<div class="o-card-group_cards">
<article class="m-card m-card__featured">
<a href="#">
<h2 class="m-card_heading">
<div class="m-card_icon">
{% include icons/complaint.svg %}
</div>
</h2>
<p>
Have a problem with a financial product or service?
</p>
<div class="m-card_footer">
<span>Submit a complaint</span>
</div>
</a>
</article>
<article class="m-card m-card__featured">
<a href="#">
<h2 class="m-card_heading">
<div class="m-card_icon">
{% include icons/lightbulb.svg %}
</div>
</h2>
<p>
Have a question on a financial topic?
Browse answers to hundreds of financial questions.
</p>
<div class="m-card_footer">
<span>Browse Ask CFPB</span>
</div>
</a>
</article>
<article class="m-card m-card__featured">
<a href="#">
<h2 class="m-card_heading">
<div class="m-card_icon">
{% include icons/open-quote.svg %}
</div>
</h2>
<p>
Tell us your experiences with money
and financial services. The CFPB is listening.
</p>
<div class="m-card_footer">
<span>Tell your story</span>
</div>
</a>
</article>
</div>
</div>A group of two cards.
The .o-card-group__count-2 modifier is added.
We are committed to providing up-to-date information and resources. Learn more about protecting and managing your finances during this difficult time.
We’re working to build a stronger nation by advancing racial and economic equality for all.
<div class="o-card-group o-card-group__count-2">
<div class="o-card-group_cards">
<article class="m-card m-card__highlight">
<a href="#">
<h3>
Protecting your finances during the coronavirus emergency
</h3>
<p>
We are committed to providing up-to-date information and resources.
Learn more about protecting and managing your finances during this difficult time.
</p>
<div class="m-card_footer">
<span>Read more</span>
</div>
</a>
</article>
<article class="m-card m-card__highlight">
<a href="#">
<h3>
Striving for equity
</h3>
<p>
We’re working to build a stronger nation by advancing racial and economic equality for all.
</p>
<div class="m-card_footer">
<span>Read more</span>
</div>
</a>
</article>
</div>
</div>A group of three cards.
The .o-card-group__count-3 modifier is added.
We are committed to providing up-to-date information and resources. Learn more about protecting and managing your finances during this difficult time.
We’re working to build a stronger nation by advancing racial and economic equality for all.
State and local programs are distributing billions of dollars in rental assistance to help renters stay housed during the pandemic.
<div class="o-card-group o-card-group__count-3">
<div class="o-card-group_cards">
<article class="m-card m-card__highlight">
<a href="#">
<h3>
Protecting your finances during the coronavirus emergency
</h3>
<p>
We are committed to providing up-to-date information and resources.
Learn more about protecting and managing your finances during this difficult time.
</p>
<div class="m-card_footer">
<span>Read more</span>
</div>
</a>
</article>
<article class="m-card m-card__highlight">
<a href="#">
<h3>
Striving for equity
</h3>
<p>
We’re working to build a stronger nation by advancing racial and economic equality for all.
</p>
<div class="m-card_footer">
<span>Read more</span>
</div>
</a>
</article>
<article class="m-card m-card__highlight">
<a href="#">
<h3>
Rental assistance helps renters and landlords make ends meet
</h3>
<p>
State and local programs are distributing billions of dollars in rental assistance to help renters stay housed during the pandemic.
</p>
<div class="m-card_footer">
<span>Read more</span>
</div>
</a>
</article>
</div>
</div>A group of four cards.
The .o-card-group__count-4 modifier is added.
We are committed to providing up-to-date information and resources. Learn more about protecting and managing your finances during this difficult time.
We’re working to build a stronger nation by advancing racial and economic equality for all.
State and local programs are distributing billions of dollars in rental assistance to help renters stay housed during the pandemic.
We are committed to providing up-to-date information and resources. Learn more about protecting and managing your finances during this difficult time.
<div class="o-card-group o-card-group__count-4">
<div class="o-card-group_cards">
<article class="m-card m-card__highlight">
<a href="#">
<h3>
Protecting your finances during the coronavirus emergency
</h3>
<p>
We are committed to providing up-to-date information and resources.
Learn more about protecting and managing your finances during this difficult time.
</p>
<div class="m-card_footer">
<span>Read more</span>
</div>
</a>
</article>
<article class="m-card m-card__highlight">
<a href="#">
<h3>
Striving for equity
</h3>
<p>
We’re working to build a stronger nation by advancing racial and economic equality for all.
</p>
<div class="m-card_footer">
<span>Read more</span>
</div>
</a>
</article>
<article class="m-card m-card__highlight">
<a href="#">
<h3>
Rental assistance helps renters and landlords make ends meet
</h3>
<p>
State and local programs are distributing billions of dollars in rental assistance to help renters stay housed during the pandemic.
</p>
<div class="m-card_footer">
<span>Read more</span>
</div>
</a>
</article>
<article class="m-card m-card__highlight">
<a href="#">
<h3>
Protecting your finances during the coronavirus emergency
</h3>
<p>
We are committed to providing up-to-date information and resources.
Learn more about protecting and managing your finances during this difficult time.
</p>
<div class="m-card_footer">
<span>Read more</span>
</div>
</a>
</article>
</div>
</div>A group of topic cards together.
<div class="o-card-group o-card-group__flow">
<h2>Popular money topics</h2>
<div class="o-card-group_cards">
<article class="m-card m-card__topic">
<a href="#">
<div class="m-card_icon">
{% include icons/lightbulb.svg %}
</div>
<div class="m-card_footer">
<span>Credit reports</span>
</div>
</a>
</article>
<article class="m-card m-card__topic">
<a href="#">
<div class="m-card_icon">
{% include icons/lightbulb.svg %}
</div>
<div class="m-card_footer">
<span>Debt collection</span>
</div>
</a>
</article>
<article class="m-card m-card__topic">
<a href="#">
<div class="m-card_icon">
{% include icons/lightbulb.svg %}
</div>
<div class="m-card_footer">
<span>Mortgages</span>
</div>
</a>
</article>
<article class="m-card m-card__topic">
<a href="#">
<div class="m-card_icon">
{% include icons/lightbulb.svg %}
</div>
<div class="m-card_footer">
<span>Credit cards</span>
</div>
</a>
</article>
<article class="m-card m-card__topic m-card__topic-action">
<a href="#">
<div class="m-card_icon">
{% include icons/arrow-right-round.svg %}
</div>
<div class="m-card_footer">
<span>See all money topics</span>
</div>
</a>
</article>
</div>
</div>A group of breakout cards together.
<div class="o-card-group o-card-group__column-3">
<h2>Get help planning for future goals</h2>
<div class="o-card-group_cards">
<article class="m-card m-card__breakout">
<a href="#">
<img class="m-card_img"
src="https://dummyimage.com/210x120/"
alt="">
<div class="m-card_inner-wrapper">
<div class="m-card_footer">
<span>
Buy a house
</span>
</div>
</div>
</a>
</article>
<article class="m-card m-card__breakout">
<a href="#">
<img class="m-card_img"
src="https://dummyimage.com/210x120/"
alt="">
<div class="m-card_inner-wrapper">
<div class="m-card_footer">
<span>
Paying for college
</span>
</div>
</div>
</a>
</article>
<article class="m-card m-card__breakout">
<a href="#">
<img class="m-card_img"
src="https://dummyimage.com/210x120/"
alt="">
<div class="m-card_inner-wrapper">
<div class="m-card_footer">
<span>
Get an auto loan
</span>
</div>
</div>
</a>
</article>
</div>
</div>