Card List

There is no specific style definition for the Card Lists Object. They are a combination of Layout Utilities and Card Components.

<div class="p-4 bg-grey-lightest">
  <div class="layout-gutter">
    <div class="bg-grey-lightest p-4">
      <!--Component Start-->
      <article class="c-card">
        <div class="c-card__icon">
          <svg class="icon icon-card-cash-expenses-v2 text-blue-bright fill-blue-light" role="img">
            <title id="icon-card-cash-expenses_title">Cash & Expenses</title>
            <use xlink:href="#icon-card-cash-expenses-v2" xmlns:xlink="https://www.w3.org/1999/xlink"></use>
          </svg>
        </div>
        <div class="c-card__body">
          <h3 class="c-card__title">
            <mark class="badge bg-status-info">New</mark>
            <a class="text-inherit" href="https://access.nyc.gov/programs/home-energy-assistance-program-heap/">Money for heat and utility expenses</a>
          </h3>
          <p class="c-card__subtitle type-small color__alt">Home Energy Assistance Program (HEAP)</p>
          <div class="c-card__summary">
            <p>HEAP can help you pay for the costs of heating your home during the winter months.</p>
            <p class="hide-for-print">
              <a href="https://access.nyc.gov/programs/home-energy-assistance-program-heap/">Learn more<span class="sr-only">: Home Energy Assistance Program</span>
              </a>
            </p>
            <p class="hide-for-print">
              <a class="btn btn-secondary btn-next" href="#">Apply</a>
            </p>
          </div>
        </div>
      </article>
    </div>
    <div class="bg-grey-lightest p-4">
      <!--Component Start-->
      <article class="c-card">
        <div class="c-card__icon">
          <svg class="icon icon-card-cash-expenses-v2 text-blue-bright fill-blue-light" role="img">
            <title id="icon-card-cash-expenses_title">Cash & Expenses</title>
            <use xlink:href="#icon-card-cash-expenses-v2" xmlns:xlink="https://www.w3.org/1999/xlink"></use>
          </svg>
        </div>
        <div class="c-card__body">
          <h3 class="c-card__title">
            <mark class="badge bg-status-info">New</mark>
            <a class="text-inherit" href="https://access.nyc.gov/programs/home-energy-assistance-program-heap/">Money for heat and utility expenses</a>
          </h3>
          <p class="c-card__subtitle type-small color__alt">Home Energy Assistance Program (HEAP)</p>
          <div class="c-card__summary">
            <p>HEAP can help you pay for the costs of heating your home during the winter months.</p>
            <p class="hide-for-print">
              <a href="https://access.nyc.gov/programs/home-energy-assistance-program-heap/">Learn more<span class="sr-only">: Home Energy Assistance Program</span>
              </a>
            </p>
            <p class="hide-for-print">
              <a class="btn btn-secondary btn-next" href="#">Apply</a>
            </p>
          </div>
        </div>
      </article>
    </div>
    <div class="bg-grey-lightest p-4">
      <!--Component Start-->
      <article class="c-card">
        <div class="c-card__icon">
          <svg class="icon icon-card-cash-expenses-v2 text-blue-bright fill-blue-light" role="img">
            <title id="icon-card-cash-expenses_title">Cash & Expenses</title>
            <use xlink:href="#icon-card-cash-expenses-v2" xmlns:xlink="https://www.w3.org/1999/xlink"></use>
          </svg>
        </div>
        <div class="c-card__body">
          <h3 class="c-card__title">
            <mark class="badge bg-status-info">New</mark>
            <a class="text-inherit" href="https://access.nyc.gov/programs/home-energy-assistance-program-heap/">Money for heat and utility expenses</a>
          </h3>
          <p class="c-card__subtitle type-small color__alt">Home Energy Assistance Program (HEAP)</p>
          <div class="c-card__summary">
            <p>HEAP can help you pay for the costs of heating your home during the winter months.</p>
            <p class="hide-for-print">
              <a href="https://access.nyc.gov/programs/home-energy-assistance-program-heap/">Learn more<span class="sr-only">: Home Energy Assistance Program</span>
              </a>
            </p>
            <p class="hide-for-print">
              <a class="btn btn-secondary btn-next" href="#">Apply</a>
            </p>
          </div>
        </div>
      </article>
    </div>
  </div>
</div>
<div class="p-4 bg-grey-lightest">
  <h2 class="type-h3 m-0">Featured Programs</h2>
  <h3 class="type-supplemental text-grey-mid">Each year, over 1 million New Yorkers use ACCESS NYC to get:</h3>
  <div class="layout-gutter screen-desktop:layout-columns-gutter">
    <div class="bg-grey-lightest p-2">
      <!--Component Start-->
      <article class="c-card">
        <div class="c-card__body">
          <h3 class="c-card__title mt-0 mb-3">
            <a class="text-blue-dark" href="#">Tax relief for dependent care</a>
          </h3>
          <div class="c-card__summary hide-for-print">
            <a href="#">Learn more</a>
          </div>
        </div>
      </article>
    </div>
    <div class="bg-grey-lightest p-2">
      <!--Component Start-->
      <article class="c-card">
        <div class="c-card__body">
          <h3 class="c-card__title mt-0 mb-3">
            <a class="text-blue-dark" href="#">Tax relief for dependent care</a>
          </h3>
          <div class="c-card__summary hide-for-print">
            <a href="#">Learn more</a>
          </div>
        </div>
      </article>
    </div>
    <div class="bg-grey-lightest p-2">
      <!--Component Start-->
      <article class="c-card">
        <div class="c-card__body">
          <h3 class="c-card__title mt-0 mb-3">
            <a class="text-blue-dark" href="#">Tax relief for dependent care</a>
          </h3>
          <div class="c-card__summary hide-for-print">
            <a href="#">Learn more</a>
          </div>
        </div>
      </article>
    </div>
    <div class="bg-grey-lightest p-2">
      <!--Component Start-->
      <article class="c-card">
        <div class="c-card__body">
          <h3 class="c-card__title mt-0 mb-3">
            <a class="text-blue-dark" href="#">Tax relief for dependent care</a>
          </h3>
          <div class="c-card__summary hide-for-print">
            <a href="#">Learn more</a>
          </div>
        </div>
      </article>
    </div>
  </div>
</div>