<ul class="usa-card-group">
    <li class="usa-card tablet:grid-col">
        <div class="usa-card__container">
            <header class="usa-card__header">
                <h2 class="usa-card__heading">Default 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.</p>
            </div>
            <div class="usa-card__footer">
                <button class="usa-button">Visit Florida Keys</button>
            </div>
        </div>
    </li>
    <li class="usa-card usa-card--header-first tablet:grid-col">
        <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>Nemo illo et error deserunt qui doloremque provident perferendis fuga pariatur eum?</p>
            </div>
            <div class="usa-card__footer">
                <button class="usa-button">Visit Florida Keys</button>
            </div>
        </div>
    </li>
    <li class="usa-card tablet:grid-col">
        <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>Tempore ab exercitationem distinctio iste esse numquam a rerum culpa at quibusdam</p>
            </div>
            <div class="usa-card__footer">
                <button class="usa-button">Visit Florida Keys</button>
            </div>
        </div>
    </li>
    <li class="usa-card usa-card--header-first tablet:grid-col">
        <div class="usa-card__container">
            <header class="usa-card__header">
                <h2 class="usa-card__heading">Media with header first</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>Tempore ab exercitationem distinctio iste esse numquam a rerum culpa at quibusdam</p>
            </div>
            <div class="usa-card__footer">
                <button class="usa-button">Visit Florida Keys</button>
            </div>
        </div>
    </li>
</ul>

There are no notes for this item.

<ul class="usa-card-group">
  {%- for card in cards -%}
  <li class="usa-card {{ card.classes }}">
    {% include "@card--basic" %}
  </li>
  {%- endfor -%}
</ul>
package:
  name: uswds
  version: 2.9.0
uswds:
  path: ../../dist
cards:
  - title: Default media
    classes: 'tablet:grid-col'
    media: true
    media_classes: ''
    image_classes: ''
    content:
      - Lorem ipsum dolor sit amet consectetur adipisicing elit.
  - title: Inset media
    classes: 'usa-card--header-first tablet:grid-col'
    media: true
    media_classes: usa-card__media--inset
    image_classes: ''
    content:
      - >-
        Nemo illo et error deserunt qui doloremque provident perferendis fuga
        pariatur eum?
  - title: Exdent media
    classes: 'tablet:grid-col'
    media: true
    media_classes: usa-card__media--exdent
    image_classes: ''
    content:
      - >-
        Tempore ab exercitationem distinctio iste esse numquam a rerum culpa at
        quibusdam
  - title: Media with header first
    classes: 'usa-card--header-first tablet:grid-col'
    media: true
    media_classes: usa-card__media--exdent
    image_classes: ''
    content:
      - >-
        Tempore ab exercitationem distinctio iste esse numquam a rerum culpa at
        quibusdam