Skip to main content

Patterns

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-color-grey-lightest">
  <div class="layout--gutter">
    <article class="c-card" data-sketch-symbol-instance="components/card/card-icon-info">
      <div class="c-card__icon"><a href="#">
          <div class="icon bg-icon-card-cash-expenses"></div>
        </a></div>
      <div class="c-card__body"><a href="#">
          <h3 class="c-card__title">Money for heat and utility expenses</h3>
        </a>
        <p class="c-card__subtitle type-small text-color-grey-mid">Home Energy Assistance Program (HEAP)<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="#">Learn more</a></p>
          </div>
        </p>
      </div>
    </article>
    <article class="c-card" data-sketch-symbol-instance="components/card/card-icon-info">
      <div class="c-card__icon"><a href="#">
          <div class="icon bg-icon-card-cash-expenses"></div>
        </a></div>
      <div class="c-card__body"><a href="#">
          <h3 class="c-card__title">Money for heat and utility expenses</h3>
        </a>
        <p class="c-card__subtitle type-small text-color-grey-mid">Home Energy Assistance Program (HEAP)<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="#">Learn more</a></p>
          </div>
        </p>
      </div>
    </article>
    <article class="c-card" data-sketch-symbol-instance="components/card/card-icon-info">
      <div class="c-card__icon"><a href="#">
          <div class="icon bg-icon-card-cash-expenses"></div>
        </a></div>
      <div class="c-card__body"><a href="#">
          <h3 class="c-card__title">Money for heat and utility expenses</h3>
        </a>
        <p class="c-card__subtitle type-small text-color-grey-mid">Home Energy Assistance Program (HEAP)<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="#">Learn more</a></p>
          </div>
        </p>
      </div>
    </article>
  </div>
</div>

Grid Layout

Source: src/objects/card-list/card-list-grid

<div class="p-4 bg-color-grey-lightest" data-sketch-symbol-instance="components/card/card-icon-info">
  <h2 class="type-h3 m-0">Featured Programs</h2>
  <h3 class="type-supplemental text-color-grey-mid">Each year, over 1 million New Yorkers use ACCESS NYC to get:</h3>
  <div class="layout--gutter screen-desktop:layout--columns-gutter">
    <article class="c-card" data-sketch-symbol-instance="components/card/card-icon">
      <div class="c-card__icon"><a href="#">
          <div class="icon bg-icon-card-cash-expenses"></div>
        </a></div>
      <div class="c-card__body"><a href="#">
          <h3 class="c-card__title">Tax relief for dependent care</h3>
        </a>
        <div class="c-card__summary hide-for-print"><a href="#">Learn more</a></div>
      </div>
    </article>
    <article class="c-card" data-sketch-symbol-instance="components/card/card-icon">
      <div class="c-card__icon"><a href="#">
          <div class="icon bg-icon-card-cash-expenses"></div>
        </a></div>
      <div class="c-card__body"><a href="#">
          <h3 class="c-card__title">Tax relief for dependent care</h3>
        </a>
        <div class="c-card__summary hide-for-print"><a href="#">Learn more</a></div>
      </div>
    </article>
    <article class="c-card" data-sketch-symbol-instance="components/card/card-icon">
      <div class="c-card__icon"><a href="#">
          <div class="icon bg-icon-card-cash-expenses"></div>
        </a></div>
      <div class="c-card__body"><a href="#">
          <h3 class="c-card__title">Tax relief for dependent care</h3>
        </a>
        <div class="c-card__summary hide-for-print"><a href="#">Learn more</a></div>
      </div>
    </article>
    <article class="c-card" data-sketch-symbol-instance="components/card/card-icon">
      <div class="c-card__icon"><a href="#">
          <div class="icon bg-icon-card-cash-expenses"></div>
        </a></div>
      <div class="c-card__body"><a href="#">
          <h3 class="c-card__title">Tax relief for dependent care</h3>
        </a>
        <div class="c-card__summary hide-for-print"><a href="#">Learn more</a></div>
      </div>
    </article>
  </div>
</div>