Patterns

2.6.15

Quick Start

The following is a static page sample that integrates NYCO 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 NYCO Patterns</title>
  <link href="https://cdn.jsdelivr.net/gh/cityofnewyork/nyco-patterns@v2.6.15/dist/images/favicon/favicon.ico" rel="shortcut icon" />
  <link href="https://fonts.gstatic.com" rel="preconnect" />
  <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght@0,400;0,700;1,400;1,700&amp;display=swap" rel="stylesheet" />
  <link href="https://cdn.jsdelivr.net/gh/cityofnewyork/nyco-patterns@v2.6.15/dist/styles/nyco.css" rel="stylesheet" />
</head>

<body class="color-light-background">
  <header class="layout-content px-3">
    <div class="mx-auto">
      <svg class="icon-logo-primary">
        <use xlink:href="#icon-logo-primary"></use>
      </svg>
      <h1>Hello NYCO 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://nycopatterns.cityofnewyork.us'>View Patterns</a>
      </p>
    </div>
  </main>
  <footer class="layout-content px-3">
    <div class="mx-auto">
      <p>
        <small>© City of New York, 2021 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 mie-1">
            <use xlink:href="#feather-type"></use>
          </svg>Font-families used include system Helvetica and&nbsp;<a href='https://www.ibm.com/plex/'>IBM Plex</a>.
        </small>
      </p>
      <p>
        <small class="flex items-center">
          <svg class="icon-ui mie-1">
            <use xlink:href="#feather-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/nyco-patterns@v2.6.15/dist/scripts/nyco.js"></script>
  <script type="text/javascript">
    var nyco = new NYCO();
    nyco.icons('https://cdn.jsdelivr.net/gh/cityofnewyork/nyco-patterns@v2.6.15/dist/svg/icons.svg');
    nyco.icons('https://cdn.jsdelivr.net/gh/cityofnewyork/nyco-patterns@v2.6.15/dist/svg/feather.svg');
  </script>
</body>

</html>

Preview