NJ Web Design System (v2.1.0)

Card: Compare 

<h6 class="padding-bottom-2">Standard Layout</h6>
<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>

<h6 class="padding-bottom-2">Flag Layout</h6>
<ul class="usa-card-group">
    <li class="tablet:grid-col-6 usa-card usa-card--flag">
        <div class="usa-card__container">
            <header class="usa-card__header">
                <h2 class="usa-card__heading">Flag default</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="tablet:grid-col-6 usa-card usa-card--flag usa-card--media-right">
        <div class="usa-card__container">
            <header class="usa-card__header">
                <h2 class="usa-card__heading">Flag media on right</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>
</ul>

No notes defined.

<h6 class="padding-bottom-2">Standard Layout</h6>
<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>

<h6 class="padding-bottom-2">Flag Layout</h6>
<ul class="usa-card-group">
  <li class="tablet:grid-col-6 usa-card usa-card--flag">
    <div class="usa-card__container">
      <header class="usa-card__header">
        <h2 class="usa-card__heading">Flag default</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="tablet:grid-col-6 usa-card usa-card--flag usa-card--media-right">
    <div class="usa-card__container">
      <header class="usa-card__header">
        <h2 class="usa-card__heading">Flag media on right</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>
</ul>
 
package:
  name: null
  version: 2.1.0
uswds:
  path: ../../dist
cards:
  - name: default
    title: Card
    content:
      - >-
        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.
  - name: raised
    title: Card with media
    media: true
    content:
      - >-
        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.
  - name: media
    title: Media and header first
    classes: usa-card--header-first
    media: true
    content:
      - >-
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis earum
        tenetur quo cupiditate, eaque qui officia recusandae.
  - name: media_inset
    title: Inset media
    classes: usa-card--header-first
    media: true
    media_classes: usa-card__media--inset
    content:
      - >-
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis earum
        tenetur quo cupiditate, eaque qui officia recusandae.
  - name: media_exdent
    title: Exdent media
    classes: usa-card--header-first
    media: true
    media_classes: usa-card__media--exdent
    content:
      - >-
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis earum
        tenetur quo cupiditate, eaque qui officia recusandae.
  - name: flag
    classes: usa-card--flag
    title: Flag default
    media: true
    media_classes: ''
    image_classes: ''
    flag: true
    content:
      - Lorem ipsum dolor sit amet consectetur adipisicing elit.
  - name: flag-right
    classes: usa-card--flag usa-card--media-right
    title: Flag media on right
    media: true
    flag: true
    content:
      - Lorem ipsum dolor sit amet consectetur adipisicing elit.