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="styles/site-default.css" rel="stylesheet" /> <title>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-white" onload="load()" style="visibility: hidden;"> <a class="sr-only" href="#main-content">Skip to main content</a> <div class="min-h-screen"> <header class="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">0.0.11-11</a> <a aria-hidden="true" class="ml-1 screen-tablet:ml-2 screen-tablet:hidden" href="https://github.com/CityOfNewYork/ACCESS-NYC-PATTERNS">0.0.11-11</a> <a class="ml-1 screen-tablet:ml-2" data-js="toggle" href="#main-menu">Menu</a> </nav> </div> </div> </div> </header> <aside aria-hidden="true" class="text-font-size-small bg-color-blue-light hidden hidden:overflow animated" id="main-menu" style="position:relative;top:-1px"> <div class="page-wrapper"> <div class="screen-tablet:flex py-4"> <nav class="screen-tablet:flex-1 mb-1 px-2"><span class="screen-tablet:block screen-tablet:border-b border-color-white p-1">Main;</span> <a class="block p-1" href="index">Home</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="screen-tablet:block screen-tablet:border-b 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="colors">Colors</a> <a class="block p-1" href="dividers">Dividers</a> <a class="block p-1" href="icons">Icons</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="typography">Typography</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="screen-tablet:block screen-tablet:border-b 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="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="text-controller">Text Controller</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="question">Question</a> </nav> <nav class="screen-tablet:flex-1 mb-1 px-2 screen-desktop:pl-4"><span class="screen-tablet:block screen-tablet:border-b 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="mobile-nav">Mobile Nav</a> <a class="block p-1" href="navigation">Navigation</a> <a class="block p-1" href="search-box">Search Box</a> </nav> </div> </div> </aside> <main class="pt-4" id="main-content"> <article class="py-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 m-0">Design Tools</h1> </div> </header> <section class="pb-4 mb-4" id="welcome"> <div class="page-wrapper"> <header class="layout--home-body"> <div class="my-0 pt-1 px-2 border-b border-color-grey-light"></div> </header> <div class="layout--home-body"> <div class="px-2 text-font-size-small"> <p>The ACCESS NYC Patterns are available for Sketch to create new interfaces and build prototypes. Design files are generated from the source code by HTML Sketch App.</p> </div> </div> </div> </section> </article> </main> </div> <footer class="py-4 text-center bg-color-blue-dark text-color-white links-invert font-smooth"> <p class="m-0">Maintained by  <a href="https://github.com/orgs/CityOfNewYork/teams/nycopportunity">NYC Opportunity</a> </p> </footer> <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=fetch,Element.prototype.matches,Promise&flags=gated"></script> <script src="scripts/AccessNyc.js"></script> <script src="scripts/markdown.min.js"></script> <script type="text/javascript"> var access = new AccessNyc(); access.markdown(); access.icons(); access.toggle(); </script> </body> </html>