NJ Web Design System (v1.0.0)

Card 

<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: 1.0.0
uswds:
  path: ../../dist