NJ Web Design System (v2.1.0)

Card: Default 

<ul class="usa-card-group">
    <li class="usa-card tablet:grid-col-4">
        <div class="usa-card__container">
            <header class="usa-card__header">
                <h2 class="usa-card__heading">Default 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. Facere magnam quo nostrum amet odio ut ducimus?</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-4">
        <div class="usa-card__container">
            <header class="usa-card__header">
                <h2 class="usa-card__heading">The economy of cities</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. Facere magnam quo nostrum amet odio ut ducimus?</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-4">
        <div class="usa-card__container">
            <header class="usa-card__header">
                <h2 class="usa-card__heading">Cities have the capability of providing something for everybody</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. Facere magnam quo nostrum amet odio ut ducimus?</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">
  {%- for card in cards -%}
  <li class="usa-card {{ card.classes }}">
    {% include "@card--basic" %}
  </li>
  {%- endfor -%}
</ul>
 
package:
  name: null
  version: 2.1.0
uswds:
  path: ../../dist
cards:
  - title: Default card
    media: false
    classes: tablet:grid-col-4
    media_classes: ''
    image_classes: ''
    content:
      - >-
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis earum
        tenetur quo cupiditate, eaque qui officia recusandae. Facere magnam quo
        nostrum amet odio ut ducimus?
  - title: The economy of cities
    media: false
    classes: tablet:grid-col-4
    media_classes: ''
    image_classes: ''
    content:
      - >-
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis earum
        tenetur quo cupiditate, eaque qui officia recusandae. Facere magnam quo
        nostrum amet odio ut ducimus?
  - title: Cities have the capability of providing something for everybody
    media: false
    classes: tablet:grid-col-4
    media_classes: ''
    image_classes: ''
    content:
      - >-
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis earum
        tenetur quo cupiditate, eaque qui officia recusandae. Facere magnam quo
        nostrum amet odio ut ducimus?