Card

Source: src/components/card/card

Card Components are thumbnails of content from other views. Cards include the following optional elements:

Program icon. Corresponds to program category. See the full set of icons here.
Program label or badge
Plain language headline
Program name
Plain language description
Link to learn more about the program guide
“Apply Now” call-to-action button

New Money for heat and utility expenses

Home Energy Assistance Program (HEAP)

HEAP can help you pay for the costs of heating your home during the winter months.

Learn more: Home Energy Assistance Program

<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>

Simple Card

Source: src/components/card/card-simple

Elements can be added and removed as needed for different views.

Tax relief for dependent care

Learn more

<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>

The Vue Card is a packaged Card Component for Vue.js applications. It encapselates markup, accessibility, and data-binding for a fully functional component. See Vue Component Usage below for details on content and configuration that can be passed as properties to the component.

<template>
  <!-- eslint-disable max-len -->
  <article class="c-card">
    <div class="c-card__icon" v-if="category">
      <svg :class="'icon icon-' + category.slug + ((icon && icon.version) ? `-v${icon.version}` : '') + ' ' + ((icon && icon.class) ? icon.class : '')" role="img">
        <title :id="'#icon-card-' + category.slug + '_title'" v-html="category.name"></title>
        <use :xlink:href="'#icon-card-' + category.slug + ((icon && icon.version) ? `-v${icon.version}` : '')" xmlns:xlink="http://www.w3.org/1999/xlink"></use>
      </svg>
    </div>

    <div class="c-card__body">
      <h3 class="c-card__title">
        <mark v-if="status" :class="'badge color-' + status.type + '-status'">{{ status.text }}</mark>

        <a class="text-inherit" :href="link" :target="blank ? '_blank' : false" v-if="title">
          {{ title }}
        </a>
      </h3>

      <p class="c-card__subtitle type-small color__alt" v-if="subtitle" v-html="subtitle">
        {{ subtitle }}
      </p>

      <div class="c-card__summary">
        <div v-if="summary" v-html="summary">{{ summary }}</div>

        <p class="hide-for-print" v-if="link">
          <a :href="link" :target="blank ? '_blank' : false">
            {{ strings.LEARN_MORE }}
            <span class="sr-only" v-if="subtitle">: {{ subtitle }}}</span>
          </a>
        </p>

        <p class="hide-for-print" v-if="cta">
          <a class="btn btn-secondary btn-next" :href="cta" :target="blank ? '_blank' : false">{{ strings.CTA }}</a>
        </p>
      </div>
    </div>
  </article>
</template>

<script>
  export default {
    props: {
      cta: {type: String},
      title: {type: String},
      link: {type: String},
      subtitle: {type: String},
      summary: {type: String},
      category: {type: Object},
      icon: {type: Object},
      status: {type: Object},
      blank: {type: Boolean},
      strings: {
        type: Object,
        default: () => ({
          LEARN_MORE: 'Learn more',
          CTA: 'Apply'
        })
      }
    }
  };
</script>

Vue Component Usage

The Vue Card can be imported from from the paths below in your main script and added to the Vue instance before your application declaration:

import CardVue from 'src/components/card/card.vue';

Vue.component('c-card', CardVue);

new Vue({
  el: '#app-c-card'
  data: {
    card: {Object: 'See sample data below'}
  }
});

Markup;

<div id='app-c-card'>
  <c-card v-bind='card'></c-card>
</div>

Below is a guide for using component properties. For basic details of using Vue Components within a Vue application, refer to the Vue.js documentation.

Props

Below is a description of accepted properties and their values.

Prop	Type	Description
`:card`	object	Content and configuration for the card to render. The sample set can be seen here. In order to disable certain options, just omit those props.
`:strings`	object	A dictionary containing static strings used in the component. It can be packaged with the object above.

Sample Data

export default {
  // The plain language title of the card content.
  title: 'Money for heat and utility expenses',
  // The link to the full content the card is referring to.
  link: 'https://access.nyc.gov/programs/home-energy-assistance-program-heap/',
  // The real title of the card content.
  subtitle: 'Home Energy Assistance Program (HEAP)',
  // A short paragraph summary of the card content.
  summary: 'HEAP can help you pay for the costs of heating your home during the winter months.',
  // The category of the content, this will hide or show the icon.
  category: {
    slug: 'cash-expenses',
    name: 'Cash & Expenses'
  },
  // Settings for the icon including version to be used and color combination.
  icon: {
    version: '2',
    class: 'text-blue-bright fill-blue-light'
  },
  // The status of the card content and the status type (info, warning, error, success).
  status: {
    type: 'info',
    text: 'New'
  },
  // Call to action button.
  cta: 'https://access.nyc.gov/programs/home-energy-assistance-program-heap/',
  // Wether to open the card's hyperlinks in a new tab.
  blank: true,
  // This is a list of available strings within the Compnent that can be overidden for translation. Below are the default strings.
  strings: {
    LEARN_MORE: 'Learn more',
    CTA: 'Apply'
  }
};

ACCESS NYC

Patterns