<ul class="usa-card-group">
<li class="tablet:grid-col-4 usa-card">
<div class="usa-card__container">
<header class="usa-card__header">
<h2 class="usa-card__heading">Card</h2>
</header>
<div class="usa-card__body">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis earum tenetur quo cupiditate, eaque qui officia recusandae. Excepturi nobis dolores molestias! Quas quisquam a officia eos.</p>
</div>
<div class="usa-card__footer">
<button class="usa-button">Visit Florida Keys</button>
</div>
</div>
</li>
<li class="tablet:grid-col-4 usa-card">
<div class="usa-card__container">
<header class="usa-card__header">
<h2 class="usa-card__heading">Card with media</h2>
</header>
<div class="usa-card__media">
<div class="usa-card__img">
<img src="https://designsystem.digital.gov/img/introducing-uswds-2-0/built-to-grow--alt.jpg" alt="A placeholder image">
</div>
</div>
<div class="usa-card__body">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis earum tenetur quo cupiditate, eaque qui officia recusandae. Excepturi nobis dolores molestias! Quas quisquam a officia eos.</p>
</div>
<div class="usa-card__footer">
<button class="usa-button">Visit Florida Keys</button>
</div>
</div>
</li>
<li class="tablet:grid-col-4 usa-card usa-card--header-first">
<div class="usa-card__container">
<header class="usa-card__header">
<h2 class="usa-card__heading">Media and header first</h2>
</header>
<div class="usa-card__media">
<div class="usa-card__img">
<img src="https://designsystem.digital.gov/img/introducing-uswds-2-0/built-to-grow--alt.jpg" alt="A placeholder image">
</div>
</div>
<div class="usa-card__body">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis earum tenetur quo cupiditate, eaque qui officia recusandae.</p>
</div>
<div class="usa-card__footer">
<button class="usa-button">Visit Florida Keys</button>
</div>
</div>
</li>
<li class="tablet:grid-col-4 usa-card usa-card--header-first">
<div class="usa-card__container">
<header class="usa-card__header">
<h2 class="usa-card__heading">Inset media</h2>
</header>
<div class="usa-card__media usa-card__media--inset">
<div class="usa-card__img">
<img src="https://designsystem.digital.gov/img/introducing-uswds-2-0/built-to-grow--alt.jpg" alt="A placeholder image">
</div>
</div>
<div class="usa-card__body">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis earum tenetur quo cupiditate, eaque qui officia recusandae.</p>
</div>
<div class="usa-card__footer">
<button class="usa-button">Visit Florida Keys</button>
</div>
</div>
</li>
<li class="tablet:grid-col-4 usa-card usa-card--header-first">
<div class="usa-card__container">
<header class="usa-card__header">
<h2 class="usa-card__heading">Exdent media</h2>
</header>
<div class="usa-card__media usa-card__media--exdent">
<div class="usa-card__img">
<img src="https://designsystem.digital.gov/img/introducing-uswds-2-0/built-to-grow--alt.jpg" alt="A placeholder image">
</div>
</div>
<div class="usa-card__body">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis earum tenetur quo cupiditate, eaque qui officia recusandae.</p>
</div>
<div class="usa-card__footer">
<button class="usa-button">Visit Florida Keys</button>
</div>
</div>
</li>
</ul>
No notes defined.
<ul class="usa-card-group">
<li class="tablet:grid-col-4 usa-card">
<div class="usa-card__container">
<header class="usa-card__header">
<h2 class="usa-card__heading">Card</h2>
</header>
<div class="usa-card__body">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis earum tenetur quo cupiditate, eaque qui officia recusandae. Excepturi nobis dolores molestias! Quas quisquam a officia eos.</p>
</div>
<div class="usa-card__footer">
<button class="usa-button">Visit Florida Keys</button>
</div>
</div>
</li>
<li class="tablet:grid-col-4 usa-card">
<div class="usa-card__container">
<header class="usa-card__header">
<h2 class="usa-card__heading">Card with media</h2>
</header>
<div class="usa-card__media">
<div class="usa-card__img">
<img src="https://designsystem.digital.gov/img/introducing-uswds-2-0/built-to-grow--alt.jpg" alt="A placeholder image">
</div>
</div>
<div class="usa-card__body">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis earum tenetur quo cupiditate, eaque qui officia recusandae. Excepturi nobis dolores molestias! Quas quisquam a officia eos.</p>
</div>
<div class="usa-card__footer">
<button class="usa-button">Visit Florida Keys</button>
</div>
</div>
</li>
<li class="tablet:grid-col-4 usa-card usa-card--header-first">
<div class="usa-card__container">
<header class="usa-card__header">
<h2 class="usa-card__heading">Media and header first</h2>
</header>
<div class="usa-card__media">
<div class="usa-card__img">
<img src="https://designsystem.digital.gov/img/introducing-uswds-2-0/built-to-grow--alt.jpg" alt="A placeholder image">
</div>
</div>
<div class="usa-card__body">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis earum tenetur quo cupiditate, eaque qui officia recusandae.</p>
</div>
<div class="usa-card__footer">
<button class="usa-button">Visit Florida Keys</button>
</div>
</div>
</li>
<li class="tablet:grid-col-4 usa-card usa-card--header-first">
<div class="usa-card__container">
<header class="usa-card__header">
<h2 class="usa-card__heading">Inset media</h2>
</header>
<div class="usa-card__media usa-card__media--inset">
<div class="usa-card__img">
<img src="https://designsystem.digital.gov/img/introducing-uswds-2-0/built-to-grow--alt.jpg" alt="A placeholder image">
</div>
</div>
<div class="usa-card__body">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis earum tenetur quo cupiditate, eaque qui officia recusandae.</p>
</div>
<div class="usa-card__footer">
<button class="usa-button">Visit Florida Keys</button>
</div>
</div>
</li>
<li class="tablet:grid-col-4 usa-card usa-card--header-first">
<div class="usa-card__container">
<header class="usa-card__header">
<h2 class="usa-card__heading">Exdent media</h2>
</header>
<div class="usa-card__media usa-card__media--exdent">
<div class="usa-card__img">
<img src="https://designsystem.digital.gov/img/introducing-uswds-2-0/built-to-grow--alt.jpg" alt="A placeholder image">
</div>
</div>
<div class="usa-card__body">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis earum tenetur quo cupiditate, eaque qui officia recusandae.</p>
</div>
<div class="usa-card__footer">
<button class="usa-button">Visit Florida Keys</button>
</div>
</div>
</li>
</ul>
package:
name: null
version: 2.1.0
uswds:
path: ../../dist