Skip to main content

Card

Cards contain content and actions about a single subject.


Default Card

Component Preview

  • Card

    Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis earum tenetur quo cupiditate, eaque qui officia recusandae.

    Visit Florida Keys

  • Card with Media

    A placeholder image

    Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis earum tenetur quo cupiditate, eaque qui officia recusandae.

    Visit Florida Keys

  • Media with header first

    A placeholder image

    Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore possimus similique nemo odit doloremque laudantium?

    Visit Florida Keys

  • Inset media

    A placeholder image

    Etiam vitae sodales metus. Fusce id orci dignissim, efficitur risus eget, tempus odio.

    Visit Florida Keys

  • Exdent media

    A placeholder image

    Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore possimus similique nemo odit doloremque laudantium?

    Visit Florida Keys

Component Code

<ul class="usa-card-group">
  <li class="usa-card tablet-lg:grid-col-6 widescreen:grid-col-4">
    <div class="usa-card__container">
      <div class="usa-card__header">
        <h4 class="usa-card__heading">Card</h4>
      </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">
        <a href="#" class="usa-button">Visit Florida Keys</a>
      </div>
    </div>
  </li>
  <li class="usa-card tablet-lg:grid-col-6 widescreen:grid-col-4">
    <div class="usa-card__container">
      <div class="usa-card__header">
        <h4 class="usa-card__heading">Card with Media</h4>
      </div>
      <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">
        <a href="#" class="usa-button">Visit Florida Keys</a>
      </div>
    </div>
  </li>
  <li class="usa-card tablet-lg:grid-col-6 widescreen:grid-col-4 usa-card--header-first">
    <div class="usa-card__container">
      <div class="usa-card__header">
        <h4 class="usa-card__heading">Media with header first</h4>
      </div>
      <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. Tempore
          possimus similique nemo odit doloremque laudantium?
        </p>
      </div>
      <div class="usa-card__footer">
        <a href="#" class="usa-button">Visit Florida Keys</a>
      </div>
    </div>
  </li>
  <li class="usa-card tablet-lg:grid-col-6 widescreen:grid-col-4">
    <div class="usa-card__container">
      <div class="usa-card__header">
        <h4 class="usa-card__heading">Inset media</h4>
      </div>
      <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>
          Etiam vitae sodales metus. Fusce id orci dignissim, efficitur risus
          eget, tempus odio.
        </p>
      </div>
      <div class="usa-card__footer">
        <a href="#" class="usa-button">Visit Florida Keys</a>
      </div>
    </div>
  </li>
  <li class="usa-card tablet-lg:grid-col-6 widescreen:grid-col-4">
    <div class="usa-card__container">
      <div class="usa-card__header">
        <h4 class="usa-card__heading">Exdent media</h4>
      </div>
      <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. Tempore
          possimus similique nemo odit doloremque laudantium?
        </p>
      </div>
      <div class="usa-card__footer">
        <a href="#" class="usa-button">Visit Florida Keys</a>
      </div>
    </div>
  </li>
</ul>

Flag Layout Card

Component Preview

  • Default flag

    A placeholder image

    Lorem ipsum dolor sit amet consectetur adipisicing elit.

    Visit Florida Keys

  • Flag media right inset

    A placeholder image

    Lorem ipsum dolor sit amet consectetur adipisicing elit.

    Visit Florida Keys

Component Code

<ul class="usa-card-group">
  <li class="usa-card usa-card--flag flex-1">
    <div class="usa-card__container">
      <div class="usa-card__header">
        <h4 class="usa-card__heading">Default flag</h4>
      </div>
      <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.</p>
      </div>
      <div class="usa-card__footer">
        <a href="#" class="usa-button">Visit Florida Keys</a>
      </div>
    </div>
  </li>
  <li class="usa-card usa-card--flag flex-1 usa-card--media-right">
    <div class="usa-card__container">
      <div class="usa-card__header">
        <h4 class="usa-card__heading">Flag media right inset</h4>
      </div>
      <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.</p>
      </div>
      <div class="usa-card__footer">
        <a href="#" class="usa-button">Visit Florida Keys</a>
      </div>
    </div>
  </li>
</ul>


Guidance

When to use the card component

Collections of related content.
Cards help present a collection of related groups of content, like articles or sections of a website.

When to consider something else

Tabular data.
Don't use a card as a substitute for a table row.
Simple calls to action.
Use a button instead.
Standalone content.
Consider an aside or another standalone element.
Sequential, continuous text.
Cards should be self-contained and modular. If the reader is meant to read from card to card, consider a list or simple body text and headings.

Usability guidance

Make cards actionable.
Since cards are used as a summary of more detailed information, any individual card should link out to that information.
Don't use the card component only for decoration.
Use the card component for cards, not for any type of content that's designed to have a border around it.
Include non-redundant content.
Don't repeat images or content common to all or most cards in a collection.
Make sure images are properly sized.
Cards often change size depending on the device. Make sure you use an image that works well on any device at any size.
Use simple styling.
Avoid distracting skeumorphism. Don't include any card styling that calls too much attention to the metaphor of a paper card, like folds, bent edges, or paper texture.

Accessibility guidance

Use unordered lists and list items.
Use a ul for a card group and an li for each card. This formatting allows screen readers to enumerate the items in the card group.
Use the appropriate heading level for your page.
Update heading level based on the content of your page to make sure card headings are in the correct, logical outline order.
Use CSS to order the media element.
Logically, the media element should follow the header element. Don't re-organize the markup to reverse their order.

Using the card component

Control card size and layout with USWDS utilities.
The card component works well with layout grid utilities. The usa-card-group block is functionally a wrap-able grid-row, and each individual usa-card is a grid-col.
Control image aspect ratio with the add-aspect utility.
Add aspect ratio utility classes to usa-card__img or usa-card__media elements to control the aspect ratio on card images.
Style cards with utilities.
Style the usa-card__container element with utilities to achieve custom effects, such as changing the border or background color or adding a drop shadow.

USWDS Documentation

For more guidance, view the USWDS Card Component Documentation.



Settings

Variable Description
$theme-card-border-color Stroke color of card.
$theme-card-border-radius Border radius of card.
$theme-card-border-width Stroke thickness of card.
$theme-card-gap Gap between cards in a card group.
$theme-card-flag-min-width Width at which flag cards change to horizontal layout.
$theme-card-flag-image-width Fixed image width in the card flag variant.
$theme-card-font-family Font family for card body.
$theme-card-header-typeset Family, size, and line height of the heading.
$theme-card-margin-bottom Bottom margin for card.
$theme-card-padding-perimeter Padding between card elements and card border.
$theme-card-padding-y Vertical padding between card elements.


Variants

Variant Description
.usa-card--flag Display in a horizontal ("flag") orientation at a specified width.
.usa-card--header-first Displays the header element before the media element.
.usa-card--media-right In combination with usa-card--flag, sets the media element on the right.
.usa-card__media--inset Indents the media element so it doesn't extend to the edge of the card.
.usa-card__body--exdent Extends the body element out over the card border.
.usa-card__footer--exdent Extends the footer element out over the card border.
.usa-card__header--exdent Extends the header element out over the card border.
.usa-card__media--exdent Extends the media element out over the card border.
Looking for U.S. government information and services?
Visit USA.gov