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>Alert Box | 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">Alert Box</h1> </div> </header> <section class="pb-4 mb-4"> <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"></div> </header> <div class="layout--home-body"> <div class="my-0 pt-4 px-2 text-font-size-small table-align-start"><p>Alert Box Components contain relevant messages for the user in the form of information, success, urgent, and warnings. The Alert Box Component is based on the Alerts Pattern in the <a href="https://standards.usa.gov/alerts/">U.S. Web Design System</a>. The primary uses for alerts on the site are to indicate a successful screening or warn that other city applications will not work on mobile devices.</p></div> </div> </div> </section> <section class="pb-4 mb-4" id="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="#information">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/alert-box">src/components/alert-box/alert-box-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-alert-box bg-status-info mb-4"> <div class="c-alert-box__icon"><svg class="c-alert-box__svg icon icon-4 icon-ui-info"> <use xlink:href="#icon-ui-info"></use> </svg></div> <div class="c-alert-box__body"> <header> <h1 class="type-h4 m-0">ACCESS NYC will be undergoing maintenance Friday, February 2nd from 9pm to 11pm EST.</h1> </header> <p>Please <a href="#">contact our help desk</a> with any questions.</p> </div> </article> </div> <div> <div class="code-block mb-1"><pre><article class="c-alert-box bg-status-info mb-4" data-sketch-symbol-instance="components/disclaimer/disclaimer-small"> <div class="c-alert-box__icon"><svg class="c-alert-box__svg icon icon-4 icon-ui-info"> <use xlink:href="#icon-ui-info"></use> </svg></div> <div class="c-alert-box__body"> <header> <h1 class="type-h4 m-0">ACCESS NYC will be undergoing maintenance Friday, February 2nd from 9pm to 11pm EST.</h1> </header> <p>Please <a href="#">contact our help desk</a> with any questions.</p> </div> </article></pre> </div> </div> </div> </div> </section> <section class="pb-4 mb-4" id="success"> <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="#success">Success</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/alert-box">src/components/alert-box/alert-box-success</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-alert-box bg-status-success mb-4"> <div class="c-alert-box__icon"><svg class="c-alert-box__svg icon icon-4 icon-ui-check-circle" role="img"> <title>Success Alert</title> <use xlink:href="#icon-ui-check-circle"></use> </svg></div> <div class="c-alert-box__body"> <header> <h1 class="type-h4 m-0">Finished! We found 8 programs for you.</h1> </header> <p>Remember that we can't guarantee eligibility, but can only recommend programs for you to look at.</p> </div> </article> </div> <div> <div class="code-block mb-1"><pre><article class="c-alert-box bg-status-success mb-4" data-sketch-symbol-instance="components/disclaimer/disclaimer-small"> <div class="c-alert-box__icon"><svg class="c-alert-box__svg icon icon-4 icon-ui-check-circle" role="img"> <title>Success Alert</title> <use xlink:href="#icon-ui-check-circle"></use> </svg></div> <div class="c-alert-box__body"> <header> <h1 class="type-h4 m-0">Finished! We found 8 programs for you.</h1> </header> <p>Remember that we can't guarantee eligibility, but can only recommend programs for you to look at.</p> </div> </article></pre> </div> </div> </div> </div> </section> <section class="pb-4 mb-4" id="urgent"> <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="#urgent">Urgent</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/alert-box">src/components/alert-box/alert-box-urgent</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-alert-box bg-status-urgent mb-4"> <div class="c-alert-box__icon"><svg class="c-alert-box__svg icon icon-4 icon-ui-alert-octagon" role="img"> <title>Urgent Alert</title> <use xlink:href="#icon-ui-alert-octagon"></use> </svg></div> <div class="c-alert-box__body"> <header> <h1 class="type-h4 m-0">Something went wrong.</h1> </header> <p>Try refreshing the page or <a href="#">contact our help desk</a> so we can help.</p> </div> </article> </div> <div> <div class="code-block mb-1"><pre><article class="c-alert-box bg-status-urgent mb-4" data-sketch-symbol-instance="components/disclaimer/disclaimer-small"> <div class="c-alert-box__icon"><svg class="c-alert-box__svg icon icon-4 icon-ui-alert-octagon" role="img"> <title>Urgent Alert</title> <use xlink:href="#icon-ui-alert-octagon"></use> </svg></div> <div class="c-alert-box__body"> <header> <h1 class="type-h4 m-0">Something went wrong.</h1> </header> <p>Try refreshing the page or <a href="#">contact our help desk</a> so we can help.</p> </div> </article></pre> </div> </div> </div> </div> </section> <section class="pb-4 mb-4" id="warning"> <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="#warning">Warning</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/alert-box">src/components/alert-box/alert-box-warning</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-alert-box bg-status-warning mb-4"> <div class="c-alert-box__icon"><svg class="c-alert-box__svg icon icon-4 icon-ui-alert-triangle" role="img"> <title>Warning Alert</title> <use xlink:href="#icon-ui-alert-triangle"></use> </svg></div> <div class="c-alert-box__body"> <header> <h1 class="type-h4 m-0">You will need to apply from a desktop computer.</h1> </header> <p>The online application will not work on a mobile phone or tablet. We can <a href="#">email or text you a link</a> to this page to help you get back here more easily.</p> </div> </article> </div> <div> <div class="code-block mb-1"><pre><article class="c-alert-box bg-status-warning mb-4" data-sketch-symbol-instance="components/disclaimer/disclaimer-small"> <div class="c-alert-box__icon"><svg class="c-alert-box__svg icon icon-4 icon-ui-alert-triangle" role="img"> <title>Warning Alert</title> <use xlink:href="#icon-ui-alert-triangle"></use> </svg></div> <div class="c-alert-box__body"> <header> <h1 class="type-h4 m-0">You will need to apply from a desktop computer.</h1> </header> <p>The online application will not work on a mobile phone or tablet. We can <a href="#">email or text you a link</a> to this page to help you get back here more easily.</p> </div> </article></pre> </div> </div> </div> </div> </section> <section class="pb-4 mb-4" id="share-form"> <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="#share-form">Share Form</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/alert-box">src/components/alert-box/alert-box-share-form</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="c-alert-box bg-status-info mb-4"> <div class="c-alert-box__icon"><svg class="c-alert-box__svg icon icon-4 icon-ui-info" role="img"> <title>Information Alert</title> <use xlink:href="#icon-ui-info"></use> </svg></div> <div class="c-alert-box__body"> <header> <h1 class="type-h4 m-0">Come back to it later.</h1> </header> <p>We can send you a link to this page to help you get back to it when you’re ready.</p> <div class="layout--gutter screen-tablet:layout--columns-gutter"> <div class="c-share-form" data-sketch-symbol-instance="components/share-form/share-form-email"><a class="btn btn-primary c-share-form__toggle active" data-scroll-offset="20" href="#share-by-text">Email</a> <div class="c-share-form__input active" id="share-by-text"> <form> <div class="c-share-form__controls"><input name="to" placeholder="Email" required="true" type="email" /> <div class="c-share-form__button"><button class="btn btn-primary btn-small" data-sketch-symbol-instance="elements/buttons/btn-small" type="submit">Send</button> <div class="c-share-form__spinner" data-js="spinner" style="display: none"><svg class="spinner icon-4 text-color-yellow-access" data-sketch-symbol-instance="elements/spinner/spinner" version="1.1" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <circle class="spinner__path" cx="12" cy="12" fill="none" r="10"></circle> </svg></div> <div class="success-message">Sent!</div> </div> </div> </form> </div> </div> <div class="c-share-form" data-sketch-symbol-instance="components/share-form/share-form-text"><a class="btn btn-primary c-share-form__toggle active" data-scroll-offset="20" href="#share-by-text">Text</a> <div class="c-share-form__input active" id="share-by-text"> <form> <div class="c-share-form__controls"><input name="to" placeholder="Phone Number" required="true" type="tel" /> <div class="c-share-form__button"><button class="btn btn-primary btn-small" data-sketch-symbol-instance="elements/buttons/btn-small" type="submit">Send</button> <div class="c-share-form__spinner" data-js="spinner" style="display: none"><svg class="spinner icon-4 text-color-yellow-access" data-sketch-symbol-instance="elements/spinner/spinner" version="1.1" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <circle class="spinner__path" cx="12" cy="12" fill="none" r="10"></circle> </svg></div> <div class="success-message">Sent!</div> </div> </div> </form> </div> </div> </div> <div class="mt-3 screen-tablet:m-0"> <div class="c-disclaimer" data-sketch-symbol-instance="components/disclaimer/disclaimer-small"> <p><small><svg class="c-disclaimer__icon c-disclaimer__icon--pre icon icon-ui-info" role="img"> <title>Information Alert</title> <use xlink:href="#icon-ui-info"></use> </svg>By providing your email address or phone number, you agree to be contacted by the City of New York regarding your ACCESS NYC public benefit screening results. Your activity on ACCESS NYC is anonymous, but providing your phone number may identify you and reveal that you used the website. To find out more about how the City might use the data you share with ACCESS NYC, visit the <a href="http://www1.nyc.gov/home/terms-of-use.page" target="_blank" rel="noopener noreferrer"> Terms of Use for NYC.gov</a>, and <a href="http://www1.nyc.gov/home/privacy-policy.page" target="_blank" rel="noopener noreferrer"> Privacy Policy for NYC.gov</a>.</small></p> </div> </div> </div> </article> </div> <div> <div class="code-block mb-1"><pre><article class="c-alert-box bg-status-info mb-4" data-sketch-symbol-instance="components/disclaimer/disclaimer-small"> <div class="c-alert-box__icon"><svg class="c-alert-box__svg icon icon-4 icon-ui-info" role="img"> <title>Information Alert</title> <use xlink:href="#icon-ui-info"></use> </svg></div> <div class="c-alert-box__body"> <header> <h1 class="type-h4 m-0">Come back to it later.</h1> </header> <p>We can send you a link to this page to help you get back to it when you’re ready.</p> <div class="layout--gutter screen-tablet:layout--columns-gutter"> <div class="c-share-form" data-sketch-symbol-instance="components/share-form/share-form-email"><a class="btn btn-primary c-share-form__toggle active" data-scroll-offset="20" href="#share-by-text">Email</a> <div class="c-share-form__input active" id="share-by-text"> <form> <div class="c-share-form__controls"><input name="to" placeholder="Email" required="true" type="email" /> <div class="c-share-form__button"><button class="btn btn-primary btn-small" data-sketch-symbol-instance="elements/buttons/btn-small" type="submit">Send</button> <div class="c-share-form__spinner" data-js="spinner" style="display: none"><svg class="spinner icon-4 text-color-yellow-access" data-sketch-symbol-instance="elements/spinner/spinner" version="1.1" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <circle class="spinner__path" cx="12" cy="12" fill="none" r="10"></circle> </svg></div> <div class="success-message">Sent!</div> </div> </div> </form> </div> </div> <div class="c-share-form" data-sketch-symbol-instance="components/share-form/share-form-text"><a class="btn btn-primary c-share-form__toggle active" data-scroll-offset="20" href="#share-by-text">Text</a> <div class="c-share-form__input active" id="share-by-text"> <form> <div class="c-share-form__controls"><input name="to" placeholder="Phone Number" required="true" type="tel" /> <div class="c-share-form__button"><button class="btn btn-primary btn-small" data-sketch-symbol-instance="elements/buttons/btn-small" type="submit">Send</button> <div class="c-share-form__spinner" data-js="spinner" style="display: none"><svg class="spinner icon-4 text-color-yellow-access" data-sketch-symbol-instance="elements/spinner/spinner" version="1.1" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <circle class="spinner__path" cx="12" cy="12" fill="none" r="10"></circle> </svg></div> <div class="success-message">Sent!</div> </div> </div> </form> </div> </div> </div> <div class="mt-3 screen-tablet:m-0"> <div class="c-disclaimer" data-sketch-symbol-instance="components/disclaimer/disclaimer-small"> <p><small><svg class="c-disclaimer__icon c-disclaimer__icon--pre icon icon-ui-info" role="img"> <title>Information Alert</title> <use xlink:href="#icon-ui-info"></use> </svg>By providing your email address or phone number, you agree to be contacted by the City of New York regarding your ACCESS NYC public benefit screening results. Your activity on ACCESS NYC is anonymous, but providing your phone number may identify you and reveal that you used the website. To find out more about how the City might use the data you share with ACCESS NYC, visit the <a href="http://www1.nyc.gov/home/terms-of-use.page" target="_blank" rel="noopener noreferrer"> Terms of Use for NYC.gov</a>, and <a href="http://www1.nyc.gov/home/privacy-policy.page" target="_blank" rel="noopener noreferrer"> Privacy Policy for NYC.gov</a>.</small></p> </div> </div> </div> </article></pre> </div> </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="#information">Information</a><a class="mr-4" href="#success">Success</a><a class="mr-4" href="#urgent">Urgent</a><a class="mr-4" href="#warning">Warning</a><a class="mr-4" href="#share-form">Share Form</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> </body> </html>