As of January 3rd, 2023 the ACCESS NYC Pattern library package is deprecated in favor of the NYC Opportunity Standard which contains updated user interface elements and usability guidance.
Layouts
Column A
Column B
<div class="layout-columns flex text-center"> <div class="bg-grey-light p-4">Column A</div> <div class="bg-grey-lightest p-4">Column B</div> </div>
Row A
Row B
<div class="layout-rows text-center"> <div class="bg-grey-light p-4">Row A</div> <div class="bg-grey-lightest p-4">Row B</div> </div>
Row A
Row B
<div class="layout-gutter bg-grey-lightest p-4 text-center"> <div class="bg-grey-light p-4">Row A</div> <div class="bg-grey-light p-4">Row B</div> </div>
Cell A
Cell B
Cell C
Cell D
<div class="layout-columns-gutter bg-grey-lightest p-4 text-center"> <div class="bg-grey-light p-4">Cell A</div> <div class="bg-grey-light p-4">Cell B</div> <div class="bg-grey-light p-4">Cell C</div> <div class="bg-grey-light p-4">Cell D</div> </div>
Cell A
Cell B
Cell C
Cell D
Cell E
<div class="layout-two-columns-gutter bg-grey-lightest p-4 text-center"> <div class="bg-grey-light p-4">Cell A</div> <div class="bg-grey-light p-4">Cell B</div> <div class="bg-grey-light p-4">Cell C</div> <div class="bg-grey-light p-4">Cell D</div> <div class="bg-grey-light p-4">Cell E</div> <div></div> </div>
Cell A
Cell B
Cell C
Cell D
Cell E
Cell F
Cell G
Cell H
<div class="layout-three-columns-gutter bg-grey-lightest p-4 text-center"> <div class="bg-grey-light p-4">Cell A</div> <div class="bg-grey-light p-4">Cell B</div> <div class="bg-grey-light p-4">Cell C</div> <div class="bg-grey-light p-4">Cell D</div> <div class="bg-grey-light p-4">Cell E</div> <div class="bg-grey-light p-4">Cell F</div> <div class="bg-grey-light p-4">Cell G</div> <div class="bg-grey-light p-4">Cell H</div> <div></div> </div>
Cell A
Cell B
Cell C
Cell D
Cell E
Cell F
Cell G
Cell H
Cell I
Cell J
<div class="layout-four-columns-gutter bg-grey-lightest p-4 text-center"> <div class="bg-grey-light p-4">Cell A</div> <div class="bg-grey-light p-4">Cell B</div> <div class="bg-grey-light p-4">Cell C</div> <div class="bg-grey-light p-4">Cell D</div> <div class="bg-grey-light p-4">Cell E</div> <div class="bg-grey-light p-4">Cell F</div> <div class="bg-grey-light p-4">Cell G</div> <div class="bg-grey-light p-4">Cell H</div> <div class="bg-grey-light p-4">Cell I</div> <div class="bg-grey-light p-4">Cell J</div> <div></div> <div></div> </div>
<div class="screen-tablet:layout-sidebar layout-rows text-center"> <aside class="bg-grey-light p-4">Sidebar</aside> <article class="layout-topbar__body bg-grey-lightest p-4">Content</article> </div>
<div class="screen-tablet:layout-sidebar-small layout-rows text-center"> <aside class="bg-grey-light p-4">Sidebar</aside> <article class="bg-grey-lightest p-4">Content</article> </div>
<div class="screen-tablet:layout-sidebar-gutter layout-gutter bg-grey-lightest text-center p-4"> <aside class="bg-grey-light p-4">Sidebar</aside> <article class="bg-grey-light p-4">Content</article> </div>
<div class="screen-tablet:layout-sidebar-small-gutter layout-gutter bg-grey-lightest text-center p-4"> <aside class="bg-grey-light p-4">Sidebar</aside> <article class="bg-grey-light p-4">Content</article> </div>
Body
<div class="layout-home-body bg-grey-lightest p-4 text-center"> <div class="bg-grey-light p-4">Body</div> </div>
Body
<div class="page-wrapper">
<article class="layout-topbar text-center">
<header class="bg-blue-dark text-white p-4">Topbar</header>
<div class="bg-grey-lightest p-4">
<div>Body</div>
</div>
</article>
</div>
Map
Source:
src/elements/layouts/layouts-map
<div class="layout-map screen-desktop:layout-sidebar text-center"> <div class="layout-map__sidebar bg-grey-lightest p-4">Sidebar</div> <div class="layout-map__map bg-grey-light p-4">Map</div> </div>