access-nyc-patterns

<!DOCTYPE html> <html class="bg-color-white text-size-0" lang="en"> <head> <meta charset="utf-8" /> <meta content="IE=edge" http-equiv="X-UA-Compatible" /> <meta content="width=device-width, initial-scale=1" name="viewport" /> <link href="images/apple-icon-57x57.png" rel="apple-touch-icon" sizes="57x57" /> <link href="images/apple-icon-60x60.png" rel="apple-touch-icon" sizes="60x60" /> <link href="images/apple-icon-72x72.png" rel="apple-touch-icon" sizes="72x72" /> <link href="images/apple-icon-76x76.png" rel="apple-touch-icon" sizes="76x76" /> <link href="images/apple-icon-114x114.png" rel="apple-touch-icon" sizes="114x114" /> <link href="images/apple-icon-120x120.png" rel="apple-touch-icon" sizes="120x120" /> <link href="images/apple-icon-144x144.png" rel="apple-touch-icon" sizes="144x144" /> <link href="images/apple-icon-152x152.png" rel="apple-touch-icon" sizes="152x152" /> <link href="images/apple-icon-180x180.png" rel="apple-touch-icon" sizes="180x180" /> <link href="images/android-icon-192x192.png" rel="icon" sizes="192x192" type="image/png" /> <link href="images/favicon-32x32.png" rel="icon" sizes="32x32" type="image/png" /> <link href="images/favicon-96x96.png" rel="icon" sizes="96x96" type="image/png" /> <link href="images/favicon-16x16.png" rel="icon" sizes="16x16" type="image/png" /> <meta content="#112E51" name="msapplication-TileColor" /> <meta content="images/ms-icon-144x144.png" name="msapplication-TileImage" /> <link href="images/favicon.ico" rel="icon" type="image/x-icon" /> <link href="styles/site-default.css" rel="stylesheet" /> <title>Card | ACCESS NYC Patterns</title><noscript> <style> body { visibility: visible !important; } </style> </noscript> <script type="text/javascript"> function load() { document.body.style.visibility = 'visible' }; </script> </head> <body class="bg-color-blue-dark" onload="load()" style="visibility: hidden;"><a class="sr-only" href="#main-content">Skip to main content</a> <div class="bg-color-white"> <header class="color-light-background px-2"> <div class="border-b border-color-grey-light"> <div class="flex items-center justify-between p-2 screen-tablet:py-4 screen-tablet:px-2"> <div> <h1 class="m-0 p-0 leading-normal"><a href="index"><span class="hidden">ACCESS NYC</span><svg aria-hidden="true" class="icon-logo-mark screen-tablet:hidden"> <use xlink:href="#icon-logo-mark"></use> </svg><svg aria-hidden="true" class="icon-logo-full--large text-color-blue-dark hidden screen-tablet:inline-block"> <use xlink:href="#icon-logo-full"></use> </svg></a></h1> </div> <div class="flex items-center"> <h2 class="text-font-size-small m-0 text-color-blue-dark screen-tablet:hidden">Patterns</h2> <h2 aria-hidden="true" class="type-h1 m-0 text-color-blue-dark hidden screen-tablet:inline-block">Patterns</h2> <nav class="text-font-size-small"><a class="rounded-lg text-color-blue-dark border-2 no-underline px-1 ml-2 hidden screen-tablet:inline-block" href="https://github.com/CityOfNewYork/access-nyc-patterns/tree/v0.8.0">0.8.0</a><a aria-hidden="true" class="ml-1 screen-tablet:ml-2 screen-tablet:hidden" href="https://github.com/CityOfNewYork/access-nyc-patterns/tree/v0.8.0">0.8.0</a><button aria-controls="main-menu" aria-expanded="false" class="btn-link ml-1 screen-tablet:ml-2" data-js="toggle" id="main-menu-control">Menu</button></nav> </div> </div> </div> </header> <aside aria-hidden="true" aria-labelledby="main-menu-control" class="color-mid-background text-font-size-small hidden hidden:overflowFadeInUp animated relative" id="main-menu" role="region" style="top: -1px"> <div class="page-wrapper py-4 animated"> <div class="screen-tablet:flex"> <nav class="screen-tablet:flex-1 mb-1 px-2"><a class="type-h3 text-font-size-small mb-1 block screen-tablet:border-b screen-tablet:pb-2 screen-tablet:mb-1 border-color-white p-1" href="index">Home</a><a class="block p-1" href="about">About</a><a class="block p-1" href="installation">Installation</a><a class="block p-1" href="design-tools">Design Tools</a><a class="block p-1 screen-tablet:border-b screen-tablet:pb-2 screen-tablet:mb-1 border-color-white p-1" href="developer-tools">Developer Tools</a><a class="block p-1" href="https://www.npmjs.com/package/access-nyc-patterns">NPM</a><a class="block p-1" href="https://github.com/CityOfNewYork/access-nyc-patterns">GitHub</a></nav> <nav class="screen-tablet:flex-1 mb-1 px-2 screen-desktop:pl-4"><span class="type-h3 text-font-size-small mb-1 block screen-tablet:border-b screen-tablet:pb-2 screen-tablet:mb-1 border-color-white p-1">Elements</span><a class="block p-1" href="buttons">Buttons</a><a class="block p-1" href="checkboxes">Checkboxes</a><a class="block p-1" href="dividers">Dividers</a><a class="block p-1" href="inputs">Inputs</a><a class="block p-1" href="layouts">Layouts</a><a class="block p-1" href="links">Links</a><a class="block p-1" href="lists">Lists</a><a class="block p-1" href="nav">Nav</a><a class="block p-1" href="program-labels">Program Labels</a><a class="block p-1" href="radios">Radios</a><a class="block p-1" href="tables">Tables</a><a class="block p-1" href="tooltips">Tooltips</a><a class="block p-1" href="toggles">Toggles</a><a class="block p-1" href="selects">Selects</a></nav> <nav class="screen-tablet:flex-1 mb-1 px-2 screen-desktop:pl-4"><span class="type-h3 text-font-size-small mb-1 block screen-tablet:border-b screen-tablet:pb-2 screen-tablet:mb-1 border-color-white p-1">Components</span><a class="block p-1" href="accordion">Accordion</a><a class="block p-1" href="alert-box">Alert Box</a><a class="block p-1" href="alert-banner">Alert Banner</a><a class="block p-1" href="card">Card</a><a class="block p-1" href="checklist">Checklist</a><a class="block p-1" href="disclaimer">Disclaimer</a><a class="block p-1" href="filter">Filter</a><a class="block p-1" href="header">Header</a><a class="block p-1" href="member-list">Member List</a><a class="block p-1" href="nearby-stops">Nearby Stops</a><a class="block p-1" href="share-form">Share Form</a><a class="block p-1" href="side-nav">Side Nav</a><a class="block p-1" href="text-controller">Text Controller</a><a class="block p-1" href="question">Question</a></nav> <nav class="screen-tablet:flex-1 mb-1 px-2 screen-desktop:pl-4"><span class="type-h3 text-font-size-small mb-1 block screen-tablet:border-b screen-tablet:pb-2 screen-tablet:mb-1 border-color-white p-1">Objects</span><a class="block p-1" href="announcements">Announcements</a><a class="block p-1" href="banner">Banner</a><a class="block p-1" href="card-list">Card Lists</a><a class="block p-1" href="content">Content</a><a class="block p-1" href="footer">Footer</a><a class="block p-1" href="formstack">Formstack</a><a class="block p-1" href="mobile-nav">Mobile Nav</a><a class="block p-1" href="navigation">Navigation</a><a class="block p-1" href="newsletter">Newsletter</a><a class="block p-1" href="search-box">Search Box</a></nav> <nav class="screen-tablet:flex-1 mb-1 px-2 screen-desktop:pl-4"><a class="type-h3 text-font-size-small mb-1 block screen-tablet:border-b screen-tablet:pb-2 screen-tablet:mb-1 border-color-white p-1" href="utility">Utilities</a><a class="block p-1" href="accessibility">Accessibility</a><a class="block p-1" href="colors">Colors</a><a class="block p-1" href="cookie">Cookie</a><a class="block p-1" href="font">Fonts</a><a class="block p-1" href="icons">Icons</a><a class="block p-1" href="inherit">Inherit</a><a class="block p-1" href="language">Language</a><a class="block p-1" href="media">Media</a><a class="block p-1" href="text">Text</a><a class="block p-1" href="toggle">Toggle</a><a class="block p-1" href="typography">Typography</a></nav> </div> <div class="text-center"><button aria-controls="main-menu" aria-expanded="false" class="btn-link" data-js="toggle">Close Menu</button></div> </div> </aside> <main class="color-light-background pt-4" id="main-content"> <article class="pt-4"> <header class="page-wrapper px-2 screen-desktop:px-0 layout--home-body"> <div class="my-0 w-full"> <h1 class="text-color-blue-dark px-2 pb-4 mb-4">Card</h1> </div> </header> <section class="pb-4 mb-4"> <div class="page-wrapper px-2"> <header class="layout--home-body"> <div class="my-0 px-2 pt-1 pb-4 border-b border-color-grey-light"> <div> <p class="text-font-size-small m-0">Source: <code><a href="https://github.com/CityOfNewYork/access-nyc-patterns/tree/v0.8.0/src/components/card">src/components/card/card</a></code></p> </div> </div> </header> <div class="layout--home-body"> <div class="my-0 pt-4 px-2 text-font-size-small table-align-start"><p>Card Components are thumbnails of content from other views. Cards include 5 possible elements:</p> <ol> <li>Program icon (corresponds to category)</li> <li>Plain language headline (program.name.plain)</li> <li>Program name (program)</li> <li>Brief description (excerpt)</li> <li>Link to the program guide</li> </ol></div> </div> <div class="layout--gutter screen-tablet:layout--columns justify-between pt-4"> <div class="screen-tablet:pr-2"> <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> </div> <div> <div class="code-block mb-1"><pre><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></pre> </div> </div> </div> </div> </section> <section class="pb-4 mb-4" id="card-with-icon"> <div class="page-wrapper px-2"> <header class="layout--home-body"> <div class="my-0 px-2 pt-1 pb-4 border-b border-color-grey-light"> <h2 class="m-0"><a class="text-color-grey-mid font-normal no-underline capitalize" href="#card-with-icon">Card With Icon</a></h2> <div class="pt-2"> <p class="text-font-size-small m-0">Source: <code><a href="https://github.com/CityOfNewYork/access-nyc-patterns/tree/v0.8.0/src/components/card">src/components/card/card-icon</a></code></p> </div> </div> </header> <div class="layout--home-body"> <div class="my-0 pt-4 px-2 text-font-size-small table-align-start"></div> </div> <div class="layout--gutter screen-tablet:layout--columns justify-between pt-4"> <div class="screen-tablet:pr-2"> <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> </div> <div> <div class="code-block mb-1"><pre><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></pre> </div> </div> </div> </div> </section> <section class="pb-4 mb-4" id="card-with-icon-and-information"> <div class="page-wrapper px-2"> <header class="layout--home-body"> <div class="my-0 px-2 pt-1 pb-4 border-b border-color-grey-light"> <h2 class="m-0"><a class="text-color-grey-mid font-normal no-underline capitalize" href="#card-with-icon-and-information">Card With Icon and Information</a></h2> <div class="pt-2"> <p class="text-font-size-small m-0">Source: <code><a href="https://github.com/CityOfNewYork/access-nyc-patterns/tree/v0.8.0/src/components/card">src/components/card/card-icon-info</a></code></p> </div> </div> </header> <div class="layout--home-body"> <div class="my-0 pt-4 px-2 text-font-size-small table-align-start"></div> </div> <div class="layout--gutter screen-tablet:layout--columns justify-between pt-4"> <div class="screen-tablet:pr-2"> <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> </div> <div> <div class="code-block mb-1"><pre><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></pre> </div> </div> </div> </div> </section> <section class="pb-4 mb-4" id="card-with-icon,-information,-and-apply-button"> <div class="page-wrapper px-2"> <header class="layout--home-body"> <div class="my-0 px-2 pt-1 pb-4 border-b border-color-grey-light"> <h2 class="m-0"><a class="text-color-grey-mid font-normal no-underline capitalize" href="#card-with-icon,-information,-and-apply-button">Card With Icon, Information, and Apply Button</a></h2> <div class="pt-2"> <p class="text-font-size-small m-0">Source: <code><a href="https://github.com/CityOfNewYork/access-nyc-patterns/tree/v0.8.0/src/components/card">src/components/card/card-icon-info-apply</a></code></p> </div> </div> </header> <div class="layout--home-body"> <div class="my-0 pt-4 px-2 text-font-size-small table-align-start"></div> </div> <div class="layout--gutter screen-tablet:layout--columns justify-between pt-4"> <div class="screen-tablet:pr-2"> <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 & 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> </div> <div> <div class="code-block mb-1"><pre><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></pre> </div> </div> </div> </div> </section> <section class="pb-4 mb-4" id="removable-card"> <div class="page-wrapper px-2"> <header class="layout--home-body"> <div class="my-0 px-2 pt-1 pb-4 border-b border-color-grey-light"> <h2 class="m-0"><a class="text-color-grey-mid font-normal no-underline capitalize" href="#removable-card">Removable Card</a></h2> <div class="pt-2"> <p class="text-font-size-small m-0">Source: <code><a href="https://github.com/CityOfNewYork/access-nyc-patterns/tree/v0.8.0/src/components/card">src/components/card/card-removable</a></code></p> </div> </div> </header> <div class="layout--home-body"> <div class="my-0 pt-4 px-2 text-font-size-small table-align-start"></div> </div> <div class="layout--gutter screen-tablet:layout--gutter justify-between pt-4"> <div> <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> </div> <div> <div class="code-block mb-1"><pre><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></pre> </div> </div> </div> </div> </section> <section class="pb-4 mb-4" id="vue-card"> <div class="page-wrapper px-2"> <header class="layout--home-body"> <div class="my-0 px-2 pt-1 pb-4 border-b border-color-grey-light"> <h2 class="m-0"><a class="text-color-grey-mid font-normal no-underline capitalize" href="#vue-card">Vue Card</a></h2> <div class="pt-2"> <p class="text-font-size-small m-0">Source: <code><a href="https://github.com/CityOfNewYork/access-nyc-patterns/tree/v0.8.0/src/components/card">src/components/card/card.vue</a></code></p> </div> </div> </header> <div class="layout--home-body"> <div class="my-0 pt-4 px-2 text-font-size-small table-align-start"><p>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 <a href="#vue-component-usage">Vue Component Usage</a> below for details on content and configuration that can be passed as properties to the component.</p></div> </div> <div class="layout--gutter screen-tablet:layout--columns justify-between pt-4"> <div class="screen-tablet:pr-2"> <div id="app-c-card"> <c-card v-bind="card"></c-card> </div> </div> <div> <div class="code-block mb-1"><pre><div id="app-c-card"> <c-card v-bind="card"></c-card> </div></pre> </div> </div> </div> </div> </section> <section class="pb-4 mb-4" id="vue-component-usage"> <div class="page-wrapper px-2 screen-desktop:px-0"> <header class="layout--home-body"> <div class="my-0 px-2 border-b border-color-grey-light screen-tablet:flex screen-tablet:justify-between"> <h2 class="m-0 pt-1 pb-4"><a class="text-color-grey-mid font-normal no-underline capitalize" href="#vue-component-usage">Vue Component Usage</a></h2> </div> </header> <div class="layout--home-body"> <div class="my-0 pt-4 px-2 text-font-size-small table-align-start"><p>The <a href="#vue-card">Vue Card</a> can be imported from from the paths below in your main script and added to the Vue instance before your application declaration:</p> <pre><code>import CardVue from 'src/components/card/card.vue'; Vue.component('c-card', CardVue); new Vue();</code></pre> <p>Below is a guide for using these particular component properties. For basic details of using Vue Components within a Vue application, <a href="https://vuejs.org/v2/guide/components.html">refer to the Vue.js documentation</a>.</p> <h4>Props</h4> <p>Below is a description of accepted properties and their values.</p> <table> <thead> <tr> <th>Prop</th> <th>Type</th> <th>Description</th> </tr> </thead> <tbody> <tr> <td><code>:card</code></td> <td><em>object</em></td> <td>Content and configuration for the card to render. A <a href="https://github.com/CityOfNewYork/ACCESS-NYC-PATTERNS/blob/master/src/components/card/card.data.js">sample set can be seen here</a>. In order to disable certain options, just omit those props.</td> </tr> <tr> <td><code>:strings</code></td> <td><em>object</em></td> <td>A dictionary containing static strings used in the component. It can be packaged with the object above.</td> </tr> </tbody> </table></div> </div> </div> </section> <div class="sticky bottom-0 bg-color-white shadow-up relative z-10 overflow-y-scroll whitespace-no-wrap animated fadeInUp"> <nav class="nav-inline text-font-size-small p-4"><span class="mr-4">Jump to:</span><a class="mr-4" href="#card-with-icon">Card With Icon</a><a class="mr-4" href="#card-with-icon-and-information">Card With Icon and Information</a><a class="mr-4" href="#card-with-icon,-information,-and-apply-button">Card With Icon, Information, and Apply Button</a><a class="mr-4" href="#removable-card">Removable Card</a><a class="mr-4" href="#vue-card">Vue Card</a><a class="mr-4" href="#vue-component-usage">Vue Component Usage</a></nav> </div> </article> </main> </div> <footer class="py-4 text-center color-dark-background"> <p> <nav><a class="px-1" href="index">Home</a><a class="px-1" href="about">About</a><a class="px-1" href="installation">Installation</a><a class="px-1" href="design-tools">Design Tools</a><a class="px-1" href="developer-tools">Developer Tools</a></nav> </p> <p>Maintained by <a href="https://nyc.gov/opportunity">NYC Opportunity</a></p> <p class="m-0"> <nav><a class="px-1" href="https://github.com/orgs/CityOfNewYork/teams/nycopportunity">GitHub</a><a class="px-1" href="https://twitter.com/nycopportunity">Twitter</a><a class="px-1" href="https://www.facebook.com/NYCOpportunity">Facebook</a><a class="px-1" href="https://www.instagram.com/nycopportunity">Instagram</a></nav> </p> </footer> <script src="scripts/polyfills.js"></script> <script src="scripts/access-nyc.js"></script> <script src="scripts/vue-components.js"></script> <script type="text/javascript"> var access = new AccessNyc(); var VueComponents = new VueComponents(); access.icons(); access.toggle(); access.alertBanner(); </script> <script type="text/javascript"> VueComponents.card(); </script> </body> </html>