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"></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 topic card.
The .m-card--topic modifier is added.
<article class="m-card m-card--topic">
<a href="#">
<div class="m-card__icon">
</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">
</div>
<div class="m-card__footer">
<span>See all money topics</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 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">
</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">
</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">
</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">
</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">
</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>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"></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"></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"></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"></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"></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"></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"></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"></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"></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 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">
<h3 class="m-card__heading">
<a href="#">
Protecting your finances during the coronavirus emergency
</a>
</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">
<a href="#">
Read more
</a>
</div>
</article>
<article class="m-card">
<h3 class="m-card__heading">
<a href="#">
Striving for equity
</a>
</h3>
<p>
We’re working to build a stronger nation by advancing racial and economic equality for all.
</p>
<div class="m-card__footer">
<a href="#">
Read more
</a>
</div>
</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">
<h3 class="m-card__heading">
<a href="#">
Protecting your finances during the coronavirus emergency
</a>
</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">
<a href="#">
Read more
</a>
</div>
</article>
<article class="m-card">
<h3 class="m-card__heading">
<a href="#">
Striving for equity
</a>
</h3>
<p>
We’re working to build a stronger nation by advancing racial and economic equality for all.
</p>
<div class="m-card__footer">
<a href="#">
Read more
</a>
</div>
</article>
<article class="m-card">
<h3 class="m-card__heading">
<a href="#">
Rental assistance helps renters and landlords make ends meet
</a>
</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">
<a href="#">
Read more
</a>
</div>
</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">
<h3 class="m-card__heading">
<a href="#">
Protecting your finances during the coronavirus emergency
</a>
</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">
<a href="#">
Read more
</a>
</div>
</article>
<article class="m-card">
<h3 class="m-card__heading">
<a href="#">
Striving for equity
</a>
</h3>
<p>
We’re working to build a stronger nation by advancing racial and economic equality for all.
</p>
<div class="m-card__footer">
<a href="#">
Read more
</a>
</div>
</article>
<article class="m-card">
<h3 class="m-card__heading">
<a href="#">
Rental assistance helps renters and landlords make ends meet
</a>
</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">
<a href="#">
Read more
</a>
</div>
</article>
<article class="m-card">
<h3 class="m-card__heading">
<a href="#">
Protecting your finances during the coronavirus emergency
</a>
</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">
<a href="#">
Read more
</a>
</div>
</article>
</div>
</div>