Skip to main content

Patterns

Card

Card Components are thumbnails of content from other views. Cards include 5 possible elements:

  1. Program icon (corresponds to category)
  2. Plain language headline (program.name.plain)
  3. Program name (program)
  4. Brief description (excerpt)
  5. Link to the program guide
<article class="c-card">
  <div class="c-card__body">
    <h3 class="c-card__title mb-3">Apply for Pre-K for All</h3>
    <div class="c-card__summary"><a href="#">New York City families with a child born in 2014 can apply to Pre-K from February 5 - March 30, 2018.</a></div>
  </div>
</article>

Card With Icon

Source: src/components/card/card-icon

<article class="c-card">
  <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>

Card With Icon and Information

Source: src/components/card/card-icon-info

<article class="c-card">
  <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>

Card With Icon, Information, and Apply Button

Source: src/components/card/card-icon-info-apply

<article class="c-card">
  <div class="c-card__icon"><svg class="icon icon-card-cash-expenses" role="img">
      <title id="icon-card-cash-expenses_title">Cash &amp; Expenses</title>
      <use xlink:href="#icon-card-cash-expenses" xmlns:xlink="http://www.w3.org/1999/xlink"></use>
    </svg></div>
  <div class="c-card__body"><a class="text-color-blue-dark" href="http://localhost:8080/programs/home-energy-assistance-program-heap/">
      <h3 class="c-card__title text-color-blue-dark"> Money for heat and utility expenses</h3>
    </a>
    <p class="program-card-subtitle type-small"> 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="http://localhost:8080/programs/home-energy-assistance-program-heap/">Learn more<span class="sr-only"><Home>Energy Assistance Program</Home></span></a></p>
      <p class="hide-for-print"><a class="btn btn-secondary btn-next" href="#">Apply</a></p>
    </div>
  </div>
</article>

Removable Card

Source: src/components/card/card-removable

Money for heat and utility expenses

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

Ongoing Engagement

Heads Up

  • Requires proof of identity, where you live, income, and citizenship status.
  • You must be a US citizen or have satisfactory immigration status to receive Cash Assistance; a worker will help you learn your status when you apply
  • If you are able to work, you will either need to be working, in an education or training program, or participate in a program assigned to you in order to get Cash Assistance
  • You can get money for emergencies, including: eviction, energy and utility bills, natural disasters, and your safety or health
  • Apply in person, or have an interview at home if you are homebound

See a full list of required documents

<article class="mb-4 print:pb-4 print:border-b">
  <div class="flex items-stretch bg-color-grey-lightest p-3 screen-desktop:p-4 print:flex print:p-0 print:bg-color-transparent">
    <div class="w-100 pr-1 print:p-0">
      <header class="c-card p-0 bg-color-transparent mb-2">
        <div class="c-card__icon-large print:hidden">
          <div class="icon bg-icon-card-cash-expenses"></div>
        </div>
        <div aria-hidden="true" class="pr-2 hidden print:inline-block">
          <div class="icon bg-icon-card-cash-expenses"></div>
        </div>
        <div class="c-card__body pt-1"><a href="#">
            <h3 class="c-card__title text-color-blue-dark">Money for heat and utility expenses</h3>
          </a>
          <p class="c-card__subtitle text-color-grey-mid mb-0">HEAP can help you pay for the costs of heating your home during the winter months.</p>
        </div>
      </header>
      <h3 class="type-h4 print:hidden text-color-blue-dark">Ongoing Engagement</h3>
      <div class="print:mb-2">
        <h3 class="type-h4 text-color-blue-dark">Heads Up</h3>
        <div class="c-checklist" id="heads-up-S2R010">
          <ul>
            <li>Requires proof of identity, where you live, income, and citizenship status.</li>
            <li>You must be a US citizen or have satisfactory immigration status to receive Cash Assistance; a worker will help you learn your status when you apply</li>
            <li>If you are able to work, you will either need to be working, in an education or training program, or participate in a program assigned to you in order to get Cash Assistance</li>
            <li>You can get money for emergencies, including: eviction, energy and utility bills, natural disasters, and your safety or health</li>
            <li>Apply in person, or have an interview at home if you are homebound</li>
          </ul>
          <p class="print:hidden m-0"><a class="btn btn-secondary btn-next" href="#">See a full list of required documents</a></p>
        </div>
      </div>
    </div>
    <div class="flex flex-col justify-between hide-for-print">
      <div class="pb-1" style="width:240px">
        <div><button class="btn btn-primary btn-small block w-full" type="button">Remove Program</button></div>
      </div>
      <div><button class="btn-toggle btn-small w-full text-color-blue" href="#" type="button">Learn More</button></div>
    </div>
  </div>
</article>

Vue Card

Source: src/components/card/card.vue

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.

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

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();

Below is a guide for using these particular 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. A 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.