Quick Start

The following is a static page sample that integrates ACCESS NYC Patterns using the CDN method. This is the quickest way to get started developing or prototyping. However, the NPM method of installation is preferable for most long-term projects. View the installation documentation for more details.

Markup

<!DOCTYPE html>
<html>

<head>
  <title>Hello ACCESS NYC Patterns</title>
  <link href="https://cdn.jsdelivr.net/gh/cityofnewyork/access-nyc-patterns@v0.16.1/dist/images/favicon.ico" rel="shortcut icon" />
  <link href="https://cdn.jsdelivr.net/gh/cityofnewyork/access-nyc-patterns@v0.16.1/dist/styles/site-default.css" rel="stylesheet" />
</head>

<body class="color-light-background">
  <header class="layout-content px-3 p-2 screen-tablet:py-4">
    <div class="mx-auto">
      <svg class="icon-logo-full--large text-blue-dark mb-3">
        <use xlink:href="#icon-logo-full"></use>
      </svg>
      <h1 class="mb-0">Hello ACCESS NYC Patterns!</h1>
    </div>
  </header>
  <main class="layout-content p-3">
    <div class="mx-auto">
      <p>This demo uses the CDN method of installation including the CSS, Google Fonts, JavaScript, and SVGs. Sample pattern HTML can be copied and pasted into this page and they should work without any extra steps!</p>
      <p>
        <a class='btn btn-primary inline-block' href='https://accesspatterns.cityofnewyork.us'>View Patterns</a>
      </p>
    </div>
  </main>
  <footer class="layout-content px-3">
    <div class="mx-auto">
      <p>
        <small>© City of New York, 2022 All Rights Reserved.</small>
        <br>
        <small>NYC is a trademark and service mark of the City of New York.</small>
      <p>
        <small class="flex items-center">
          <svg class="icon-ui icon-4 text-blue-dark">
            <use xlink:href="#icon-ui-type"></use>
          </svg>Font-families used include&nbsp;<a href='https://fonts.google.com/noto'>Google Noto</a>.
        </small>
      </p>
      <p>
        <small class="flex items-center">
          <svg class="icon-ui icon-4 text-blue-dark">
            <use xlink:href="#icon-ui-feather"></use>
          </svg>UI Icons are sourced from the&nbsp;<a href='https://feathericons.com/'>Feather Icon set</a>.
        </small>
      </p>
      </p>
    </div>
  </footer>
  <script src="https://cdn.jsdelivr.net/gh/cityofnewyork/access-nyc-patterns@v0.16.1/dist/scripts/access-nyc.js"></script>
  <script type="text/javascript">
    var access = new AccessNyc();
    access.icons('https://cdn.jsdelivr.net/gh/cityofnewyork/access-nyc-patterns@v0.16.1/dist/svg/icons.svg');
  </script>
</body>

</html>

Markup

Preview