UNPKG

nyc-planning-style-guide

Version:

Base styles for NYC Department of City Planning (using Foundation for Sites)

2,041 lines • 176 kB
<!doctype html>
<html class="no-js" lang="en">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>NYC Planning Digital Style Guide</title>
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay" crossorigin="anonymous">
    <link rel="stylesheet" href="../assets/css/nyc-planning.css">
    <style>
      .header-logo {
        max-height: 4.5rem;
      }
      .code-example code {
        display: block;
        padding: 1rem;
        overflow-x: scroll;
        margin-bottom: 1.5rem;
      }
      .is-stuck{
        max-height: 100vh;
        overflow: auto;
      }
      .code-example + .callout,
      .code-example + table {
        margin-top: calc(-1px - 1.5rem);
      }
      section + section {
        margin-top: 3rem;
        padding-top: 3rem;
        border-top: 1px solid #d3d5d9;
      }
      section h4 {
        margin-top: 1.5rem;
      }
      section .code-example + h4 {
        margin-top: 0;
      }
      .callout.clear {
        background-color: transparent;
        border-color: transparent;
      }
      .color-swatch {
        list-style: none;
        margin: 0;
        padding: 2.5rem 0.75rem 0.75rem;
        line-height: 1.4;
      }
    </style>
  </head>
  <body id="top">

    <header class="xlarge-padding-top large-padding-bottom bg-white-smoke">
      <div class="grid-container">
        <div class="grid-x text-center medium-text-left align-middle">
          <div class="cell medium-shrink">
            <img class="header-logo medium-margin-right medium-margin-bottom" src="https://raw.githubusercontent.com/NYCPlanning/dcp-logo/master/dcp_logo_772.png" alt="NYC Planning" />
          </div>
          <div class="cell medium-auto">
            <h1 class="no-margin">Digital Style Guide</h1>
            <p class="medium-margin-bottom">Standards, Code Snippets, &amp; Assets</p>
          </div>
          <p class="cell medium-shrink no-margin show-for-medium">
            <a href="https://github.com/NYCPlanning/nyc-planning-style-guide">
              <i class="fab fa-github fa-2x small-margin text-light-gray"></i>
              1.0.7
            </a>
          </p>
        </div>
      </div>
    </header>

    <div id="main-content" class="grid-container">
      <div class="grid-x grid-margin-x">
        <div class="medium-8 large-9 cell medium-order-2 large-padding-top large-padding-bottom">

<section>
  <p class="lead">NYC Planning's Digital Style Guide defines standards for the creation, formatting, and design of our digital products. These best practices and UI patterns ensure consistency both within specific applications, and throughout our products and services. </p>

  <div class="grid-x text-center align-center align-middle xlarge-margin-top medium-margin-bottom">
    <div class="cell medium-shrink">
      <p>
        <i class="fas fa-pen-alt fa-2x small-margin text-light-gray"></i>
        <span class="display-block text-weight-bold">Content</span>
      </p>
    </div>
    <div class="cell medium-shrink">
      <i class="fas fa-plus fa-lg large-margin text-light-gray"></i>
    </div>
    <div class="cell medium-shrink">
      <p>
        <i class="fas fa-drafting-compass fa-2x small-margin text-light-gray"></i>
        <span class="display-block text-weight-bold">Design</span>
      </p>
    </div>
    <div class="cell medium-shrink">
      <i class="fas fa-plus fa-lg large-margin text-light-gray"></i>
    </div>
    <div class="cell medium-shrink">
      <p>
        <i class="fas fa-laptop-code fa-2x small-margin text-light-gray"></i>
        <span class="display-block text-weight-bold">Development</span>
      </p>
    </div>
  </div>

  <p>User experience is directly affected by how digital content is planned and structured. For this reason, this style guide is aimed at not only designers and developers, but also content creators. In addition to code samples and rules of aesthetics, this guide also defines best practices for creating content that's clear, concise, and user-friendly.</p>

  <p class="large-margin-top"><em>Note: This style guide is built upon the Foundation front-end framework. For an exhaustive list of features, components, or modules not covered here, please see the <strong><a href="https://foundation.zurb.com/sites/docs/">Foundation for Sites documentation</a></strong>.</em></p>
</section>


<hr class="xlarge-margin-top xlarge-margin-bottom">
<h2 id="getting-started" class="large-margin-bottom">Getting Started <sup><a href="#getting-started" class="silver"><i class="fas fa-link"></i></a></sup></h2>
<section>
<p>There are a few ways to incorporate the NYC Planning Digital Style Guide into your project, depending on your tech stack and requirements:</p>
<ul class="menu expanded text-center xlarge-margin-bottom">
  <li><a href="#cdn" data-smooth-scroll>
   <i class="fas fa-server fa-4x" style="transform:scale(0.6);"></i>
    <span class="display-block">**Use a CDN-hosted version**</span>
  </a></li>
  <li><a href="#installation" data-smooth-scroll>
    <span class="text-weight-normal"><i class="fab fa-npm fa-4x"></i></span>
    <span class="display-block">**Install with package manager**</span>
  </a></li>
  <li><a href="#ember-and-labs-ui" data-smooth-scroll>
    <span class="text-weight-normal"><i class="fab fa-ember fa-4x"></i></span>
    <span class="display-block">**Use the Ember addon**</span>
  </a></li>
</ul>

<p><em>Note: This Style Guide uses the Foundation framework. However, a <a href="#bootstrap" data-smooth-scroll>Bootstrap template</a> is also available.</em></p>
</section>


<section>
<h2 id="cdn">CDN <sup><a href="#cdn" class="silver"><i class="fas fa-link"></i></a></sup></h2>

<p>The simplest way to incorporate the Style Guide into your project is to use the files hosted on the <a href="https://unpkg.com/browse/nyc-planning-style-guide/">unpkg.com&nbsp;CDN&nbsp;<i class="fas fa-external-link-alt"></i></a>.</p>
<h5 id="1-place-this-link-in-the-head-of-your-html-code">1. Place this link in the head of your HTML code:</h5>
<div class="code-example"><pre><code class="html hljs"><span class="hljs-tag">&lt;<span class="hljs-title">link</span> <span class="hljs-attribute">rel</span>=<span class="hljs-value">"stylesheet"</span> <span class="hljs-attribute">href</span>=<span class="hljs-value">"https://unpkg.com/nyc-planning-style-guide@1.0.7/dist/assets/css/nyc-planning.css"</span> /&gt;</span></code></pre></div><h5 id="2-and-place-this-script-at-the-end-of-your-code-just-before-the-closing-body-tag">2. And place this script at the end of your code, just before the closing <code>&lt;/body&gt;</code> tag:</h5>
<div class="code-example"><pre><code class="html hljs"><span class="hljs-tag">&lt;<span class="hljs-title">script</span> <span class="hljs-attribute">src</span>=<span class="hljs-value">"https://unpkg.com/nyc-planning-style-guide@1.0.7/dist/assets/js/nyc-planning.js"</span>&gt;</span><span class="undefined"></span><span class="hljs-tag">&lt;/<span class="hljs-title">script</span>&gt;</span></code></pre></div><p>That&#39;s it! You&#39;re all set to start using our CSS classes and JavaScript components.</p>
<h4 id="upgrading">Upgrading</h4>
<p>If you want to upgrade to a newer release of the Style Guide, update the version number in your CSS and JavaScript URLs — see the <a href="https://unpkg.com/browse/nyc-planning-style-guide/">list of the available releases</a>.  If you don&#39;t specify a specific version, it will default to the latest version. So be sure to use (and test!) an explicit version in your application to avoid breaking changes.</p>
<h4 id="still-need-help">Still need help?</h4>
<p>Here&#39;s a boilerplate HTML starter template which has everything you need — including the CSS, JavaScript, and the <a href="/icons">FontAwesome icon set</a>:</p>
<div class="code-example"><pre><code class="html hljs"><span class="hljs-doctype">&lt;!doctype html&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">html</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"no-js"</span> <span class="hljs-attribute">lang</span>=<span class="hljs-value">"en"</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-title">head</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-title">meta</span> <span class="hljs-attribute">charset</span>=<span class="hljs-value">"utf-8"</span> /&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-title">meta</span> <span class="hljs-attribute">http-equiv</span>=<span class="hljs-value">"x-ua-compatible"</span> <span class="hljs-attribute">content</span>=<span class="hljs-value">"ie=edge"</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-title">meta</span> <span class="hljs-attribute">name</span>=<span class="hljs-value">"viewport"</span> <span class="hljs-attribute">content</span>=<span class="hljs-value">"width=device-width, initial-scale=1.0"</span> /&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-title">title</span>&gt;</span>NYC Planning [application name]<span class="hljs-tag">&lt;/<span class="hljs-title">title</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-title">link</span> <span class="hljs-attribute">rel</span>=<span class="hljs-value">"stylesheet"</span> <span class="hljs-attribute">href</span>=<span class="hljs-value">"https://use.fontawesome.com/releases/v5.8.2/css/all.css"</span> <span class="hljs-attribute">integrity</span>=<span class="hljs-value">"sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay"</span> <span class="hljs-attribute">crossorigin</span>=<span class="hljs-value">"anonymous"</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-title">link</span> <span class="hljs-attribute">rel</span>=<span class="hljs-value">"stylesheet"</span> <span class="hljs-attribute">href</span>=<span class="hljs-value">"https://unpkg.com/nyc-planning-style-guide@1.0.7/dist/assets/css/nyc-planning.css"</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-title">head</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-title">body</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-title">h1</span>&gt;</span>Hello, world! <span class="hljs-tag">&lt;<span class="hljs-title">i</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"fas fa-rocket"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-title">i</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-title">h1</span>&gt;</span>

    <span class="hljs-tag">&lt;<span class="hljs-title">script</span> <span class="hljs-attribute">src</span>=<span class="hljs-value">"https://unpkg.com/nyc-planning-style-guide@1.0.7/dist/assets/js/nyc-planning.js"</span>&gt;</span><span class="undefined"></span><span class="hljs-tag">&lt;/<span class="hljs-title">script</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-title">body</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-title">html</span>&gt;</span></code></pre></div><p><em>Note: Be sure to include the <code>.no-js</code> class on your <code>html</code> tag. Adding this class prevents flash of unstyled content for a number of components.</em></p>
<h4 id="download-static-assets">Download static assets</h4>
<p>If you&#39;d like the CSS and JavaScript as static assets for your project, you can download the latest files here:</p>
<ul>
<li><strong>Style</strong>: <a href="../assets/css/nyc-planning.css">nyc-planning.css&nbsp;<i class="fas fa-download"></i></a></li>
<li><strong>JavaScript</strong>: <a href="../assets/js/nyc-planning.js">nyc-planning.js&nbsp;<i class="fas fa-download"></i></a></li>
</ul>

</section>


<section>
<h2 id="installation">Installation <sup><a href="#installation" class="silver"><i class="fas fa-link"></i></a></sup></h2>
<p>This package is available at <a href="https://www.npmjs.com/package/nyc-planning-style-guide">npmjs.com</a>, and includes all of the source Sass and JavaScript files and the compiled CSS and JavaScript. It requires <a href="https://nodejs.org/">Node.js</a> (with <a href="https://www.npmjs.com/">npm</a> or <a href="https://yarnpkg.com/">Yarn</a>) and a <a href="https://sass-lang.com/">Sass</a> compiler (Ruby Sass 3.4+ or libsass 3.3.2+).</p>
<h4 id="1-install-the-package">1. Install the package</h4>
<div class="code-example"><pre><code class="html hljs">$ npm install nyc-planning-style-guide
$ # or
$ yarn add nyc-planning-style-guide</code></pre></div><h4 id="2-configure-sass-load-paths">2. Configure Sass load paths</h4>
<p>Add Sass load paths for this package and Foundation. How you do this depends on your build process—for example, <code>node-sass</code> can declare load paths by adding a <code>SASS_PATH</code> variable to your <code>.env</code> file:</p>
<div class="code-example"><pre><code class="html hljs">SASS_PATH=node_modules:node_modules/foundation-sites/scss:node_modules/nyc-planning-style-guide/src/assets/scss</code></pre></div><p>Regardless of your build process, the load paths are the same:</p>
<ul>
<li><code>node_modules/</code></li>
<li><code>node_modules/foundation-sites/scss</code></li>
<li><code>node_modules/nyc-planning-style-guide/src/assets/scss</code></li>
</ul>
<h4 id="3-set-up-your-scss">3. Set up your <code>.scss</code></h4>
<p>Edit your project&#39;s Sass file to import/include variables, mixins, and modules in the following order:</p>
<ul class="no-margin-bottom">
  <li>
    <div class="grid-x grid-margin-x">
      <div class="cell large-5">
        <p>Import Foundation's utilities that help us work with colors, units, selectors, and more.</p>
      </div>
      <div class="cell large-7">
<div class="code-example"><pre><code class="html hljs">@import 'foundation-sites/scss/util/util';</code></pre></div>      </div>
    </div>
  </li>
  <li>
    <div class="grid-x grid-margin-x">
      <div class="cell large-5">
        <p>Import the variables file from this package, which includes NYC Planning color palettes and Foundation's utilities and settings.</p>
      </div>
      <div class="cell large-7">
<div class="code-example"><pre><code class="html hljs">@import 'nyc-planning-variables';</code></pre></div>      </div>
    </div>
  </li>
  <li>
    <div class="grid-x grid-margin-x">
      <div class="cell large-5">
        <p>Import Foundation, which includes Sass functions and mixins but does not output any CSS rule-sets.</p>
      </div>
      <div class="cell large-7">
<div class="code-example"><pre><code class="html hljs">@import 'foundation';</code></pre></div>      </div>
    </div>
  </li>
  <li>
    <div class="grid-x grid-margin-x">
      <div class="cell large-5">
        <p>Include Foundation components, which outputs CSS rule-sets for those components. If you don't need everything, you can output a subset of components by including them individually.</p>
      </div>
      <div class="cell large-7">
        <ul class="tabs" data-tabs id="example-tabs">
          <li class="tabs-title is-active"><a data-tabs-target="foundation-include-all" href="#foundation-include-all" aria-selected="true">Everything</a></li>
          <li class="tabs-title"><a data-tabs-target="foundation-include-some" href="#foundation-include-some">Individually</a></li>
        </ul>
        <div class="tabs-content" data-tabs-content="example-tabs">
          <div class="tabs-panel is-active" id="foundation-include-all">
<div class="code-example"><pre><code class="html hljs">@include foundation-everything;</code></pre></div>          </div>
          <div class="tabs-panel" id="foundation-include-some">
<div class="code-example"><pre><code class="html hljs">// Global styles
@include foundation-global-styles;
@include foundation-forms;
@include foundation-typography;

// Grids (choose one)
@include foundation-xy-grid-classes;
// @include foundation-grid;
// @include foundation-flex-grid;

// Generic components
@include foundation-button;
@include foundation-button-group;
@include foundation-close-button;
@include foundation-label;
@include foundation-progress-bar;
@include foundation-slider;
@include foundation-switch;
@include foundation-table;
// Basic components
@include foundation-badge;
@include foundation-breadcrumbs;
@include foundation-callout;
@include foundation-card;
@include foundation-dropdown;
@include foundation-pagination;
@include foundation-tooltip;

// Containers
@include foundation-accordion;
@include foundation-media-object;
@include foundation-orbit;
@include foundation-responsive-embed;
@include foundation-tabs;
@include foundation-thumbnail;
// Menu-based containers
@include foundation-menu;
@include foundation-menu-icon;
@include foundation-accordion-menu;
@include foundation-drilldown-menu;
@include foundation-dropdown-menu;

// Layout components
@include foundation-off-canvas;
@include foundation-reveal;
@include foundation-sticky;
@include foundation-title-bar;
@include foundation-top-bar;

// Helpers
@include foundation-float-classes;
// @include foundation-flex-classes;
@include foundation-visibility-classes;
// @include foundation-prototype-classes;</code></pre></div>        </div>
      </div>
    </div>
  </li>
  <li>
    <div class="grid-x grid-margin-x">
      <div class="cell large-5">
        <p>Import NYC Planning Sass modules, which outputs CSS rule-sets for our custom components. If you don't need everything, you can output a subset of modules by including them individually.</p>
      </div>
      <div class="cell large-7">
        <ul class="tabs" data-tabs id="example-tabs">
          <li class="tabs-title is-active"><a data-tabs-target="nycplanning-include-all" href="#nycplanning-include-all" aria-selected="true">Everything</a></li>
          <li class="tabs-title"><a data-tabs-target="nycplanning-include-some" href="#nycplanning-include-some">Individually</a></li>
        </ul>
        <div class="tabs-content" data-tabs-content="example-tabs">
          <div class="tabs-panel is-active" id="nycplanning-include-all">
<div class="code-example"><pre><code class="html hljs">@import 'modules/nyc-planning-all-modules';</code></pre></div>          </div>
          <div class="tabs-panel" id="nycplanning-include-some">
<div class="code-example"><pre><code class="html hljs">@import 'nyc-planning-m-box-model';
@import 'nyc-planning-m-color';
@import 'nyc-planning-m-layer-groups-menu';
@import 'nyc-planning-m-site-header';
@import 'nyc-planning-m-typography';</code></pre></div>          </div>
        </div>
      </div>
    </div>
  </li>
  <li>
<p>Finally, any custom app modules and styles should come after the files above. Your <code>.scss</code> file should look something like this:</p>
<div class="code-example"><pre><code class="html hljs">@import 'foundation-sites/scss/util/util';
@import 'nyc-planning-variables';
@import 'foundation';
@include foundation-everything;
@import 'modules/nyc-planning-all-modules';

// My custom app styles
@import 'my-app-module';
.peanut-butter {
  color: Burlywood;
}</code></pre></div>  </li>
</ul>

<h4 id="4-javascript-optional">4. JavaScript <small class="text-weight-normal">(optional)</small></h4>
<p>This package can be used for its styles alone. However, some interactive components require JavaScript for behaviors such as toggling element class names. There are a few methods for including JavaScript in your project:</p>
<ul>
<li><p><strong>Use the compiled JavaScript:</strong>
Simply load the JavaScript file (<code>/dist/assets/js/nyc-planning.js</code>), which is a compiled combination of Foundation&#39;s JavaScript and its dependencies. This is the easiest method but may include unnecessary code.</p>
</li>
<li><p><strong>Use specific JavaScript components:</strong>
Individually load jQuery, What Input, and the specific Foundation JavaScript components and then initialize Foundation. For more information on setting up custom JavaScript, see the <a href="https://foundation.zurb.com/sites/docs/javascript.html">Foundation JavaScript documentation&nbsp;<i class="fas fa-external-link-alt"></i></a>.</p>
</li>
<li><p><strong>Handle behavior/state yourself:</strong> If you&#39;re using a framework that handles state for you (e.g. JavaScript MVCs), it&#39;s best  to avoid the dependencies of jQuery and Foundation&#39;s custom JavaScript. You should instead use your own custom methods to change class names in interactive components. This is how the <a href="#ember-and-labs-ui" data-smooth-scroll>Labs UI</a> addon works, as state is handled by EmberJS.</p>
</li>
</ul>
</section>


<section>
<h2 id="ember-and-labs-ui">Ember and Labs UI <sup><a href="#ember-and-labs-ui" class="silver"><i class="fas fa-link"></i></a></sup></h2>
<p>Labs UI is an EmberJS addon that contains common components used in NYC Planning digital products. It consumes Sass files from this package to style its components. Since Ember handles behavior and state management, Labs UI does not include any JavaScript from this package.</p>
<p>For more information, see the <strong><a href="https://ui.planninglabs.nyc/">Labs UI documentation</a></strong>.</p>
</section>


<hr class="xlarge-margin-top xlarge-margin-bottom">
<h2 id="logo" class="large-margin-bottom">Logo <sup><a href="#logo" class="silver"><i class="fas fa-link"></i></a></sup></h2>
<section>
<p>The NYC Planning logo should be used consistently to foster brand awareness.</p>
<div class="code-example"><pre><code class="html hljs"><span class="hljs-tag">&lt;<span class="hljs-title">img</span> <span class="hljs-attribute">alt</span>=<span class="hljs-value">"NYC Planning"</span> <span class="hljs-attribute">src</span>=<span class="hljs-value">"https://raw.githubusercontent.com/NYCPlanning/dcp-logo/master/dcp_logo_772.png"</span> /&gt;</span></code></pre></div><div class="callout xlarge-padding">
  <img alt="NYC Planning" style="width:300px;" src="https://raw.githubusercontent.com/NYCPlanning/dcp-logo/master/dcp_logo_772.png" />
</div>

<p>Download the logo in various formats: <a href="https://github.com/NYCPlanning/dcp-logo">https://github.com/NYCPlanning/dcp-logo</a></p>
</section>

<section>
<h3 id="logo-variations">Logo variations <sup><a href="#logo-variations" class="silver"><i class="fas fa-link"></i></a></sup></h3>
<p>The two-color, primary version of logo should be used for most instances. Alternate black and white versions are provided for instances where the primary logo is less legible — e.g. a background makes the orange or black in the logo hard to read.</p>
<div class="code-example"><pre><code class="html hljs"><span class="hljs-comment">&lt;!-- Primary, two-color logo --&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">img</span> <span class="hljs-attribute">alt</span>=<span class="hljs-value">"NYC Planning"</span> <span class="hljs-attribute">src</span>=<span class="hljs-value">"https://raw.githubusercontent.com/NYCPlanning/dcp-logo/master/dcp_logo_772.png"</span> /&gt;</span>

<span class="hljs-comment">&lt;!-- White logo --&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">img</span> <span class="hljs-attribute">alt</span>=<span class="hljs-value">"NYC Planning"</span> <span class="hljs-attribute">src</span>=<span class="hljs-value">"https://raw.githubusercontent.com/NYCPlanning/dcp-logo/master/dcp_logo_white_772.png"</span> /&gt;</span>

<span class="hljs-comment">&lt;!-- Black logo --&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">img</span> <span class="hljs-attribute">alt</span>=<span class="hljs-value">"NYC Planning"</span> <span class="hljs-attribute">src</span>=<span class="hljs-value">"https://raw.githubusercontent.com/NYCPlanning/dcp-logo/master/dcp_logo_black_772.png"</span> /&gt;</span></code></pre></div><div class="callout">
  <div class="grid-x grid-padding-x large-up-3">
    <div class="cell large-padding">
      <img alt="NYC Planning" src="https://raw.githubusercontent.com/NYCPlanning/dcp-logo/master/dcp_logo_772.png" />
      <p class="text-small large-margin-top no-margin-bottom">Use the two-color version of the logo whenever possible</p>
    </div>
    <div class="cell large-padding bg-a11y-orange">
      <img alt="NYC Planning" src="https://raw.githubusercontent.com/NYCPlanning/dcp-logo/master/dcp_logo_white_772.png" />
      <p class="text-small large-margin-top no-margin-bottom">Use the white version of the logo on dark&nbsp;backgrounds</p>
    </div>
    <div class="cell large-padding bg-dcp-yellow">
      <img alt="NYC Planning" src="https://raw.githubusercontent.com/NYCPlanning/dcp-logo/master/dcp_logo_black_772.png" />
      <p class="text-small large-margin-top no-margin-bottom">Use the black version of the logo on light&nbsp;backgrounds</p>
    </div>
  </div>
</div>

</section>

<section>
<h3 id="logo-usage">Logo usage <sup><a href="#logo-usage" class="silver"><i class="fas fa-link"></i></a></sup></h3>
<h4 id="clearspace">Clearspace</h4>
<div class="grid-x grid-margin-x">
  <div class="cell large-4">
    <div class="callout clear" style="padding:8%; position:relative;">
      <img alt="NYC Planning" src="https://raw.githubusercontent.com/NYCPlanning/dcp-logo/master/dcp_logo_772.png" />
      <div style="background:rgba(255,0,0,0.2); position:absolute; top:0; right:0; bottom:auto; left:0; padding-top:8%;"></div>
      <div style="background:rgba(255,0,0,0.2); position:absolute; top:0; right:0; bottom:0; left:auto; padding-right:8%;"></div>
      <div style="background:rgba(255,0,0,0.2); position:absolute; top:auto; right:0; bottom:0; left:0; padding-bottom:8%;"></div>
      <div style="background:rgba(255,0,0,0.2); position:absolute; top:0; right:auto; bottom:0; left:0; padding-left:8%;"></div>
    </div>
  </div>
  <div class="cell large-auto">
    <p>It's important to maintain enough space around the logo, allowing it to stand out and ensuring that it's easily identifiable.</p>
    <p>Please don’t put anything in this "red zone"—which is approximately 8% of the height of the logo, or about the size of the square in the middle of the C. </p>
  </div>
</div>

<h4 id="resolution">Resolution</h4>
<p>@2x for retina screens, display raster PNG version at max 1/2 size or use vector SVG versions</p>
<h4 id="logo-donts">Logo don&#39;ts</h4>
<div class="grid-x grid-margin-x large-up-4">
  <div class="cell">
    <div class="callout large-padding bg-green-muted">
      <img alt="NYC Planning" src="https://raw.githubusercontent.com/NYCPlanning/dcp-logo/master/dcp_logo_772.png" />
    </div>
    <p class="text-small large-margin-bottom"><i class="fas fa-ban fuchsia"></i> Do not place the two-color logo on colorful backgrounds</p>
  </div>
  <div class="cell">
    <div class="callout large-padding" style="background: linear-gradient(90deg, rgba(131,58,180,1) 0%, rgba(253,29,29,1) 50%, rgba(252,176,69,1) 100%);">
      <img alt="NYC Planning" src="https://raw.githubusercontent.com/NYCPlanning/dcp-logo/master/dcp_logo_772.png" />
    </div>
    <p class="text-small large-margin-bottom"><i class="fas fa-ban fuchsia"></i> Do not place the logo on backgrounds that make it difficult to read</p>
  </div>
  <div class="cell">
    <div class="callout clear large-padding">
      <img style="transform:scale(0.2)" alt="NYC Planning" src="https://raw.githubusercontent.com/NYCPlanning/dcp-logo/master/dcp_logo_772.png" />
    </div>
    <p class="text-small large-margin-bottom"><i class="fas fa-ban fuchsia"></i> Do not shrink the logo smaller than its 50-pixel minimum width</p>
  </div>
  <div class="cell">
    <div class="callout large-padding">
      <img style="mix-blend-mode:hard-light;" alt="NYC Planning" src="https://raw.githubusercontent.com/NYCPlanning/dcp-logo/master/dcp_logo_772.png" />
    </div>
    <p class="text-small large-margin-bottom"><i class="fas fa-ban fuchsia"></i> Do not change the color of the logo</p>
  </div>
  <div class="cell">
    <div class="callout clear large-padding">
      <img style="width:100%;" alt="NYC Planning" src="/assets/img/bad-logo.png" />
    </div>
    <p class="text-small large-margin-bottom"><i class="fas fa-ban fuchsia"></i> Do not use a blurry or low-resolution version of the logo</p>
  </div>
  <div class="cell">
    <div class="callout clear large-padding">
      <img style="transform:rotate(-45deg);" alt="NYC Planning" src="https://raw.githubusercontent.com/NYCPlanning/dcp-logo/master/dcp_logo_772.png" />
    </div>
    <p class="text-small large-margin-bottom"><i class="fas fa-ban fuchsia"></i> Do not rotate the logo</p>
  </div>
  <div class="cell">
    <div class="callout bg-white-smoke large-padding">
      <img alt="NYC Planning" src="https://raw.githubusercontent.com/NYCPlanning/dcp-logo/master/dcp_logo_black_772.png" />
    </div>
    <p class="text-small large-margin-bottom"><i class="fas fa-ban fuchsia"></i> Do not use the black logo when the primary logo would read well</p>
  </div>
  <div class="cell">
    <div class="callout bg-orange-light large-padding">
      <img alt="NYC Planning" src="https://raw.githubusercontent.com/NYCPlanning/dcp-logo/master/dcp_logo_white_772.png" />
    </div>
    <p class="text-small large-margin-bottom"><i class="fas fa-ban fuchsia"></i> Do not use the white logo on light colored backgrounds</p>
  </div>
</div>

</section>


<hr class="xlarge-margin-top xlarge-margin-bottom">
<h2 id="color" class="large-margin-bottom">Color <sup><a href="#color" class="silver"><i class="fas fa-link"></i></a></sup></h2>
<section>
<p>Promote strong brand recognition by using a distinct and reduced color palette, featuring only two hues (orange and yellow) and subtle shades of gray.</p>
<p>The primary brand color is <code>dcp-orange <i class="fas fa-square dcp-orange"></i></code>. It&#39;s the color of the &quot;NYC&quot; in our logo, and it can be used for large blocks of color. The slightly darker <code>a11y-orange <i class="fas fa-square a11y-orange"></i></code> increases accessibility by adding more contrast, and is the default color for linked text and button backgrounds.</p>
<p>The secondary brand color is <code>dcp-yellow <i class="fas fa-square dcp-yellow"></i></code>. Use it in small amounts as an accent and for secondary UI elements. The lighter <code>a11y-yellow <i class="fas fa-square a11y-yellow"></i></code> increases accessibility and can be used for linked text on darker backgrounds.</p>
<ul>
<li>Orange implies clickability in our products. Do not use orange to highlight or emphasize words.</li>
<li>Be sure to use the <a href="https://webaim.org/resources/contrastchecker/">Color Contrast Checker <i class="fas fa-external-link-alt"></i></a> to choose accessible colors.</li>
<li>Do not overuse color. Color should not cover the majority of the page.</li>
<li>Avoid dark UIs. Instead, keep products light and inviting, using subtle grays to create visual hierarchy—the default background color of the <code>&lt;body&gt;</code> element is <code>off-white <i class="fas fa-square off-white"></i></code>.</li>
</ul>
</section>

<section>
<h3 id="brand-colors">Brand colors <sup><a href="#brand-colors" class="silver"><i class="fas fa-link"></i></a></sup></h3>
<div class="grid-x small-up-1 large-up-2 medium-margin-bottom font-mono large-text-right">
  <ul class="color-swatch cell bg-dcp-orange" data-colorname="dcp-orange"></ul>
  <ul class="color-swatch cell bg-a11y-orange" data-colorname="a11y-orange"></ul>
  <ul class="color-swatch cell bg-dcp-yellow" data-colorname="dcp-yellow"></ul>
  <ul class="color-swatch cell bg-a11y-yellow" data-colorname="a11y-yellow"></ul>
</div>
</section>

<section>
<h3 id="grayscale-colors">Grayscale colors <sup><a href="#grayscale-colors" class="silver"><i class="fas fa-link"></i></a></sup></h3>
<p>Avoid pure black <code>#000</code> and white <code>#fff</code>, as text/background color combinations with too high of a contrast can decrease legibility and cause eye strain.</p>
<div class="grid-x medium-margin-bottom align-middle">
  <ul class="color-swatch cell large-4 large-text-right font-mono bg-black" data-colorname="black"></ul>
  <ul class="color-swatch cell large-4 large-text-right font-mono bg-charcoal" data-colorname="charcoal"></ul>
  <ul class="color-swatch cell large-4 large-text-right font-mono bg-dark-gray" data-colorname="dark-gray"></ul>
  <ul class="color-swatch cell large-4 large-text-right font-mono bg-gray" data-colorname="gray"></ul>
  <ul class="color-swatch cell large-4 large-text-right font-mono bg-light-gray" data-colorname="light-gray"></ul>
  <ul class="color-swatch cell large-4 large-text-right font-mono bg-silver" data-colorname="silver"></ul>
  <ul class="color-swatch cell large-4 large-text-right font-mono bg-white-smoke" data-colorname="white-smoke"></ul>
  <ul class="color-swatch cell large-4 large-text-right font-mono bg-off-white" data-colorname="off-white"></ul>
  <ul class="color-swatch cell large-4 large-text-right font-mono bg-white" data-colorname="white"></ul>
</div>
</section>

<section>
<h3 id="data-viz-colors">Data viz colors <sup><a href="#data-viz-colors" class="silver"><i class="fas fa-link"></i></a></sup></h3>
<p>Our data viz color palette has been optimized to increase the visual distinction of 12 hues in varying saturation and lightness, <a href="https://medium.com/nyc-planning-digital/experimenting-with-planning-color-standards-15b591d2a90c">with consideration for APA&#39;s Land-Based Classification Standards</a>. Learn more about choosing colors in the <a href="#color-accessibility" data-smooth-scroll>Color Accessibility</a> section.</p>
<h4 id="red">Red</h4>
<div class="grid-x small-up-1 large-up-6 font-mono large-text-right">
  <ul class="color-swatch cell bg-red-white" data-colorname="red-white"></ul>
  <ul class="color-swatch cell bg-red-light" data-colorname="red-light"></ul>
  <ul class="color-swatch cell bg-red" data-colorname="red"></ul>
  <ul class="color-swatch cell bg-red-dim" data-colorname="red-dim"></ul>
  <ul class="color-swatch cell bg-red-dark" data-colorname="red-dark"></ul>
  <ul class="color-swatch cell bg-red-muted" data-colorname="red-muted"></ul>
</div>

<h4 id="orange">Orange</h4>
<div class="grid-x small-up-1 large-up-6 font-mono large-text-right">
  <ul class="color-swatch cell bg-orange-white" data-colorname="orange-white"></ul>
  <ul class="color-swatch cell bg-orange-light" data-colorname="orange-light"></ul>
  <ul class="color-swatch cell bg-orange" data-colorname="orange"></ul>
  <ul class="color-swatch cell bg-orange-dim" data-colorname="orange-dim"></ul>
  <ul class="color-swatch cell bg-orange-dark" data-colorname="orange-dark"></ul>
  <ul class="color-swatch cell bg-orange-muted" data-colorname="orange-muted"></ul>
</div>

<h4 id="gold">Gold</h4>
<div class="grid-x small-up-1 large-up-6 font-mono large-text-right">
  <ul class="color-swatch cell bg-gold-white" data-colorname="gold-white"></ul>
  <ul class="color-swatch cell bg-gold-light" data-colorname="gold-light"></ul>
  <ul class="color-swatch cell bg-gold" data-colorname="gold"></ul>
  <ul class="color-swatch cell bg-gold-dim" data-colorname="gold-dim"></ul>
  <ul class="color-swatch cell bg-gold-dark" data-colorname="gold-dark"></ul>
  <ul class="color-swatch cell bg-gold-muted" data-colorname="gold-muted"></ul>
</div>

<h4 id="yellow">Yellow</h4>
<div class="grid-x small-up-1 large-up-6 font-mono large-text-right">
  <ul class="color-swatch cell bg-yellow-white" data-colorname="yellow-white"></ul>
  <ul class="color-swatch cell bg-yellow-light" data-colorname="yellow-light"></ul>
  <ul class="color-swatch cell bg-yellow" data-colorname="yellow"></ul>
  <ul class="color-swatch cell bg-yellow-dim" data-colorname="yellow-dim"></ul>
  <ul class="color-swatch cell bg-yellow-dark" data-colorname="yellow-dark"></ul>
  <ul class="color-swatch cell bg-yellow-muted" data-colorname="yellow-muted"></ul>
</div>

<h4 id="chartreuse">Chartreuse</h4>
<div class="grid-x small-up-1 large-up-6 font-mono large-text-right">
  <ul class="color-swatch cell cell bg-chartreuse-white" data-colorname="chartreuse-white"></ul>
  <ul class="color-swatch cell cell bg-chartreuse-light" data-colorname="chartreuse-light"></ul>
  <ul class="color-swatch cell bg-chartreuse" data-colorname="chartreuse"></ul>
  <ul class="color-swatch cell bg-chartreuse-dim" data-colorname="chartreuse-dim"></ul>
  <ul class="color-swatch cell bg-chartreuse-dark" data-colorname="chartreuse-dark"></ul>
  <ul class="color-swatch cell bg-chartreuse-muted" data-colorname="chartreuse-muted"></ul>
</div>

<h4 id="green">Green</h4>
<div class="grid-x small-up-1 large-up-6 font-mono large-text-right">
  <ul class="color-swatch cell bg-green-white" data-colorname="green-white"></ul>
  <ul class="color-swatch cell bg-green-light" data-colorname="green-light"></ul>
  <ul class="color-swatch cell bg-green" data-colorname="green"></ul>
  <ul class="color-swatch cell bg-green-dim" data-colorname="green-dim"></ul>
  <ul class="color-swatch cell bg-green-dark" data-colorname="green-dark"></ul>
  <ul class="color-swatch cell bg-green-muted" data-colorname="green-muted"></ul>
</div>

<h4 id="teal">Teal</h4>
<div class="grid-x small-up-1 large-up-6 font-mono large-text-right">
  <ul class="color-swatch cell bg-teal-white" data-colorname="teal-white"></ul>
  <ul class="color-swatch cell bg-teal-light" data-colorname="teal-light"></ul>
  <ul class="color-swatch cell bg-teal" data-colorname="teal"></ul>
  <ul class="color-swatch cell bg-teal-dim" data-colorname="teal-dim"></ul>
  <ul class="color-swatch cell bg-teal-dark" data-colorname="teal-dark"></ul>
  <ul class="color-swatch cell bg-teal-muted" data-colorname="teal-muted"></ul>
</div>

<h4 id="aqua">Aqua</h4>
<div class="grid-x small-up-1 large-up-6 font-mono large-text-right">
  <ul class="color-swatch cell bg-aqua-white" data-colorname="aqua-white"></ul>
  <ul class="color-swatch cell bg-aqua-light" data-colorname="aqua-light"></ul>
  <ul class="color-swatch cell bg-aqua" data-colorname="aqua"></ul>
  <ul class="color-swatch cell bg-aqua-dim" data-colorname="aqua-dim"></ul>
  <ul class="color-swatch cell bg-aqua-dark" data-colorname="aqua-dark"></ul>
  <ul class="color-swatch cell bg-aqua-muted" data-colorname="aqua-muted"></ul>
</div>

<h4 id="blue">Blue</h4>
<div class="grid-x small-up-1 large-up-6 medium-margin-bottom font-mono large-text-right">
  <ul class="color-swatch cell bg-blue-white" data-colorname="blue-white"></ul>
  <ul class="color-swatch cell bg-blue-light" data-colorname="blue-light"></ul>
  <ul class="color-swatch cell bg-blue" data-colorname="blue"></ul>
  <ul class="color-swatch cell bg-blue-dim" data-colorname="blue-dim"></ul>
  <ul class="color-swatch cell bg-blue-dark" data-colorname="blue-dark"></ul>
  <ul class="color-swatch cell bg-blue-muted" data-colorname="blue-muted"></ul>
</div>

<h4 id="indigo">Indigo</h4>
<div class="grid-x small-up-1 large-up-6 font-mono large-text-right">
  <ul class="color-swatch cell bg-indigo-white" data-colorname="indigo-white"></ul>
  <ul class="color-swatch cell bg-indigo-light" data-colorname="indigo-light"></ul>
  <ul class="color-swatch cell bg-indigo" data-colorname="indigo"></ul>
  <ul class="color-swatch cell bg-indigo-dim" data-colorname="indigo-dim"></ul>
  <ul class="color-swatch cell bg-indigo-dark" data-colorname="indigo-dark"></ul>
  <ul class="color-swatch cell bg-indigo-muted" data-colorname="indigo-muted"></ul>
</div>

<h4 id="purple">Purple</h4>
<div class="grid-x small-up-1 large-up-6 font-mono large-text-right">
  <ul class="color-swatch cell bg-purple-white" data-colorname="purple-white"></ul>
  <ul class="color-swatch cell bg-purple-light" data-colorname="purple-light"></ul>
  <ul class="color-swatch cell bg-purple" data-colorname="purple"></ul>
  <ul class="color-swatch cell bg-purple-dim" data-colorname="purple-dim"></ul>
  <ul class="color-swatch cell bg-purple-dark" data-colorname="purple-dark"></ul>
  <ul class="color-swatch cell bg-purple-muted" data-colorname="purple-muted"></ul>
</div>

<h4 id="fuchsia">Fuchsia</h4>
<div class="grid-x small-up-1 large-up-6 font-mono large-text-right">
  <ul class="color-swatch cell bg-fuchsia-white" data-colorname="fuchsia-white"></ul>
  <ul class="color-swatch cell bg-fuchsia-light" data-colorname="fuchsia-light"></ul>
  <ul class="color-swatch cell bg-fuchsia" data-colorname="fuchsia"></ul>
  <ul class="color-swatch cell bg-fuchsia-dim" data-colorname="fuchsia-dim"></ul>
  <ul class="color-swatch cell bg-fuchsia-dark" data-colorname="fuchsia-dark"></ul>
  <ul class="color-swatch cell bg-fuchsia-muted" data-colorname="fuchsia-muted"></ul>
</div>

</section>

<section>
<h3 id="land-use-colors">Land Use colors <sup><a href="#land-use-colors" class="silver"><i class="fas fa-link"></i></a></sup></h3>
<ul>
  <li><code>lu-peach <i class="fas fa-square text-lu-peach"></i></code></li>
  <li><code>lu-yellow <i class="fas fa-square text-lu-yellow"></i></code></li>
  <li><code>lu-magenta <i class="fas fa-square text-lu-magenta"></i></code></li>
  <li><code>lu-red <i class="fas fa-square text-lu-red"></i></code></li>
  <li><code>lu-orange <i class="fas fa-square text-lu-orange"></i></code></li>
  <li><code>lu-pink <i class="fas fa-square text-lu-pink"></i></code></li>
  <li><code>lu-green <i class="fas fa-square text-lu-green"></i></code></li>
  <li><code>lu-blue <i class="fas fa-square text-lu-blue"></i></code></li>
  <li><code>lu-lavendar <i class="fas fa-square text-lu-lavendar"></i></code></li>
  <li><code>lu-silver <i class="fas fa-square text-lu-silver"></i></code></li>
  <li><code>lu-gray <i class="fas fa-square text-lu-gray"></i></code></li>
</ul>

</section>
<section>
<h3 id="color-classes">Color classes <sup><a href="#color-classes" class="silver"><i class="fas fa-link"></i></a></sup></h3>
<h4 id="text-colors">Text colors</h4>
<p>Use the <code>.text-[color]</code> classes to set the <strong>text color</strong> of an element.</p>
<div class="code-example"><pre><code class="html hljs"><span class="hljs-tag">&lt;<span class="hljs-title">p</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"text-green-dark"</span>&gt;</span>This whole paragraph is dark green.<span class="hljs-tag">&lt;/<span class="hljs-title">p</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">p</span>&gt;</span>This one is black with a <span class="hljs-tag">&lt;<span class="hljs-title">span</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"text-purple"</span>&gt;</span>purple<span class="hljs-tag">&lt;/<span class="hljs-title">span</span>&gt;</span> word.<span class="hljs-tag">&lt;/<span class="hljs-title">p</span>&gt;</span></code></pre></div><div class="callout">
  <p class="text-green-dark">This whole paragraph is dark green.</p>
  <p>This one is black with a <span class="text-purple">purple</span> word.</p>
</div>

<h4 id="background-colors">Background colors</h4>
<p>Use the <code>.bg-[color]</code> classes to set an element&#39;s <strong>background color</strong> and its default <strong>text color</strong> (defaulting to black or white, depending on which is more accessible). Text color classes override the default text color set by background color classes.</p>
<div class="code-example"><pre><code class="html hljs"><span class="hljs-tag">&lt;<span class="hljs-title">p</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"bg-yellow"</span>&gt;</span>This element has a yellow background, which defaults to black text.<span class="hljs-tag">&lt;/<span class="hljs-title">p</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">p</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"bg-blue-dark"</span>&gt;</span>This element has a dark blue background, which defaults to white text.<span class="hljs-tag">&lt;/<span class="hljs-title">p</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">p</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"bg-chartreuse-light text-green-dark"</span>&gt;</span>This element has a light chartreuse background and dark green text (which overrides its default black text).<span class="hljs-tag">&lt;/<span class="hljs-title">p</span>&gt;</span></code></pre></div><div class="callout">
  <p class="bg-yellow">This element has a yellow background, which defaults to black text.</p>
  <p class="bg-blue-dark">This element has a dark blue background, which defaults to white text.</p>
  <p class="bg-chartreuse-light text-green-dark">This element has a light chartreuse background and dark green text (which overrides its default black text).</p>
</div>

</section>
<section>
<h3 id="color-accessibility">Color accessibility <sup><a href="#color-accessibility" class="silver"><i class="fas fa-link"></i></a></sup></h3>
<div class="grid-x grid-margin-x">
  <div class="cell large-7">
    <p>For those with low vision, typographic contrast is important. In accordance with Web Content Accessibility Guidelines (WCAG) 2.0 requirements, please use the [Color Contrast Checker](http://webaim.org/resources/contrastchecker/) to make sure that all text and background color combinations pass AA contrast requirements.</p>
    <ul class="no-bullet">
      <li><i class="fas fa-ban fuchsia"></i> Do not set light type on light backgrounds</li>
      <li><i class="fas fa-ban fuchsia"></i> Do not set dark type on dark backgrounds</li>
      <li><i class="fas fa-ban fuchsia"></i> Do not relying purely on color for visual cues</li>
    </ul>
  </div>
  <div class="cell large-5">
    <p class="text-small bg-silver text-dcp-orange small-padding">This isn't readable for those with low vision.</p>
    <p class="text-small bg-charcoal text-dcp-orange small-padding">This isn't readable for those with low vision.</p>
    <p class="text-small bg-blue-dark text-gray small-padding">This isn't readable for those with low vision.</p>
    <p class="text-small bg-green-light text-green small-padding">This isn't readable for those with low vision.</p>
  </div>
</div>

</section>


<hr class="xlarge-margin-top xlarge-margin-bottom">
<h2 id="icons" class="large-margin-bottom">Icons <sup><a href="#icons" class="silver"><i class="fas fa-link"></i></a></sup></h2>
<section>
<h3 id="font-awesome">Font Awesome <sup><a href="#font-awesome" class="silver"><i class="fas fa-link"></i></a></sup></h3>
<div class="grid-x text-large small-up-3 medium-up-4 large-up-8 text-charcoal medium-margin-bottom">
  <div class="cell large-padding"><i class="fas fa-search fa-2x"></i></div>
  <div class="cell large-padding"><i class="fas fa-map-marker-alt fa-2x"></i></div>
  <div class="cell large-padding"><i class="fas fa-external-link-alt fa-2x"></i></div>
  <div class="cell large-padding"><i class="fas fa-exclamation-triangle fa-2x"></i></div>
  <div class="cell large-padding"><i class="fas fa-info-circle fa-2x"></i></div>
  <div class="cell large-padding"><i class="fas fa-check fa-2x"></i></div>
  <div class="cell large-padding"><i class="fas fa-file fa-2x"></i></div>
  <div class="cell large-padding"><i class="fas fa-copy fa-2x"></i></div>

  <div class="cell large-padding"><i class="fas fa-users fa-2x"></i></div>
  <div class="cell large-padding"><i class="far fa-hand-pointer fa-2x"></i></div>
  <div class="cell large-padding"><i class="fas fa-envelope fa-2x"></i></div>
  <div class="cell large-padding"><i class="fas fa-draw-polygon fa-2x"></i></div>
  <div class="cell large-padding"><i class="fas fa-pencil-alt fa-2x"></i></div>
  <div class="cell large-padding"><i class="far fa-calendar fa-2x"></i></div>
  <div class="cell large-padding"><i class="fas fa-comment fa-2x"></i></div>
  <div class="cell large-padding"><i class="fas fa-share-square fa-2x"></i></div>

  <div class="cell large-padding"><i class="fas fa-arrow-down fa-2x"></i></div>
  <div class="cell large-padding"><i class="fas fa-cogs fa-2x"></i></div>
  <div class="cell large-padding"><i class="fas fa-edit fa-2x"></i></div>
  <div class="cell large-padding"><i class="fas fa-building fa-2x"></i></div>
  <div class="cell large-padding"><i class="fas fa-undo fa-2x"></i></div>
  <div class="cell large-padding"><i class="fas fa-chart-pie fa-2x"></i></div>
  <div class="cell large-padding"><i class="fas fa-bus-alt fa-2x"></i></div>
  <div class="cell large-padding"><i class="fas fa-bicycle fa-2x"></i></div>
</div>

<p>NYC Planning products use the <a href="https://fontawesome.com/">Font Awesome</a> free, open-source, vector icon set. You can easily tweak these icons. Easily add color, change the size, rotate, animate, and even combine/stack them.</p>
<div class="code-example"><pre><code class="html hljs"><span class="hljs-tag">&lt;<span class="hljs-title">i</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"fas fa-search"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-title">i</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">i</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"fas fa-search text-blue"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-title">i</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">i</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"fas fa-search fa-xs"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-title">i</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">i</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"fas fa-search fa-2x"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-title">i</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">i</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"fas fa-search fa-rotate-270"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-title">i</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">i</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"fas fa-cog fa-spin"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-title">i</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">span</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"fa-stack fa-2x"</span> <span class="hljs-attribute">style</span>=<span class="hljs-value">"font-size:0.5em;"</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-title">i</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"fas fa-comment fa-stack-2x text-charcoal"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-title">i</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-title">i</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"fas fa-bicycle fa-stack-1x text-blue-light"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-title">i</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-title">span</span>&gt;</span></code></pre></div>
<div class="callout text-xlarge text-charcoal">
  <i class="fas fa-search"></i>
  <i class="fas fa-search text-blue"></i>
  <i class="fas fa-search fa-xs"></i>
  <i class="fas fa-search fa-2x"></i>
  <i class="fas fa-search fa-rotate-270"></i>
  <i class="fas fa-cog fa-spin"></i>
  <span class="fa-stack fa-2x" style="font-size:0.5em;">
    <i class="fas fa-comment fa-stack-2x text-charcoal"></i>
    <i class="fas fa-bicycle fa-stack-1x text-blue-light"></i>
  </span>
</div>

</section>


<hr class="xlarge-margin-top xlarge-margin-bottom">
<h2 id="typography" class="large-margin-bottom">Typography <sup><a href="#typography" class="silver"><i class="fas fa-link"></i></a></sup></h2>
<section>
<h3 id="type-basics">Type basics <sup><a href="#type-basics" class="silver"><i class="fas fa-link"></i></a></sup></h3>
<p>Be consistent with font styles and hierarchies to ensure that UI elements are clear and easily recognizable when scanning the page.</p>
<ul>
<li>Avoid using too many font styles</li>
<li>Size type with <a href="https://www.w3schools.com/cssref/css_units.asp">relative units</a> (<code>rem</code>)</li>
<li>Check how your type flows at various screen sizes</li>
</ul>
<h4 id="inline-formatting">Inline formatting</h4>
<ul>
<li>Use <code>&lt;b&gt;</code> for <strong>bold</strong> text, without any extra importance</li>
<li>Use <code>&lt;strong&gt;</code> for <strong>bold</strong> text, with added semantic &quot;strong&quot; importance</li>
<li>Use <code>&lt;i&gt;</code> for <em>italic</em> text, without any extra importance</li>
<li>Use <code>&lt;em&gt;</code> for <em>italicize</em> text, with added semantic importance</li>
<li>Use <code>&lt;small&gt;</code> for <small>smaller</small> text</li>
<li>Use <code>&lt;mark&gt;</code> for <mark>marked</mark> or <mark>highlighted</mark> text</li>
<li>Use <code>&lt;del&gt;</code> for <del>deleted</del> (removed) text</li>
<li>Use <code>&lt;ins&gt;</code> for <ins>inserted</ins> (added) text</li>
<li>Use <code>&lt;sub&gt;</code> for <sub>subscripted</sub> text</li>
<li>Use <code>&lt;sup&gt;</code> for <sup>superscripted</sup> text</li>
</ul>
</section>
<section>
<h3 id="fonts">Fonts <sup><a href="#fonts" class="silver"><i class="fas fa-link"></i></a></sup></h3>
<p>NYC Planning products use a system font stack. This ensures that UIs are optimized to be highly legible, boosts performance, and are frictionless as you move between our products and the rest of the operating system. One exception to system fonts is when displaying <code>code</code>. In this case, you should use the monospace font stack.</p>
<p>Use the <code>.font-default</code> and <code>.font-mono</code> classes to explicitly set the font for a particular element. These classes can be used to override the font inherited from a parent element. But be aware that further nested elements may inherit their font from these classes.</p>
<div class="code-example"><pre><code class="css hljs">// Sans-serif font stack
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;</code></pre></div><div class="code-example"><pre><code class="css hljs">// Monospaced font stack
font-family: Consolas, 'Liberation Mono', Courier, monospace;</code></pre></div><p>The default font size of the <code>&lt;body&gt;</code> element is set to <code>100%</code>, which is 16 pixels on most browsers. This ensures compatibility with browser-based text zoom and preferences set by the user. Explicit font sizes should be set with relative units, preferably <code>rem</code>. Setting the font size with <code>px</code> can break browser zoom functionality.</p>
</section>
<section>
<h3 id="headers">Headers <sup><a href="#headers" class="silver"><i class="fas fa-link"></i></a></sup></h3>
<p>Since search engines use headers to index structure and content, and users skim content by its headers, it&#39;s important to use headers semantically. <code>&lt;h1&gt;</code> through <code>&lt;h6&gt;</code> elements represent six levels of hierarchy, <code>&lt;h1&gt;</code> being the highest and <code>&lt;h6&gt;</code> the lowest. Avoiding using <code>&lt;h1&gt;</code> more than once on a page, and avoid skipping heading levels.</p>
<div class="code-example"><pre><code class="html hljs"><span class="hljs-tag">&lt;<span class="hljs-title">h1</span>&gt;</span>Header Level 1<span class="hljs-tag">&lt;/<span class="hljs-title">h1</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">h2</span>&gt;</span>Header Level 2<span class="hljs-tag">&lt;/<span class="hljs-title">h2</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">h3</span>&gt;</span>Header Level 3<span class="hljs-tag">&lt;/<span class="hljs-title">h3</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">h4</span>&gt;</span>Header Level 4<span class="hljs-tag">&lt;/<span class="hljs-title">h4</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">h5</span>&gt;</span>Header Level 5<span class="hljs-tag">&lt;/<span class="hljs-title">h5</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">h6</span>&gt;</span>Header Level 6<span class="hljs-tag">&lt;/<span class="hljs-title">h6</span>&gt;</span></code></pre></div><div class="callout">
<h1>Header Level 1</h1>
<h2>Header Level 2</h2>
<h3>Header Level 3</h3>
<h4>Header Level 4</h4>
<h5>Header Level 5</h5>
<h6>Header Level 6</h6>
</div>

</section>
<section>
<h3 id="paragraphs">Paragraphs <sup><a href="#paragraphs" class="silver"><i class="fas fa-link"></i></a></sup></h3>
<p>Paragraphs inherit the font size of their containing element, which defaults to <code>1rem</code>/<code>16px</code> inherited from the body element. Paragraphs are styled with <code>line-height: 1.6</code> and <code>margin-bottom: 1rem</code> for a vertical rhythm that&#39;s easy to read.</p>
<div class="code-example"><pre><code class="html hljs"><span class="hljs-tag">&lt;<span class="hljs-title">p</span>&gt;</span>This is a paragraph...<span class="hljs-tag">&lt;/<span class="hljs-title">p</span>&gt;</span></code></pre></div><p>Wide lines of text are difficult to read and make it harder for people to focus. While there&#39;s no perfect line length, a good goal fewer than 120 characters per line (including spaces). It&#39;s good practice to use responsive design techniques to create layouts with optimal line lengths.</p>
</section>
<section>
<h3 id="text-alignment">Text alignment <sup><a href="#text-alignment" class="silver"><i class="fas fa-link"></i></a></sup></h3>
<p>Change the text alignment of an element by adding <code>.text-left</code>, <code>.text-right</code>, <code>.text-center</code> or <code>.text-justify</code>.</p>
<p>Adding a breakpoint to the front of a text alignment class will cause it to only be applied on that size screen or larger. For example, <code>.medium-text-center</code> will keep text left-aligned on the smallest screens, but switch to center-aligned on medium screens and larger.</p>
<div class="code-example"><pre><code class="html hljs"><span class="hljs-tag">&lt;<span class="hljs-title">p</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"text-left"</span>&gt;</span>This text is left-aligned. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.<span class="hljs-tag">&lt;/<span class="hljs-title">p</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">p</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"text-right"</span>&gt;</span>This text is right-aligned. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.<span class="hljs-tag">&lt;/<span class="hljs-title">p</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">p</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"text-center"</span>&gt;</span>This text is centered. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.<span class="hljs-tag">&lt;/<span class="hljs-title">p</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">p</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"text-justify"</span>&gt;</span>This text is justified. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.<span class="hljs-tag">&lt;/<span class="hljs-title">p</span>&gt;</span></code></pre></div><div class="callout">
  <p class="text-left">This text is left-aligned. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
  <p class="text-right">This text is right-aligned. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
  <p class="text-center">This text is centered. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
  <p class="text-justify">This text is justified. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</section>
<section>
<h3 id="links">Links <sup><a href="#links" class="silver"><i class="fas fa-link"></i></a></sup></h3>
<p>Inline text links are styled as orange text, as orange implies clickability in NYC Planning products. For more information on indicating clickability in the UI, go to the <a href="#color" data-smooth-scroll>Color</a> section.</p>
<div class="code-example"><pre><code class="html hljs"><span class="hljs-tag">&lt;<span class="hljs-title">a</span> <span class="hljs-attribute">href</span>=<span class="hljs-value">"url"</span>&gt;</span>link text<span class="hljs-tag">&lt;/<span class="hljs-title">a</span>&gt;</span></code></pre></div><div class="callout">
  <a href="http://nyc.gov/planning">link text</a>
</div>

<h4 id="never-tell-users-to-click-here">Never tell users to click here!</h4>
<p>There are two reasons why links should never say <a>click here</a>:</p>
<ol>
<li><p>&quot;Click&quot; puts too much focus on mouse mechanics. People know what links are and how to use a mouse. Telling them to click is unnecessary, diminishes their experience, and can be even demeaning (they may be using a touch device or assistive technology).</p>
</li>
<li><p>&quot;Here&quot; conceals the content that they are clicking on. You shouldn&#39;t have to read a paragraph to understand a link&#39;s context. When links communicate more than &quot;here,&quot; you can easily scan content to find the link you&#39;re looking for.</p>
</li>
</ol>
<div class="grid-x grid-margin-x medium-up-2">
  <div class="cell">
    <p class="tiny-margin-bottom"><b><i class="fas fa-ban fa-fw fuchsia"></i> Bad:</b></p>
    <div class="callout">
      <p>To learn more about ZoLa, <a>click here</a>.</p>
    </div>
  </div>
  <div class="cell">
    <p class="tiny-margin-bottom"><b><i class="fas fa-check fa-fw green-dark"></i> Good:</b></p>
    <div class="callout">
      <p>Learn more about <a>ZoLa</a>.</p>
    </div>
  </div>
</div>

<p>Here are some tips for writing proper links:</p>
<ul>
<li>Links should provide information when read out of context</li>
<li>Do not talk about mechanics (clicking)</li>
<li>A link should be the subject of its sentence (avoid linking verb phrases)</li>
<li>Placing links at the end of sentences can help users to act more quickly</li>
<li>When linking to documents, include the filetype in the link text—e.g. <a>Important File <small>(PDF)</small></a></li>
</ul>
<p><em>Note: Proper link text also has the benefit of being more SEO-friendly.</em></p>
<h4 id="the-target-attribute">The target attribute</h4>
<p>The target attribute can be used to open a linked document in a new window. This should be used sparingly. Avoid opening new windows for internal links.</p>
<div class="code-example"><pre><code class="html hljs"><span class="hljs-tag">&lt;<span class="hljs-title">a</span> <span class="hljs-attribute">href</span>=<span class="hljs-value">"url"</span> <span class="hljs-attribute">target</span>=<span class="hljs-value">"_blank"</span>&gt;</span>link text<span class="hljs-tag">&lt;/<span class="hljs-title">a</span>&gt;</span></code></pre></div><div class="callout">
  <a href="http://nyc.gov/planning" target="_blank">link text</a>
</div>

<h4 id="external-links">External links</h4>
<p>When linking to external websites and documents, use an icon that indicates to the user that they will be leaving the current website. For example: “Follow <a href="https://github.com/NYCPlanning/">NYC Planning <i class="fas fa-external-link-alt"></i></a> on GitHub.” For more information on adding icons, go to the <a href="#font-awesome" data-smooth-scroll>Font Awesome</a> section.</p>
</section>
<section>
<h3 id="lists">Lists <sup><a href="#lists" class="silver"><i class="fas fa-link"></i></a></sup></h3>
<h4 id="unordered-lists">Unordered lists</h4>
<p>Use the <code>&lt;ol&gt;</code> tag to list things if the order of the items doesn&#39;t matter.</p>
<div class="code-example"><pre><code class="html hljs"><span class="hljs-tag">&lt;<span class="hljs-title">ul</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-title">li</span>&gt;</span>List item<span class="hljs-tag">&lt;/<span class="hljs-title">li</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-title">li</span>&gt;</span>List item<span class="hljs-tag">&lt;/<span class="hljs-title">li</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-title">li</span>&gt;</span>This list item contains another list
    <span class="hljs-tag">&lt;<span class="hljs-title">ul</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-title">li</span>&gt;</span>Nested list item<span class="hljs-tag">&lt;/<span class="hljs-title">li</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-title">li</span>&gt;</span>Another nested list item<span class="hljs-tag">&lt;/<span class="hljs-title">li</span>&gt;</span>
    <span class="hljs-tag">&lt;/<span class="hljs-title">ul</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-title">li</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-title">li</span>&gt;</span>List item with a much longer description or more content. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. <span class="hljs-tag">&lt;/<span class="hljs-title">li</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-title">ul</span>&gt;</span></code></pre></div><div class="callout">
<ul>
  <li>List item</li>
  <li>List item</li>
  <li>This list item contains another list
    <ul>
      <li>Nested list item</li>
      <li>Another nested list item</li>
    </ul>
  </li>
  <li>List item with a much longer description or more content. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </li>
</ul>
</div>


<h4 id="ordered-lists">Ordered lists</h4>
<p>The <code>&lt;ol&gt;</code> tag defines lists with an explicit order, marked with numbers by default.</p>
<p>The optional <code>type=&quot;[1,A,a,I,i]&quot;</code> attribute defines the type of the list item marker.</p>
<div class="code-example"><pre><code class="html hljs"><span class="hljs-tag">&lt;<span class="hljs-title">ol</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-title">li</span>&gt;</span>Bicycles<span class="hljs-tag">&lt;/<span class="hljs-title">li</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-title">li</span>&gt;</span>Bike racks<span class="hljs-tag">&lt;/<span class="hljs-title">li</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-title">li</span>&gt;</span>Bike lanes
    <span class="hljs-tag">&lt;<span class="hljs-title">ol</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"a"</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-title">li</span>&gt;</span>Sharrows<span class="hljs-tag">&lt;/<span class="hljs-title">li</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-title">li</span>&gt;</span>Striped<span class="hljs-tag">&lt;/<span class="hljs-title">li</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-title">li</span>&gt;</span>Buffered<span class="hljs-tag">&lt;/<span class="hljs-title">li</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-title">li</span>&gt;</span>Protected<span class="hljs-tag">&lt;/<span class="hljs-title">li</span>&gt;</span>
    <span class="hljs-tag">&lt;/<span class="hljs-title">ol</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-title">li</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-title">ol</span>&gt;</span></code></pre></div><div class="callout">
<ol>
  <li>Bicycles</li>
  <li>Bike racks</li>
  <li>Bike lanes
    <ol type="a">
      <li>Sharrows</li>
      <li>Striped</li>
      <li>Buffered</li>
      <li>Protected</li>
    </ol>
  </li>
</ol>
</div>


<h4 id="un-bulleted-lists">Un-bulleted lists</h4>
<p>The <code>&lt;ul&gt;</code> is a bulleted list and <code>&lt;ol&gt;</code> is a numbered list by default, but you can add the class <code>.no-bullet</code> to remove the bullets or numbers. This allows lists to have semantic markup and custom styles so they do not look like lists (useful for lists such as menu items).</p>
<div class="code-example"><pre><code class="html hljs"><span class="hljs-tag">&lt;<span class="hljs-title">ul</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"no-bullet"</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-title">li</span>&gt;</span>List item<span class="hljs-tag">&lt;/<span class="hljs-title">li</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-title">li</span>&gt;</span>List item
    <span class="hljs-tag">&lt;<span class="hljs-title">ul</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-title">li</span>&gt;</span>Nested list item<span class="hljs-tag">&lt;/<span class="hljs-title">li</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-title">li</span>&gt;</span>Nested list item<span class="hljs-tag">&lt;/<span class="hljs-title">li</span>&gt;</span>
    <span class="hljs-tag">&lt;/<span class="hljs-title">ul</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-title">li</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-title">li</span>&gt;</span>List item<span class="hljs-tag">&lt;/<span class="hljs-title">li</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-title">ul</span>&gt;</span></code></pre></div><div class="callout">
<ul class="no-bullet">
  <li>List item</li>
  <li>List item
    <ul>
      <li>Nested list item</li>
      <li>Nested list item</li>
    </ul>
  </li>
  <li>List item</li>
</ul>
</div>


<h4 id="definition-lists">Definition lists</h4>
<p>The <code>&lt;dl&gt;</code> tag is used to display name-value pairs, like metadata or a dictionary definition. Each term (<code>&lt;dt&gt;</code>) is paired with one or more definitions (<code>&lt;dd&gt;</code>).</p>
<div class="code-example"><pre><code class="html hljs"><span class="hljs-tag">&lt;<span class="hljs-title">dl</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-title">dt</span>&gt;</span>Time<span class="hljs-tag">&lt;/<span class="hljs-title">dt</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-title">dd</span>&gt;</span>The indefinite continued progress of existence and events in the past, present, and future regarded as a whole.<span class="hljs-tag">&lt;/<span class="hljs-title">dd</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-title">dt</span>&gt;</span>Space<span class="hljs-tag">&lt;/<span class="hljs-title">dt</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-title">dd</span>&gt;</span>A continuous area or expanse that is free, available, or unoccupied.<span class="hljs-tag">&lt;/<span class="hljs-title">dd</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-title">dd</span>&gt;</span>The dimensions of height, depth, and width within which all things exist and move.<span class="hljs-tag">&lt;/<span class="hljs-title">dd</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-title">dl</span>&gt;</span></code></pre></div><div class="callout">
<dl>
  <dt>Time</dt>
  <dd>The indefinite continued progress of existence and events in the past, present, and future regarded as a whole.</dd>
  <dt>Space</dt>
  <dd>A continuous area or expanse that is free, available, or unoccupied.</dd>
  <dd>The dimensions of height, depth, and width within which all things exist and move.</dd>
</dl>
</div>

</section>
<section>
<h3 id="blockquotes">Blockquotes <sup><a href="#blockquotes" class="silver"><i class="fas fa-link"></i></a></sup></h3>
<div class="code-example"><pre><code class="html hljs"><span class="hljs-tag">&lt;<span class="hljs-title">blockquote</span>&gt;</span>
  Cities have the capability of providing something for everybody, only because, and only when, they are created by everybody.
  <span class="hljs-tag">&lt;<span class="hljs-title">cite</span>&gt;</span>Jane Jacobs<span class="hljs-tag">&lt;/<span class="hljs-title">cite</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-title">blockquote</span>&gt;</span></code></pre></div><div class="callout">
<blockquote>
  Cities have the capability of providing something for everybody, only because, and only when, they are created by everybody.
  <cite>Jane Jacobs</cite>
</blockquote>
</div>
</section>
<section>
<h3 id="abbreviations">Abbreviations <sup><a href="#abbreviations" class="silver"><i class="fas fa-link"></i></a></sup></h3>
<p>Use the <code>&lt;abbr&gt;</code> tag to annotate a shortened term. Always include a <code>title</code> attribute which clarifies the full term.</p>
<div class="code-example"><pre><code class="html hljs"><span class="hljs-tag">&lt;<span class="hljs-title">abbr</span> <span class="hljs-attribute">title</span>=<span class="hljs-value">"Department of Information Technology &amp; Telecommunications"</span>&gt;</span>DoITT<span class="hljs-tag">&lt;/<span class="hljs-title">abbr</span>&gt;</span> provides infrastructure...</code></pre></div><div class="callout">
  <abbr title="Department of Information Technology & Telecommunications">DoITT</abbr> provides infrastructure...
</div>

<p><em>Note: Abbreviations should be used mindfully. See the <a href="#acronyms-and-abbreviations" data-smooth-scroll>acronyms and abbreviations</a> section for more information.</em></p>
</section>
<section>
<h3 id="code">Code <sup><a href="#code" class="silver"><i class="fas fa-link"></i></a></sup></h3>
<p>Format references to code with the <code>&lt;code&gt;</code> tag.</p>
<div class="code-example"><pre><code class="html hljs">Remember to escape angle brackets: <span class="hljs-tag">&lt;<span class="hljs-title">code</span>&gt;</span>&amp;lt;div&amp;gt;<span class="hljs-tag">&lt;/<span class="hljs-title">code</span>&gt;</span></code></pre></div><div class="callout">
  Remember to escape angle brackets: <code>&lt;div&gt;</code>
</div>
</section>
<section>
<h3 id="keystrokes">Keystrokes <sup><a href="#keystrokes" class="silver"><i class="fas fa-link"></i></a></sup></h3>
<p>Use the <code>&lt;kbd&gt;</code> element to annotate a key stroke or combination.</p>
<div class="code-example"><pre><code class="html hljs">Press <span class="hljs-tag">&lt;<span class="hljs-title">kbd</span>&gt;</span>-<span class="hljs-tag">&lt;/<span class="hljs-title">kbd</span>&gt;</span> / <span class="hljs-tag">&lt;<span class="hljs-title">kbd</span>&gt;</span>+<span class="hljs-tag">&lt;/<span class="hljs-title">kbd</span>&gt;</span> to zoom the map.</code></pre></div><div class="callout">
  Press <kbd>-</kbd> / <kbd>+</kbd> to zoom the map.
</div>
</section>
<section>
<h3 id="dividers">Dividers <sup><a href="#dividers" class="silver"><i class="fas fa-link"></i></a></sup></h3>
<p>Use the <code>&lt;hr&gt;</code> tag to define a thematic change in the content (a shift of topic). This creates a 1-pixel tall, gray horizontal rule that spans 100% of the width of its container.</p>
<div class="code-example"><pre><code class="html hljs"><span class="hljs-tag">&lt;<span class="hljs-title">hr</span> /&gt;</span></code></pre></div><div class="callout">
  <p>This is a paragraph about apples. This is a paragraph about apples. This is a paragraph about apples. This is a paragraph about apples. This is a paragraph about apples.</p>
  <hr>
  <p>This is a paragraph about oranges. This is a paragraph about oranges. This is a paragraph about oranges. This is a paragraph about oranges. This is a paragraph about oranges.</p>
</div>

</section>


<hr class="xlarge-margin-top xlarge-margin-bottom">
<h2 id="forms" class="large-margin-bottom">Forms <sup><a href="#forms" class="silver"><i class="fas fa-link"></i></a></sup></h2>
<section>
<h3 id="text-inputs">Text inputs <sup><a href="#text-inputs" class="silver"><i class="fas fa-link"></i></a></sup></h3>
<p>The following input types create a text input: <code>text</code>, <code>date</code>, <code>datetime-local</code>, <code>email</code>, <code>month</code>, <code>number</code>, <code>password</code>, <code>search</code>, <code>tel</code>, <code>time</code>, <code>url</code>, and <code>week</code>.</p>
<div class="code-example"><pre><code class="html hljs"><span class="hljs-tag">&lt;<span class="hljs-title">label</span>&gt;</span>Text <span class="hljs-tag">&lt;<span class="hljs-title">input</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"text"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-title">label</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">label</span>&gt;</span>Number <span class="hljs-tag">&lt;<span class="hljs-title">input</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"number"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-title">label</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">label</span>&gt;</span>Date <span class="hljs-tag">&lt;<span class="hljs-title">input</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"date"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-title">label</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">label</span>&gt;</span>Password <span class="hljs-tag">&lt;<span class="hljs-title">input</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"password"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-title">label</span>&gt;</span></code></pre></div><div class="callout">
<label>Text <input type="text" value="I've entered some text!"></label>
<label>Number <input type="number" value="42"></label>
<label>Date <input type="date"></label>
<label class="no-margin">Password <input type="password" value="1234567890" class="no-margin"></label>
</div>

<p>In some desktop browsers, certain types—<code>number</code>, <code>date</code>, <code>search</code>&hellip;—have controls in them which allow the user to increment/decrement the text inside the field, select it from a dropdown, or clear it. When adding custom controls, be sure they don&#39;t conflict with these browser-specific controls. Adding the <code>.no-controls</code> class will remove most of them.</p>
</section>
<section>
<h3 id="text-areas">Text areas <sup><a href="#text-areas" class="silver"><i class="fas fa-link"></i></a></sup></h3>
<p>The <code>&lt;textarea&gt;</code> element creates a multi-line text area. The <code>row</code> attribute determines its height, which can be overridden with custom CSS. The <code>cols</code> attribute is not necessary, as the width is always 100%.</p>
<div class="code-example"><pre><code class="html hljs"><span class="hljs-tag">&lt;<span class="hljs-title">label</span>&gt;</span>Text Area
  <span class="hljs-tag">&lt;<span class="hljs-title">textarea</span> <span class="hljs-attribute">rows</span>=<span class="hljs-value">"4"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-title">textarea</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-title">label</span>&gt;</span></code></pre></div><div class="callout">
<label>Text Area<textarea rows="4" class="no-margin"></textarea></label>
</div>
</section>
<section>
<h3 id="labels-and-placeholders">Labels & placeholders <sup><a href="#labels-and-placeholders" class="silver"><i class="fas fa-link"></i></a></sup></h3>
<p>All form inputs must have an associated label. To associate a <code>&lt;label&gt;</code> with an <code>&lt;input&gt;</code> element, give the label a <code>for</code> attribute with the same value as the input&#39;s <code>id</code> attribute.</p>
<div class="code-example"><pre><code class="html hljs"><span class="hljs-tag">&lt;<span class="hljs-title">label</span> <span class="hljs-attribute">for</span>=<span class="hljs-value">"my-label-id"</span>&gt;</span>Input Label<span class="hljs-tag">&lt;/<span class="hljs-title">label</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">input</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"text"</span> <span class="hljs-attribute">id</span>=<span class="hljs-value">"my-label-id"</span>&gt;</span></code></pre></div><div class="callout">
<label for="my-label-id">Input Label</label>
<input type="text" id="my-label-id">
</div>


<p>Alternatively, you can nest the input directly inside the label (without matching attributes) to associate them implicitly.</p>
<div class="code-example"><pre><code class="html hljs"><span class="hljs-tag">&lt;<span class="hljs-title">label</span>&gt;</span>Input Label
  <span class="hljs-tag">&lt;<span class="hljs-title">input</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"text"</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-title">label</span>&gt;</span></code></pre></div><div class="callout">
<label>Input Label
  <input type="text" class="no-margin">
</label>
</div>

</section>
<section>
<h3 id="select-menus">Select menus <sup><a href="#select-menus" class="silver"><i class="fas fa-link"></i></a></sup></h3>
<p>Select menus combine choices into one condensed menu. However, when the user needs to see all available choices, radio buttons are often more user-friendly. For long lists, consider using a typeahead autocomplete component.</p>
<div class="code-example"><pre><code class="html hljs"><span class="hljs-tag">&lt;<span class="hljs-title">label</span>&gt;</span>Choose one
  <span class="hljs-tag">&lt;<span class="hljs-title">select</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-title">option</span> <span class="hljs-attribute">value</span>=<span class="hljs-value">"one-two-family"</span>&gt;</span>One &amp; Two Family Buildings<span class="hljs-tag">&lt;/<span class="hljs-title">option</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-title">option</span> <span class="hljs-attribute">value</span>=<span class="hljs-value">"multi-family-walk-up"</span>&gt;</span>Multi-Family Walk-Up Buildings<span class="hljs-tag">&lt;/<span class="hljs-title">option</span>&gt;</span>
    // more options ...
  <span class="hljs-tag">&lt;/<span class="hljs-title">select</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-title">label</span>&gt;</span></code></pre></div><div class="callout">
<label>Choose one
  <select class="no-margin-bottom">
    <option value="one-two-family">One & Two Family Buildings</option>
    <option value="multi-family-walk-up">Multi-Family Walk-Up Buildings</option>
    <option value="multi-family-elevator">Multi-Family Elevator Buildings</option>
    <option value="mixed-residential-commercial">Mixed Residential & Commercial Buildings</option>
    <option value="commercial-office">Commercial & Office Buildings</option>
    <option value="industrial-manufacturing">Industrial & Manufacturing</option>
    <option value="transportation-utility">Transportation & Utility</option>
    <option value="public-facilities-institutions">Public Facilities & Institutions</option>
    <option value="open-space-outdoor-recreation">Open Space & Outdoor Recreation</option>
    <option value="parking-facilities">Parking Facilities</option>
    <option value="vacant-land">Vacant Land</option>
    <option value="other">Other</option>
  </select>
</label>
</div>

<h4 id="multi-select">Multi-select</h4>
<p>The <code>multiple</code> attribute allows more than one option to be selected. Use the <code>size</code> attribute to set how many options are visible at once (defaults to 4). However, since UX can vary by OS/browser and multiple selection may not be intuitive, checkboxes are often more user-friendly.</p>
<div class="code-example"><pre><code class="html hljs"><span class="hljs-tag">&lt;<span class="hljs-title">label</span>&gt;</span>Choose many
  <span class="hljs-tag">&lt;<span class="hljs-title">select</span> <span class="hljs-attribute">multiple</span> <span class="hljs-attribute">size</span>=<span class="hljs-value">"6"</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-title">option</span> <span class="hljs-attribute">value</span>=<span class="hljs-value">"one-two-family"</span>&gt;</span>One &amp; Two Family Buildings<span class="hljs-tag">&lt;/<span class="hljs-title">option</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-title">option</span> <span class="hljs-attribute">value</span>=<span class="hljs-value">"multi-family-walk-up"</span>&gt;</span>Multi-Family Walk-Up Buildings<span class="hljs-tag">&lt;/<span class="hljs-title">option</span>&gt;</span>
    // more options ...
  <span class="hljs-tag">&lt;/<span class="hljs-title">select</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-title">label</span>&gt;</span></code></pre></div><div class="callout">
<label>Choose many
  <select multiple size="6" class="no-margin-bottom">
    <option value="one-two-family">One & Two Family Buildings</option>
    <option value="multi-family-walk-up">Multi-Family Walk-Up Buildings</option>
    <option value="multi-family-elevator">Multi-Family Elevator Buildings</option>
    <option value="mixed-residential-commercial">Mixed Residential & Commercial Buildings</option>
    <option value="commercial-office">Commercial & Office Buildings</option>
    <option value="industrial-manufacturing">Industrial & Manufacturing</option>
    <option value="transportation-utility">Transportation & Utility</option>
    <option value="public-facilities-institutions">Public Facilities & Institutions</option>
    <option value="open-space-outdoor-recreation">Open Space & Outdoor Recreation</option>
    <option value="parking-facilities">Parking Facilities</option>
    <option value="vacant-land">Vacant Land</option>
    <option value="other">Other</option>
  </select>
</label>
</div>
</section>
<section>
<h3 id="checkboxes-and-radio-buttons">Checkboxes & radio buttons <sup><a href="#checkboxes-and-radio-buttons" class="silver"><i class="fas fa-link"></i></a></sup></h3>
<p>When selecting from a short list of options, checkboxes and radio buttons are often a more user-friendly alternative to select menus. Use radio buttons when the user must select only one option. Use checkboxes when the user may select multiple options. For long lists, consider using a typeahead autocomplete component.</p>
<h4 id="radio-buttons">Radio buttons</h4>
<div class="code-example"><pre><code class="html hljs"><span class="hljs-tag">&lt;<span class="hljs-title">fieldset</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"fieldset"</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-title">legend</span>&gt;</span>Choose one zoning type:<span class="hljs-tag">&lt;/<span class="hljs-title">legend</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-title">input</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"radio"</span> <span class="hljs-attribute">name</span>=<span class="hljs-value">"zoning"</span> <span class="hljs-attribute">id</span>=<span class="hljs-value">"com_example"</span> <span class="hljs-attribute">value</span>=<span class="hljs-value">"com"</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-title">label</span> <span class="hljs-attribute">for</span>=<span class="hljs-value">"com_example"</span>&gt;</span>Commercial<span class="hljs-tag">&lt;/<span class="hljs-title">label</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-title">input</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"radio"</span> <span class="hljs-attribute">name</span>=<span class="hljs-value">"zoning"</span> <span class="hljs-attribute">id</span>=<span class="hljs-value">"man_example"</span> <span class="hljs-attribute">value</span>=<span class="hljs-value">"man"</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-title">label</span> <span class="hljs-attribute">for</span>=<span class="hljs-value">"man_example"</span>&gt;</span>Manufacturing<span class="hljs-tag">&lt;/<span class="hljs-title">label</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-title">input</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"radio"</span> <span class="hljs-attribute">name</span>=<span class="hljs-value">"zoning"</span> <span class="hljs-attribute">id</span>=<span class="hljs-value">"res_example"</span> <span class="hljs-attribute">value</span>=<span class="hljs-value">"res"</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-title">label</span> <span class="hljs-attribute">for</span>=<span class="hljs-value">"res_example"</span>&gt;</span>Residential<span class="hljs-tag">&lt;/<span class="hljs-title">label</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-title">input</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"radio"</span> <span class="hljs-attribute">name</span>=<span class="hljs-value">"zoning"</span> <span class="hljs-attribute">id</span>=<span class="hljs-value">"par_example"</span> <span class="hljs-attribute">value</span>=<span class="hljs-value">"par"</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-title">label</span> <span class="hljs-attribute">for</span>=<span class="hljs-value">"par_example"</span>&gt;</span>Parks<span class="hljs-tag">&lt;/<span class="hljs-title">label</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-title">fieldset</span>&gt;</span></code></pre></div><div class="callout">
<fieldset class="fieldset">
  <legend>Choose one zoning type:</legend>
  <input type="radio" name="zoning" id="r_com" value="com"><label for="r_com">Commercial</label>
  <input type="radio" name="zoning" id="r_man" value="man"><label for="r_man">Manufacturing</label>
  <input type="radio" name="zoning" id="r_res" value="res"><label for="r_res">Residential</label>
  <input type="radio" name="zoning" id="r_par" value="par"><label for="r_par">Parks</label>
</fieldset>
</div>

<h4 id="checkboxes">Checkboxes</h4>
<div class="code-example"><pre><code class="html hljs"><span class="hljs-tag">&lt;<span class="hljs-title">fieldset</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"fieldset"</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-title">legend</span>&gt;</span>Choose multiple:<span class="hljs-tag">&lt;/<span class="hljs-title">legend</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-title">input</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"checkbox"</span> <span class="hljs-attribute">id</span>=<span class="hljs-value">"com_example"</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-title">label</span> <span class="hljs-attribute">for</span>=<span class="hljs-value">"com_example"</span>&gt;</span>Commercial<span class="hljs-tag">&lt;/<span class="hljs-title">label</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-title">input</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"checkbox"</span> <span class="hljs-attribute">id</span>=<span class="hljs-value">"man_example"</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-title">label</span> <span class="hljs-attribute">for</span>=<span class="hljs-value">"man_example"</span>&gt;</span>Manufacturing<span class="hljs-tag">&lt;/<span class="hljs-title">label</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-title">input</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"checkbox"</span> <span class="hljs-attribute">id</span>=<span class="hljs-value">"res_example"</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-title">label</span> <span class="hljs-attribute">for</span>=<span class="hljs-value">"res_example"</span>&gt;</span>Residential<span class="hljs-tag">&lt;/<span class="hljs-title">label</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-title">input</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"checkbox"</span> <span class="hljs-attribute">id</span>=<span class="hljs-value">"par_example"</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-title">label</span> <span class="hljs-attribute">for</span>=<span class="hljs-value">"par_example"</span>&gt;</span>Parks<span class="hljs-tag">&lt;/<span class="hljs-title">label</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-title">fieldset</span>&gt;</span></code></pre></div><div class="callout">
<fieldset class="fieldset">
  <legend>Choose multiple:</legend>
  <input type="checkbox" id="c_com"><label for="c_com">Commercial</label>
  <input type="checkbox" id="c_man"><label for="c_man">Manufacturing</label>
  <input type="checkbox" id="c_res"><label for="c_res">Residential</label>
  <input type="checkbox" id="c_par"><label for="c_par">Parks</label>
</fieldset>
</div>
</section>
<section>
<h3 id="fieldsets">Fieldsets <sup><a href="#fieldsets" class="silver"><i class="fas fa-link"></i></a></sup></h3>
<p>A group of related controls should be wrapped in a <code>&lt;fieldset&gt;</code> element, and given a common label using the <code>&lt;legend&gt;</code> element. Each individual input should have its own <code>&lt;label&gt;</code>. Fieldsets have no default style. The <code>.fieldset</code> class can be added to the fieldset to style it as a containing box, with the legend in its top-left corner.</p>
<div class="code-example"><pre><code class="html hljs"><span class="hljs-tag">&lt;<span class="hljs-title">fieldset</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"fieldset"</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-title">legend</span>&gt;</span>Zoning types<span class="hljs-tag">&lt;/<span class="hljs-title">legend</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-title">input</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"checkbox"</span> <span class="hljs-attribute">id</span>=<span class="hljs-value">"com_example"</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-title">label</span> <span class="hljs-attribute">for</span>=<span class="hljs-value">"com_example"</span>&gt;</span>Commercial<span class="hljs-tag">&lt;/<span class="hljs-title">label</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-title">input</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"checkbox"</span> <span class="hljs-attribute">id</span>=<span class="hljs-value">"man_example"</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-title">label</span> <span class="hljs-attribute">for</span>=<span class="hljs-value">"man_example"</span>&gt;</span>Manufacturing<span class="hljs-tag">&lt;/<span class="hljs-title">label</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-title">input</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"checkbox"</span> <span class="hljs-attribute">id</span>=<span class="hljs-value">"res_example"</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-title">label</span> <span class="hljs-attribute">for</span>=<span class="hljs-value">"res_example"</span>&gt;</span>Residential<span class="hljs-tag">&lt;/<span class="hljs-title">label</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-title">input</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"checkbox"</span> <span class="hljs-attribute">id</span>=<span class="hljs-value">"par_example"</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-title">label</span> <span class="hljs-attribute">for</span>=<span class="hljs-value">"par_example"</span>&gt;</span>Parks<span class="hljs-tag">&lt;/<span class="hljs-title">label</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-title">fieldset</span>&gt;</span></code></pre></div><div class="callout">
<fieldset class="fieldset">
  <legend>Zoning types</legend>
  <input type="checkbox" id="f_com"><label for="f_com">Commercial</label>
  <input type="checkbox" id="f_man"><label for="f_man">Manufacturing</label>
  <input type="checkbox" id="f_res"><label for="f_res">Residential</label>
  <input type="checkbox" id="f_par"><label for="f_par">Parks</label>
</fieldset>
</div>

<h4 id="accessible-fieldsets">Accessible fieldsets</h4>
<p>To increase accessibility, related controls (especially checkboxes and radio buttons) should always be wrapped in a fieldset. If this is not ideal for the UI/layout, the <code>.show-for-sr</code> class can be added to the legend so it&#39;s hidden on screen but still available for screen readers.</p>
<div class="code-example"><pre><code class="html hljs"><span class="hljs-tag">&lt;<span class="hljs-title">fieldset</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-title">legend</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"show-for-sr"</span>&gt;</span>Zoning types:<span class="hljs-tag">&lt;/<span class="hljs-title">legend</span>&gt;</span>
  ...
<span class="hljs-tag">&lt;/<span class="hljs-title">fieldset</span>&gt;</span></code></pre></div><div class="callout">
<fieldset>
  <legend class="show-for-sr">Zoning types:</legend>
  <input type="checkbox" id="af_com"><label for="af_com">Commercial</label>
  <input type="checkbox" id="af_man"><label for="af_man">Manufacturing</label>
  <input type="checkbox" id="af_res"><label for="af_res">Residential</label>
  <input type="checkbox" id="af_par"><label for="af_par">Parks</label>
</fieldset>
</div>

</section>
<section>
<h3 id="file-upload">File upload <sup><a href="#file-upload" class="silver"><i class="fas fa-link"></i></a></sup></h3>
<p>Use <code>&lt;input type=&quot;file&quot;&gt;</code> to create a file upload button. For security reasons, most browsers don&#39;t let you style file inputs. To work around that, we can style a form label as a button, and point it to the <code>&lt;input&gt;</code>. To properly mask the input, the <code>.show-for-sr</code> class is added.</p>
<div class="code-example"><pre><code class="html hljs"><span class="hljs-tag">&lt;<span class="hljs-title">label</span> <span class="hljs-attribute">for</span>=<span class="hljs-value">"exampleFileUpload"</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"button"</span>&gt;</span>Upload File<span class="hljs-tag">&lt;/<span class="hljs-title">label</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">input</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"file"</span> <span class="hljs-attribute">id</span>=<span class="hljs-value">"exampleFileUpload"</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"show-for-sr"</span>&gt;</span></code></pre></div><div class="callout">
<label for="exampleFileUpload" class="button no-margin">Upload File</label>
<input type="file" id="exampleFileUpload" class="show-for-sr">
</div>

<h4 id="upload--download-icons">Upload &amp; download icons</h4>
<p>Add icons to file upload inputs and download buttons give more scannable context to these action. Learn more about using icons in the <a href="#icons" data-smooth-scroll>icons</a> section.</p>
<div class="callout">
<label for="exampleFileUpload_2" class="button secondary no-margin"><i class="fas fa-upload"></i> Upload</label>
<input type="file" id="exampleFileUpload_2" class="show-for-sr">
<button class="button secondary no-margin"><i class="fas fa-download"></i> Download</button>
</div>

</section>
<section>
<h3 id="placeholder-text">Placeholder text <sup><a href="#placeholder-text" class="silver"><i class="fas fa-link"></i></a></sup></h3>
<p>The <code>placeholder</code> attribute specifies text that appears within an input when it&#39;s empty.</p>
<div class="code-example"><pre><code class="html hljs"><span class="hljs-tag">&lt;<span class="hljs-title">input</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"text"</span> <span class="hljs-attribute">placeholder</span>=<span class="hljs-value">"This is placeholder text"</span>&gt;</span></code></pre></div><div class="callout">
  <input type="text" placeholder="This is placeholder text">
</div>

<h4 id="-placeholders-are-not-accessible"><i class="fas fa-exclamation-triangle text-gold"></i> Placeholders are not accessible!</h4>
<p><i class="fas fa-ban fuchsia"></i> Do not use placeholder text to replace the functionality of a <code>&lt;label&gt;</code> element. Placeholder text can’t be automatically translated, doesn&#39;t work with assistive technology, and causes UX confusion—users may assume that the field is already filled out and upon entering their first character, they no longer see the prompt. Explicit instructions and requirements for inputs should appear in <a href="#labels" data-smooth-scroll>labels</a> or <a href="#help-text" data-smooth-scroll>help text</a>.</p>
<p><strong>Search is the exception.</strong> It&#39;s a standard UI convention for search inputs to have a magnifying glass icon, which clearly communicates the function of the input. In this case, it is acceptable to use placeholder text. However, you must also include a label for accessibility. View to the <a href="#search-form" data-smooth-scroll>Search Form</a> component for information on implementing this.</p>
</section>
<section>
<h3 id="help-text">Help text <sup><a href="#help-text" class="silver"><i class="fas fa-link"></i></a></sup></h3>
<p>Place <code>.help-text</code> below a form element to clarify any instructions or requirements. Give the help text a unique <code>ID</code>, and add the attribute <code>aria-describedby</code> to the associated form element. Screen readers can read the help text when the user focusses an associated input.</p>
<div class="code-example"><pre><code class="html hljs"><span class="hljs-tag">&lt;<span class="hljs-title">label</span>&gt;</span>Password
  <span class="hljs-tag">&lt;<span class="hljs-title">input</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"password"</span> <span class="hljs-attribute">aria-describedby</span>=<span class="hljs-value">"passwordHelpText"</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-title">label</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">p</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"help-text"</span> <span class="hljs-attribute">id</span>=<span class="hljs-value">"passwordHelpText"</span>&gt;</span>Your password must have at least 10 characters, a number, and an Emoji.<span class="hljs-tag">&lt;/<span class="hljs-title">p</span>&gt;</span></code></pre></div><div class="callout">
<label>Password
  <input type="password" aria-describedby="passwordHelpText">
</label>
<p class="help-text" id="passwordHelpText">Your password must have at least 10 characters, a number, and an Emoji.</p>
</div>

</section>


<hr class="xlarge-margin-top xlarge-margin-bottom">
<h2 id="navigation" class="large-margin-bottom">Navigation <sup><a href="#navigation" class="silver"><i class="fas fa-link"></i></a></sup></h2>
<section>
<h3 id="buttons">Buttons <sup><a href="#buttons" class="silver"><i class="fas fa-link"></i></a></sup></h3>
<p>Buttons can be created with minimal markup by adding the <code>.button</code> class. Primary buttons are <code>a11y-orange</code> with white text, and should be used sparingly for primary user actions that need to be very noticeable. For secondary tasks, add the <code>.secondary</code> class to make a light gray button with orange text.</p>
<div class="code-example"><pre><code class="html hljs"><span class="hljs-tag">&lt;<span class="hljs-title">a</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"button"</span> <span class="hljs-attribute">href</span>=<span class="hljs-value">"#"</span>&gt;</span>Primary action<span class="hljs-tag">&lt;/<span class="hljs-title">a</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">a</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"button secondary"</span> <span class="hljs-attribute">href</span>=<span class="hljs-value">"#"</span>&gt;</span>Secondary action<span class="hljs-tag">&lt;/<span class="hljs-title">a</span>&gt;</span></code></pre></div><div class="callout">
  <a class="button no-margin" href="#">Primary action</a>
  <a class="button secondary no-margin" href="#">Secondary action</a>
</div>

<p>Size classes can be added to your button to change its size.</p>
<div class="code-example"><pre><code class="html hljs"><span class="hljs-tag">&lt;<span class="hljs-title">a</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"button tiny"</span> <span class="hljs-attribute">href</span>=<span class="hljs-value">"#"</span>&gt;</span>Tiny<span class="hljs-tag">&lt;/<span class="hljs-title">a</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">a</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"button small"</span> <span class="hljs-attribute">href</span>=<span class="hljs-value">"#"</span>&gt;</span>Small<span class="hljs-tag">&lt;/<span class="hljs-title">a</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">a</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"button"</span> <span class="hljs-attribute">href</span>=<span class="hljs-value">"#"</span>&gt;</span>Default<span class="hljs-tag">&lt;/<span class="hljs-title">a</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">a</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"button large"</span> <span class="hljs-attribute">href</span>=<span class="hljs-value">"#"</span>&gt;</span>Large<span class="hljs-tag">&lt;/<span class="hljs-title">a</span>&gt;</span></code></pre></div><div class="callout">
  <a class="button tiny" href="#">Tiny</a>
  <a class="button small" href="#">Small</a>
  <a class="button" href="#">Default</a>
  <a class="button large" href="#">Large</a>
</div>

<p>The <code>.expanded</code> class makes the butto tak up the full width of its container.</p>
<div class="code-example"><pre><code class="html hljs"><span class="hljs-tag">&lt;<span class="hljs-title">a</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"button expanded"</span> <span class="hljs-attribute">href</span>=<span class="hljs-value">"#"</span>&gt;</span>Such Expand<span class="hljs-tag">&lt;/<span class="hljs-title">a</span>&gt;</span></code></pre></div><div class="callout">
  <a class="button expanded" href="#">Such Expand</a>
</div>

<h4 id="-use-the-right-tag"><i class="fas fa-exclamation-triangle text-gold"></i> Use the right tag</h4>
<p>Since buttons can be used for many purposes, it&#39;s important to use the right tag. Use the <code>&lt;a&gt;</code> tag if the button is a link to a document, another page, or an anchor within the page. Use the <code>&lt;button&gt;</code> tag if the button performs an action that changes something on the current page.</p>
<h4 id="label-buttons-with-clear-actions">Label buttons with clear actions</h4>
<p>Generic or misleading button text can be frustrating for users. A button’s text should clearly describe its action. Use verbs whenever possible instead of &quot;Yes&quot; or &quot;OK&quot; so buttons don&#39;t rely on the context of titles or prompts.</p>
<div class="grid-x grid-margin-x medium-up-2">
  <div class="cell">
    <p class="tiny-margin-bottom"><b><i class="fas fa-ban fa-fw fuchsia"></i> Bad:</b></p>
    <div class="callout">
      <p>Would you like to delete this?</p>
      <button class="button small no-margin">OK</button> <button class="button small secondary no-margin">No</button>
    </div>
  </div>
  <div class="cell">
    <p class="tiny-margin-bottom"><b><i class="fas fa-check fa-fw green-dark"></i> Good:</b></p>
    <div class="callout">
      <p>Would you like to delete this?</p>
      <button class="button small no-margin">Delete</button> <button class="button small secondary no-margin">Cancel</button>
    </div>
  </div>
</div>

<h4 id="disabled-buttons">Disabled buttons</h4>
<p>The <code>.disabled</code> gives buttons a faded appearance and the <code>not-allowed</code> cursor property. This only adds visual style; it doesn&#39;t disable any actions. For <code>&lt;button&gt;</code> elements, you can add the <code>disabled</code> attribute to both style and actually disable it. Mark links as disabled for assistive technology by adding the <code>aria-disabled</code> attribute.</p>
<div class="code-example"><pre><code class="html hljs"><span class="hljs-tag">&lt;<span class="hljs-title">a</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"button disabled"</span> <span class="hljs-attribute">href</span>=<span class="hljs-value">"#"</span> <span class="hljs-attribute">aria-disabled</span>&gt;</span>Disabled link<span class="hljs-tag">&lt;/<span class="hljs-title">a</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">button</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"button"</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"button"</span> <span class="hljs-attribute">disabled</span>&gt;</span>Disabled button<span class="hljs-tag">&lt;/<span class="hljs-title">button</span>&gt;</span></code></pre></div><div class="callout">
  <a class="button disabled no-margin" href="#" aria-disabled>Disabled link</a>
  <button type="button" class="button no-margin" disabled>Disabled button</button>
</div>

</section>
<section>
<h3 id="button-groups">Button groups <sup><a href="#button-groups" class="silver"><i class="fas fa-link"></i></a></sup></h3>
<p>Wrap buttons in a container with the <code>.button-group</code> class to associate a set of related actions. These buttons will be separated by a 1-pixel border. Size and color classes can be applied to the group as a whole.</p>
<div class="code-example"><pre><code class="html hljs"><span class="hljs-tag">&lt;<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"button-group small secondary"</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-title">a</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"button"</span>&gt;</span>One<span class="hljs-tag">&lt;/<span class="hljs-title">a</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-title">a</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"button"</span>&gt;</span>Two<span class="hljs-tag">&lt;/<span class="hljs-title">a</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-title">a</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"button"</span>&gt;</span>Three<span class="hljs-tag">&lt;/<span class="hljs-title">a</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-title">div</span>&gt;</span></code></pre></div><div class="callout">
  <div class="button-group small secondary">
    <a class="button">One</a>
    <a class="button">Two</a>
    <a class="button">Three</a>
  </div>
</div>

<h4 id="expanded-button-groups">Expanded button groups</h4>
<p>The <code>.expanded</code> class will make the group fill the width of its container (maximum of six buttons).</p>
<div class="code-example"><pre><code class="html hljs"><span class="hljs-tag">&lt;<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"button-group small secondary expanded"</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-title">a</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"button"</span>&gt;</span>One<span class="hljs-tag">&lt;/<span class="hljs-title">a</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-title">a</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"button"</span>&gt;</span>Two<span class="hljs-tag">&lt;/<span class="hljs-title">a</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-title">a</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"button"</span>&gt;</span>Three<span class="hljs-tag">&lt;/<span class="hljs-title">a</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-title">div</span>&gt;</span></code></pre></div><div class="callout">
  <div class="button-group small secondary expanded">
    <a class="button">One</a>
    <a class="button">Two</a>
    <a class="button">Three</a>
  </div>
</div>

<h4 id="stacked-button-groups">Stacked button groups</h4>
<p>Make a button group vertical with the <code>.stacked</code> class. The responsive <code>.stacked-for-small</code> class makes the group vertical on small screens only, and <code>.stacked-for-medium</code> makes the group vertical on medium and small screens. These classes are good for button groups confined to small spaces at certain screen sizes. </p>
<div class="code-example"><pre><code class="html hljs"><span class="hljs-tag">&lt;<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"button-group small secondary stacked"</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-title">a</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"button"</span>&gt;</span>One<span class="hljs-tag">&lt;/<span class="hljs-title">a</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-title">a</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"button"</span>&gt;</span>Two<span class="hljs-tag">&lt;/<span class="hljs-title">a</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-title">a</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"button"</span>&gt;</span>Three<span class="hljs-tag">&lt;/<span class="hljs-title">a</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-title">div</span>&gt;</span></code></pre></div><div class="callout">
  <div class="button-group small secondary stacked">
    <a class="button">One</a>
    <a class="button">Two</a>
    <a class="button">Three</a>
  </div>
</div>

</section>
<section>
<h3 id="menus">Menus <sup><a href="#menus" class="silver"><i class="fas fa-link"></i></a></sup></h3>
<p>Menus are lists of links. Add the <code>.menu</code> class to a <code>&lt;ul&gt;</code> element containing <code>&lt;li&gt;</code> elements containing bold links.</p>
<div class="code-example"><pre><code class="html hljs"><span class="hljs-tag">&lt;<span class="hljs-title">ul</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"menu"</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-title">li</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-title">a</span> <span class="hljs-attribute">href</span>=<span class="hljs-value">"#"</span>&gt;</span>One<span class="hljs-tag">&lt;/<span class="hljs-title">a</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-title">li</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-title">li</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-title">a</span> <span class="hljs-attribute">href</span>=<span class="hljs-value">"#"</span>&gt;</span>Two<span class="hljs-tag">&lt;/<span class="hljs-title">a</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-title">li</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-title">li</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-title">a</span> <span class="hljs-attribute">href</span>=<span class="hljs-value">"#"</span>&gt;</span>Three<span class="hljs-tag">&lt;/<span class="hljs-title">a</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-title">li</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-title">li</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-title">a</span> <span class="hljs-attribute">href</span>=<span class="hljs-value">"#"</span>&gt;</span>Four<span class="hljs-tag">&lt;/<span class="hljs-title">a</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-title">li</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-title">ul</span>&gt;</span></code></pre></div><div class="callout">
  <ul class="menu">
    <li><a href="#">One</a></li>
    <li><a href="#">Two</a></li>
    <li><a href="#">Three</a></li>
    <li><a href="#">Four</a></li>
  </ul>
</div>

<h4 id="active-menu-item">Active menu item</h4>
<p>Add the <code>.is-active</code> class to a menu&#39;s <code>&lt;li&gt;</code> to highlight that item as active.</p>
<div class="callout">
  <ul class="menu">
    <li><a href="#">One</a></li>
    <li class="is-active"><a href="#">Two</a></li>
    <li><a href="#">Three</a></li>
    <li><a href="#">Four</a></li>
  </ul>
</div>

<h4 id="menu-alignment">Menu alignment</h4>
<p>By default, menu items align to the left. They can also be aligned to the right with the <code>.align-right</code> class, aligned to the center with the <code>.align-center</code> class, or take up the full width with the <code>.expanded</code> class.</p>
<div class="code-example"><pre><code class="html hljs"><span class="hljs-tag">&lt;<span class="hljs-title">ul</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"menu"</span>&gt;</span>...<span class="hljs-tag">&lt;/<span class="hljs-title">ul</span>&gt;</span></code></pre></div><div class="callout">
  <ul class="menu">
    <li><a href="#">One</a></li>
    <li><a href="#">Two</a></li>
    <li><a href="#">Three</a></li>
    <li><a href="#">Four</a></li>
  </ul>
</div>

<div class="code-example"><pre><code class="html hljs"><span class="hljs-tag">&lt;<span class="hljs-title">ul</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"menu align-right"</span>&gt;</span>...<span class="hljs-tag">&lt;/<span class="hljs-title">ul</span>&gt;</span></code></pre></div><div class="callout">
  <ul class="menu align-right">
    <li><a href="#">One</a></li>
    <li><a href="#">Two</a></li>
    <li><a href="#">Three</a></li>
    <li><a href="#">Four</a></li>
  </ul>
</div>

<div class="code-example"><pre><code class="html hljs"><span class="hljs-tag">&lt;<span class="hljs-title">ul</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"menu align-center"</span>&gt;</span>...<span class="hljs-tag">&lt;/<span class="hljs-title">ul</span>&gt;</span></code></pre></div><div class="callout">
  <ul class="menu align-center">
    <li><a href="#">One</a></li>
    <li><a href="#">Two</a></li>
    <li><a href="#">Three</a></li>
    <li><a href="#">Four</a></li>
  </ul>
</div>

<div class="code-example"><pre><code class="html hljs"><span class="hljs-tag">&lt;<span class="hljs-title">ul</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"menu expanded"</span>&gt;</span>...<span class="hljs-tag">&lt;/<span class="hljs-title">ul</span>&gt;</span></code></pre></div><div class="callout">
  <ul class="menu expanded">
    <li><a href="#">One</a></li>
    <li><a href="#">Two</a></li>
    <li><a href="#">Three</a></li>
    <li><a href="#">Four</a></li>
  </ul>
</div>

<h4 id="menu-orientation">Menu orientation</h4>
<p>By default, menus are horizontally. Add the <code>.vertical</code> class to switch a menu&#39;s default orientation. The responsive <code>.[size]-[orientation]</code> classes allow you to re-orient a menu at different screen sizes.</p>
<div class="code-example"><pre><code class="html hljs"><span class="hljs-tag">&lt;<span class="hljs-title">ul</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"menu vertical medium-horizontal large-vertical"</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-title">li</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-title">a</span> <span class="hljs-attribute">href</span>=<span class="hljs-value">"#"</span>&gt;</span>One<span class="hljs-tag">&lt;/<span class="hljs-title">a</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-title">li</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-title">li</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-title">a</span> <span class="hljs-attribute">href</span>=<span class="hljs-value">"#"</span>&gt;</span>Two<span class="hljs-tag">&lt;/<span class="hljs-title">a</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-title">li</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-title">li</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-title">a</span> <span class="hljs-attribute">href</span>=<span class="hljs-value">"#"</span>&gt;</span>Three<span class="hljs-tag">&lt;/<span class="hljs-title">a</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-title">li</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-title">li</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-title">a</span> <span class="hljs-attribute">href</span>=<span class="hljs-value">"#"</span>&gt;</span>Four<span class="hljs-tag">&lt;/<span class="hljs-title">a</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-title">li</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-title">ul</span>&gt;</span></code></pre></div><div class="callout">
  <ul class="menu vertical medium-horizontal large-vertical">
    <li><a href="#">One</a></li>
    <li><a href="#">Two</a></li>
    <li><a href="#">Three</a></li>
    <li><a href="#">Four</a></li>
  </ul>
</div>

</section>
<section>
<h3 id="tabs">Tabs <sup><a href="#tabs" class="silver"><i class="fas fa-link"></i></a></sup></h3>
<p>Use tabs to alternate between views within the same context. Keep tab labels short. All tab content should be related and logically divided so users can easily predict what&#39;s in a given tab. If there aren&#39;t clearly distinct groupings, tabs are likely the wrong UI for navigating the content.</p>
<div class="code-example"><pre><code class="html hljs"><span class="hljs-tag">&lt;<span class="hljs-title">ul</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"tabs"</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-title">li</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"tabs-title"</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-title">a</span> <span class="hljs-attribute">href</span>=<span class="hljs-value">"#"</span>&gt;</span>One<span class="hljs-tag">&lt;/<span class="hljs-title">a</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-title">li</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-title">li</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"tabs-title is-active"</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-title">a</span> <span class="hljs-attribute">href</span>=<span class="hljs-value">"#"</span> <span class="hljs-attribute">aria-selected</span>=<span class="hljs-value">"true"</span>&gt;</span>Two<span class="hljs-tag">&lt;/<span class="hljs-title">a</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-title">li</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-title">li</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"tabs-title"</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-title">a</span> <span class="hljs-attribute">href</span>=<span class="hljs-value">"#"</span>&gt;</span>Three<span class="hljs-tag">&lt;/<span class="hljs-title">a</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-title">li</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-title">li</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"tabs-title"</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-title">a</span> <span class="hljs-attribute">href</span>=<span class="hljs-value">"#"</span>&gt;</span>Four<span class="hljs-tag">&lt;/<span class="hljs-title">a</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-title">li</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-title">ul</span>&gt;</span></code></pre></div><div class="callout">
  <ul class="tabs">
    <li class="tabs-title"><a href="#">One</a></li>
    <li class="tabs-title is-active"><a href="#" aria-selected="true">Two</a></li>
    <li class="tabs-title"><a href="#">Three</a></li>
    <li class="tabs-title"><a href="#">Four</a></li>
  </ul>
</div>

<p><i class="fas fa-ban fuchsia"></i> Do not use tabs when users need to compare the info in multiple tabs. Having to switch back and forth puts an added burden on the user and lowers usability.</p>
<p><i class="fas fa-ban fuchsia"></i> Do not use tabs unless they all fit on one row at all screen sizes.</p>
<h4 id="switching-tabs">Switching tabs</h4>
<p>Tabs can be implemented by reloading the page with different content on click or by showing/hiding content with JavaScript. Reloading the page is less desirable, as it can cause the scroll position to jump. JavaScript improves the user&#39;s experience by seamlessly swapping the tabs content.</p>
<p>Foundation&#39;s JavaScript makes switching tabs easy. Put all tabs content in a container with the <code>.tabs-content</code> class. Each piece of content in the container needs the <code>.tabs-panel</code> class and a unique ID. The <code>href</code> of each tab link should match the ID of a tab panel. Alternatively, the ID can be specified with the attribute <code>data-tabs-target</code>.</p>
<div class="code-example"><pre><code class="html hljs"><span class="hljs-tag">&lt;<span class="hljs-title">ul</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"tabs"</span> <span class="hljs-attribute">data-tabs</span> <span class="hljs-attribute">id</span>=<span class="hljs-value">"example-tabs"</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-title">li</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"tabs-title is-active"</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-title">a</span> <span class="hljs-attribute">href</span>=<span class="hljs-value">"#panel1"</span> <span class="hljs-attribute">aria-selected</span>=<span class="hljs-value">"true"</span>&gt;</span>Tab 1<span class="hljs-tag">&lt;/<span class="hljs-title">a</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-title">li</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-title">li</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"tabs-title"</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-title">a</span> <span class="hljs-attribute">data-tabs-target</span>=<span class="hljs-value">"panel2"</span> <span class="hljs-attribute">href</span>=<span class="hljs-value">"#panel2"</span>&gt;</span>Tab 2<span class="hljs-tag">&lt;/<span class="hljs-title">a</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-title">li</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-title">ul</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"tabs-content"</span> <span class="hljs-attribute">data-tabs-content</span>=<span class="hljs-value">"example-tabs"</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"tabs-panel is-active"</span> <span class="hljs-attribute">id</span>=<span class="hljs-value">"panel1"</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-title">p</span>&gt;</span>Vivamus hendrerit arcu sed erat molestie vehicula. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor. Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor. Suspendisse dictum feugiat nisl ut dapibus.<span class="hljs-tag">&lt;/<span class="hljs-title">p</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-title">div</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"tabs-panel"</span> <span class="hljs-attribute">id</span>=<span class="hljs-value">"panel2"</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-title">p</span>&gt;</span>Suspendisse dictum feugiat nisl ut dapibus.  Vivamus hendrerit arcu sed erat molestie vehicula. Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor.  Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor.<span class="hljs-tag">&lt;/<span class="hljs-title">p</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-title">div</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-title">div</span>&gt;</span></code></pre></div><div class="callout">
  <ul class="tabs" data-tabs id="example-tabs">
    <li class="tabs-title is-active"><a href="#panel1" aria-selected="true">Tab 1</a></li>
    <li class="tabs-title"><a data-tabs-target="panel2" href="#panel2">Tab 2</a></li>
  </ul>
  <div class="tabs-content" data-tabs-content="example-tabs">
    <div class="tabs-panel is-active" id="panel1">
      <p>Vivamus hendrerit arcu sed erat molestie vehicula. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor. Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor. Suspendisse dictum feugiat nisl ut dapibus.</p>
    </div>
    <div class="tabs-panel" id="panel2">
      <p>Suspendisse dictum feugiat nisl ut dapibus.  Vivamus hendrerit arcu sed erat molestie vehicula. Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor.  Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor.</p>
    </div>
  </div>
</div>

</section>
<section>
<h3 id="pagination">Pagination <sup><a href="#pagination" class="silver"><i class="fas fa-link"></i></a></sup></h3>
<p>Pagination lets users click through related content, like search results or news posts. Add the class <code>.pagination</code> to a <code>&lt;ul&gt;</code> containing <code>&lt;li&gt;</code> elements containing <code>&lt;a&gt;</code> elements. Add the <code>.current</code> class to highlight the current list item, or <code>.disabled</code> to subdue it. Pagination should be centered with the <code>.text-center</code> class.</p>
<p>Pagination should be nested inside a <code>&lt;nav&gt;</code> with the attributes <code>aria-label=&quot;Pagination&quot;</code> to explain the purpose of the component to assistive technologies. Content with the <code>.show-for-sr</code> class should also be added to provide more context to screen readers.</p>
<div class="code-example"><pre><code class="html hljs"><span class="hljs-tag">&lt;<span class="hljs-title">nav</span> <span class="hljs-attribute">aria-label</span>=<span class="hljs-value">"Pagination"</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-title">ul</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"pagination text-center"</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-title">li</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"pagination-previous disabled"</span>&gt;</span>Previous<span class="hljs-tag">&lt;/<span class="hljs-title">li</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-title">li</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"current"</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-title">span</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"show-for-sr"</span>&gt;</span>You're on page<span class="hljs-tag">&lt;/<span class="hljs-title">span</span>&gt;</span> 1<span class="hljs-tag">&lt;/<span class="hljs-title">li</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-title">li</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-title">a</span> <span class="hljs-attribute">href</span>=<span class="hljs-value">"#"</span> <span class="hljs-attribute">aria-label</span>=<span class="hljs-value">"Page 2"</span>&gt;</span>2<span class="hljs-tag">&lt;/<span class="hljs-title">a</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-title">li</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-title">li</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-title">a</span> <span class="hljs-attribute">href</span>=<span class="hljs-value">"#"</span> <span class="hljs-attribute">aria-label</span>=<span class="hljs-value">"Page 3"</span>&gt;</span>3<span class="hljs-tag">&lt;/<span class="hljs-title">a</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-title">li</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-title">li</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"ellipsis"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-title">li</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-title">li</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-title">a</span> <span class="hljs-attribute">href</span>=<span class="hljs-value">"#"</span> <span class="hljs-attribute">aria-label</span>=<span class="hljs-value">"Page 42"</span>&gt;</span>42<span class="hljs-tag">&lt;/<span class="hljs-title">a</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-title">li</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-title">li</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-title">a</span> <span class="hljs-attribute">href</span>=<span class="hljs-value">"#"</span> <span class="hljs-attribute">aria-label</span>=<span class="hljs-value">"Page 43"</span>&gt;</span>43<span class="hljs-tag">&lt;/<span class="hljs-title">a</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-title">li</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-title">li</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-title">a</span> <span class="hljs-attribute">href</span>=<span class="hljs-value">"#"</span> <span class="hljs-attribute">aria-label</span>=<span class="hljs-value">"Page 44"</span>&gt;</span>44<span class="hljs-tag">&lt;/<span class="hljs-title">a</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-title">li</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-title">li</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"pagination-next"</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-title">a</span> <span class="hljs-attribute">href</span>=<span class="hljs-value">"#"</span> <span class="hljs-attribute">aria-label</span>=<span class="hljs-value">"Next page"</span>&gt;</span>Next<span class="hljs-tag">&lt;/<span class="hljs-title">a</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-title">li</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-title">ul</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-title">nav</span>&gt;</span></code></pre></div><div class="callout">
  <nav aria-label="Pagination">
    <ul class="pagination text-center no-margin">
      <li class="pagination-previous disabled">Previous</li>
      <li class="current"><span class="show-for-sr">You're on page</span> 1</li>
      <li><a href="#" aria-label="Page 2">2</a></li>
      <li><a href="#" aria-label="Page 3">3</a></li>
      <li class="ellipsis"></li>
      <li><a href="#" aria-label="Page 42">42</a></li>
      <li><a href="#" aria-label="Page 43">43</a></li>
      <li><a href="#" aria-label="Page 44">44</a></li>
      <li class="pagination-next"><a href="#" aria-label="Next page">Next</a></li>
    </ul>
  </nav>
</div>

</section>
<!-- navigation-close-button -->
<!-- navigation-responsive-menu -->
<!-- navigation-drilldown-menu -->
<!-- navigation-dropdown-menu -->
<!-- navigation-dropdown-pane -->


<hr class="xlarge-margin-top xlarge-margin-bottom">
<h2 id="accessibility" class="large-margin-bottom">Accessibility <sup><a href="#accessibility" class="silver"><i class="fas fa-link"></i></a></sup></h2>
<section>
<p class="large-margin-bottom">Be sure to follow best practices to make our products more accessible:</p>
<div class="grid-x grid-margin-x">
  <div class="cell large-7">
    <ul>
      <li><p><strong>Structure documents properly.</strong> Use the right HTML tags when marking up navigation, lists, links, controls, etc.</p></li>
      <li><p><strong>Label everything.</strong> Every control or form element must have a text label. You can use the visibility classes to hide labels visually while maintaining accessibility. Use `alt` attributes on images to describe them.</p></li>
      <li><p><strong>Don't rely on solely visual cues.</strong> Content should make sense even if it's being read by a screen reader. Content with color-based labeling should also have text-based ways of being identified.</p></li>
      <li><p><strong>Make all content navigable regardless of device.</strong> All components should work with keyboards, mice, and touch screens. If content is primarily accessed via an interactive map, it should also be accessible via text search or some other non-map method.</p></li>
    </ul>
  </div>
  <div class="cell large-5">
    <h5 class="small-margin-bottom">Resources</h5>
    <ul class="text-small">
      <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/">WCAG 2.0 Guide</a></li>
      <li><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility">MDN accessibility documentation</a></li>
      <li><a href="https://www.w3.org/WAI/intro/accessibility.php">w3.org Introduction to Accessibility</a></li>
      <li><a href="https://www.section508.gov/">Section 508 government requirements</a></li>
      <li><a href="http://webaim.org/">WebAIM certification and training</a></li>
      <li><a href="http://a11yproject.com/checklist.html">Web Accessibility Checklist</a></li>
    </ul>
    <h5 class="small-margin-bottom">Tools</h5>
    <ul class="text-small">
      <li><a href="https://tenon.io/index.php">Tenon accessibility checker</a></li>
      <li><a href="http://wave.webaim.org">WAVE Chrome plugin - free accessibility checker</a></li>
      <li><a href="http://webaim.org/resources/contrastchecker">Color Contrast Checker</a></li>
      <li><a href="http://www.chromevox.com">ChromeVox screen reader plugin for Chrome</a></li>
      <li><a href="http://www.freedomscientific.com/Products/Blindness/Jaws">JAWS screen reader for Windows</a></li>
      <li><a href="http://www.nvaccess.org/download/">NVDA screen reader for Windows - Free</a></li>
    </ul>
  </div>
</div>
</section>
<section>
<h3 id="contrast">Contrast <sup><a href="#contrast" class="silver"><i class="fas fa-link"></i></a></sup></h3>
<p>For users with low vision, proper typographic contrast is important. Both size and color matter. Text colors should stand out from background colors. Use the <a href="https://webaim.org/resources/contrastchecker/">Color Contrast Checker <i class="fas fa-external-link-alt"></i></a> to choose accessible colors. The contrast ratio should at least be 1:4.5 for normal text and 3:1 for large text.</p>
</section>
<section>
<h3 id="screen-readers">Screen readers <sup><a href="#screen-readers" class="silver"><i class="fas fa-link"></i></a></sup></h3>
<p>Adding <code>display: none</code> to an element will prevent screen readers from reading it. There are better ways to hide content while still making it accessible to screen readers.</p>
<h4 id="show-for-screen-readers-only">Show for Screen Readers Only</h4>
<p>To visually hide content, while still allowing assistive technology to read it, add the <code>.show-for-sr</code> class.</p>
<div class="code-example"><pre><code class="html hljs"><span class="hljs-tag">&lt;<span class="hljs-title">p</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"show-for-sr"</span>&gt;</span>This paragraph can only be read by a screen reader.<span class="hljs-tag">&lt;/<span class="hljs-title">p</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">p</span>&gt;</span>There's a paragraph above this one, but you can't see it.<span class="hljs-tag">&lt;/<span class="hljs-title">p</span>&gt;</span></code></pre></div><div class="callout">
<p class="show-for-sr">This paragraph can only be read by a screen reader.</p>
<p>There's a paragraph above this one, but you can't see it.</p>
</div>


<h4 id="hide-for-screen-readers-only">Hide for Screen Readers Only</h4>
<p>To hide text from assistive technology, while still keeping it visible, add the attribute <code>aria-hidden=&quot;true&quot;</code>. This doesn&#39;t affect how the element looks, but screen readers will skip over it.</p>
<div class="code-example"><pre><code class="html hljs"><span class="hljs-tag">&lt;<span class="hljs-title">p</span> <span class="hljs-attribute">aria-hidden</span>=<span class="hljs-value">"true"</span>&gt;</span>This text can be seen, but won't be read by a screen reader.<span class="hljs-tag">&lt;/<span class="hljs-title">p</span>&gt;</span></code></pre></div><div class="callout">
  <p aria-hidden="true">This text can be seen, but won't be read by a screen reader.</p>
</div>

<p><em>Note: It&#39;s usually not a good idea to hide content from screen readers, but <code>aria-hidden</code> is best used to mask purely visual elements of a page. Try to avoid purely decorative text and images.</em></p>
<h4 id="skip-links">Skip links</h4>
<p>In a product with a lot of navigation, a screen reader has to read through the entire navigation to get to the content. This can be remedied by adding a skip link before the navigation, which takes the user to the main content.</p>
<p>The <code>.show-on-focus</code> class hides an element, except when it has focus. Adding <code>tabindex</code> to the target element makes it focusable—a negative value (e.g. <code>tabindex=&quot;-1&quot;</code>) means the element is focusable, but not reachable via sequential keyboard navigation; <code>tabindex=&quot;0&quot;</code> means the element is focusable in sequential keyboard navigation.</p>
<div class="code-example"><pre><code class="html hljs"><span class="hljs-tag">&lt;<span class="hljs-title">a</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"show-on-focus"</span> <span class="hljs-attribute">href</span>=<span class="hljs-value">"#main-content"</span>&gt;</span>Skip to content<span class="hljs-tag">&lt;/<span class="hljs-title">a</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">header</span> <span class="hljs-attribute">id</span>=<span class="hljs-value">"header"</span> <span class="hljs-attribute">role</span>=<span class="hljs-value">"banner"</span>&gt;</span>
  <span class="hljs-comment">&lt;!-- a lot of navigation --&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-title">header</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">main</span> <span class="hljs-attribute">id</span>=<span class="hljs-value">"main-content"</span> <span class="hljs-attribute">role</span>=<span class="hljs-value">"main"</span> <span class="hljs-attribute">tabindex</span>=<span class="hljs-value">"0"</span>&gt;</span>...<span class="hljs-tag">&lt;/<span class="hljs-title">main</span>&gt;</span></code></pre></div></section>
<section>
<h3 id="focus-styles">Focus styles <sup><a href="#focus-styles" class="silver"><i class="fas fa-link"></i></a></sup></h3>
<h4 id="-never-remove-css-outlines"><i class="fas fa-exclamation-triangle text-gold"></i> Never remove CSS outlines!</h4>
<p>It is tempting to use <code>:focus { outline: none; }</code> to removing outlines in CSS. But this creates issues for people navigating via keyboard, removing any visible indication of focus. Methods like <code>onfocus=&quot;blur()&quot;</code> are even worse, preventing users from interacting with elements at all.</p>
<p>Instead, use the <a href="https://github.com/ten1seven/what-input">what-input</a> library, which detects the user&#39;s current input device and adjusts the CSS accordingly. It let&#39;s us disable outlines for mouse users, but not for keyboard users.</p>
<ul>
<li>TODO: explain how to include what-input if not using Foundation JS...</li>
</ul>
<p><em>Note: Custom Sass components can use the <code>@include disable-mouse-outline;</code> at-rule to add what-input styles.</em></p>
</section>


<hr class="xlarge-margin-top xlarge-margin-bottom">
<h2 id="layout" class="large-margin-bottom">Layout <sup><a href="#layout" class="silver"><i class="fas fa-link"></i></a></sup></h2>
<section>
<h3 id="responsive-layouts">Responsive layouts <sup><a href="#responsive-layouts" class="silver"><i class="fas fa-link"></i></a></sup></h3>
<p>Our products should support any type of device, any size screen, and any resolution. They should fit various screens automatically, displaying content in a way that optimizes the user experience on any device.</p>
<h4>
  “There is no device.”&nbsp;
  <small class="text-dark-gray">
    <i class="fas fa-desktop fa-2x"></i>
    <i class="fas fa-laptop fa-lg"></i>
    <i class="fas fa-tablet-alt fa-lg"></i>
    <i class="fas fa-tablet-alt"></i>
    <i class="fas fa-tablet-alt fa-sm"></i>
    <i class="fas fa-mobile-alt"></i>
    <i class="fas fa-mobile-alt fa-xs"></i>
  </small>
</h4>

<h4 id="relative-units">Relative units</h4>
<p>absolute units vs relative units… rem preferred… em nesting troubles… px breaks zoom…</p>
</section>
<section>
<h3 id="whitespace-and-boxes">Whitespace & boxes <sup><a href="#whitespace-and-boxes" class="silver"><i class="fas fa-link"></i></a></sup></h3>
<p>Avoid putting content into lots of boxes. Instead, use whitespace to separate pieces of content and create visual hierarchy. When creating boxes, avoid rounded corners. Boxes should have squared corners.</p>
<div class="grid-x grid-margin-x">
  <div class="cell medium-shrink callout" style="border-radius:1rem;">
    <i class="fas fa-ban fuchsia"></i>  Avoid rounded corners.
  </div>
  <div class="cell medium-shrink callout">
    <i class="fas fa-check fa-fw green-dark"></i> Use squared corners.
  </div>
</div>

</section>
<section>
<h3 id="drop-shadows">Drop shadows <sup><a href="#drop-shadows" class="silver"><i class="fas fa-link"></i></a></sup></h3>
<p>Drop shadows are used very sparingly and subtly. Do not apply drop shadows to content elements like buttons or text. Drop shadows should only be applied to the layout&#39;s primary containers. Shadows should not have any blur, they should retain sharp edges. The color of a shadow should be <code>rgba(0,0,0,0.1)</code>, or pure black at 10 percent opacity.</p>
</section>
<section>
<h3 id="tables">Tables <sup><a href="#tables" class="silver"><i class="fas fa-link"></i></a></sup></h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</section>
<section>
<h3 id="responsive-embeds">Responsive embeds <sup><a href="#responsive-embeds" class="silver"><i class="fas fa-link"></i></a></sup></h3>
<p>To make sure embedded content maintains its aspect ratio at various screen sizes, wrap the <code>iframe</code>, <code>object</code>, <code>embed</code>, or <code>video</code> in a container with the <code>.responsive-embed</code> class.</p>
<div class="code-example"><pre><code class="html hljs"><span class="hljs-tag">&lt;<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"responsive-embed widescreen"</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-title">iframe</span> <span class="hljs-attribute">width</span>=<span class="hljs-value">"560"</span> <span class="hljs-attribute">height</span>=<span class="hljs-value">"315"</span> <span class="hljs-attribute">src</span>=<span class="hljs-value">"https://www.youtube.com/embed/6QJYgm0fRHk"</span> <span class="hljs-attribute">frameborder</span>=<span class="hljs-value">"0"</span> <span class="hljs-attribute">allowfullscreen</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-title">iframe</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-title">div</span>&gt;</span></code></pre></div><div class="callout">
  <div class="responsive-embed widescreen">
    <iframe width="560" height="315" src="https://www.youtube.com/embed/6QJYgm0fRHk" frameborder="0" allowfullscreen></iframe>
  </div>
</div>

<h4 id="embedded-videos">Embedded videos</h4>
<p><strong>Disable autoplay.</strong> All embedded media should be started by an explicit user action. Autoplay is a bad idea for accessibility, usability, and general sanity. Unexpected sound can conflict with other sounds or quiet environments. W3C discourages the use of autoplay, as it affects a user’s ability to stop it with a screen reader since they navigate by listening.</p>
<p><strong>Make sure text is legible.</strong> When displaying text in videos, make sure that it&#39;s reasonably large, uses high-contrast colours, and remains on screen for long enough to be read.</p>
<p><strong>Provide subtitles.</strong> A lot of video is watched without sound (as much as 85 percent on Facebook). This also makes the vides accessibility for users with auditory disabilities.</p>
</section>
<section>
<h3 id="visibility">Visibility <sup><a href="#visibility" class="silver"><i class="fas fa-link"></i></a></sup></h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</section>
<section>
<h3 id="print-styles">Print styles <sup><a href="#print-styles" class="silver"><i class="fas fa-link"></i></a></sup></h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</section>
<!-- float classes -->
<!-- sticky -->


<hr class="xlarge-margin-top xlarge-margin-bottom">
<h2 id="components" class="large-margin-bottom">Components <sup><a href="#components" class="silver"><i class="fas fa-link"></i></a></sup></h2>

<!--
Abide
Accordion
Accordion Menu
Equalizer
Interchange
Magellan
Media Object
Off-canvas
Orbit
Progress Bar
Responsive Toggle
Reveal (AVOID USING MODALS!)
Slider
Tabs
Thumbnail
Title Bar
Toggler
Top Bar
-->


<hr class="xlarge-margin-top xlarge-margin-bottom">
<h2 id="voice-and-language" class="large-margin-bottom">Voice & Language <sup><a href="#voice-and-language" class="silver"><i class="fas fa-link"></i></a></sup></h2>

<section>
<p>Content that is clear, relevant, and reader-friendly helps provide a great user experience. Language that is concise and literal allows for more accurate automated translations and makes information more accessible. Focus on simple and succinct sentences. Avoid governmental jargon and legalese.</p>
<p>We aim to be clear and conversational, yet professional. To be as clear as possible, strip sentences down to the <strong>actors</strong> and <strong>actions</strong>. The use of active voice is preferred to <strong>passive voice</strong>.</p>
<ul>
<li><p>Be conscious of the placement of the subjects of sentences—e.g. say <u>the applicant proposed changes</u> instead of <u>the changes were proposed by the applicant</u>.</p>
</li>
<li><p>Be conscious of the use of the verb &quot;to be.&quot; When the subject of your sentence comes after the verb, you are writing in <strong>passive voice</strong>.</p>
</li>
<li><p>Avoid citations. If needed, integrate into text—e.g. <u>according to the Department of Parks and Recreation</u>.</p>
</li>
<li><p>Alternate long and short sentences to help your writing flow better. Focus on one thought per sentence.</p>
</li>
<li><p><strong>Avoid repeating words</strong> in the same sentence, or beginning multiple sentences with the same word or phrase.</p>
</li>
</ul>
</section>

<section>
<h3 id="acronyms-and-abbreviations">Acronyms and abbreviations <sup><a href="#acronyms-and-abbreviations" class="silver"><i class="fas fa-link"></i></a></sup></h3>
<ul>
<li><p><strong>Agencies</strong> and <strong>organizations</strong> should always be spelled out on first reference, followed by the common abbreviation or acronym in parenthesis. On following references, the abbreviated agency name is preferred to the agency acronym—e.g. on second reference, <u>Department of Parks &amp; Recreation</u> should be referred to as <u>Parks</u> not <u>DPR</u>.</p>
</li>
<li><p><strong>Avoid the acronym <u>DCP</u>.</strong> Since users tend to scan content, acronyms can be read without the first defining instance having been seen. <u>New York City Department of City Planning</u> should instead be shortened to <u>NYC Planning</u> and never <u>DCP</u>.</p>
</li>
<li><p><strong>Ampersands</strong> (&amp;) and <strong>percent signs</strong> (%) should be written out. However, it&#39;s acceptable to use the symbols in subheadings, charts, graphs, and web buttons if they&#39;re used consistently.</p>
</li>
<li><p><strong>Use the <code>&lt;abbr&gt;</code> tag</strong> to indicate abbreviations. See the <a href="#abbreviations" data-smooth-scroll>abbreviations</a> section for more information._</p>
</li>
</ul>
</section>

<section>
<h3 id="addresses">Addresses <sup><a href="#addresses" class="silver"><i class="fas fa-link"></i></a></sup></h3>
<ul>
<li><p>Always use numerals when writing out building numbers in addresses.</p>
</li>
<li><p>In reference to specific street names, always spell out and capitalize words like <u>Boulevard</u>, <u>Avenue</u>, and <u>Street</u>. For street names that are also numbers, spell out and capitalize <u>First</u> through <u>Ninth</u> and use figures for <u>10th</u> and higher—e.g <u>Fifth Ave</u> and <u>11th Ave</u>.</p>
</li>
<li><p>If a street name includes a cardinal direction, abbreviate North, South, East and West only when referring to a specific building—e.g. <u>326 W. 17th Street</u> or <u>East 34th Street</u>. Do not capitalize cardinal directions when they indicate a general direction or location—e.g. <u>north of North 12th Street</u>.</p>
</li>
</ul>
</section>

<section>
<h3 id="phone-numbers">Phone numbers <sup><a href="#phone-numbers" class="silver"><i class="fas fa-link"></i></a></sup></h3>
<ul>
<li>Phone numbers use hyphens between groups of numbers—e.g. <u>212-123-4567</u>. Do not use parentheses around area codes. Area codes and country codes get no special treatment and aren&#39;t preceded by a 1 or plus sign.</li>
</ul>
</section>

<section>
<h3 id="capitalization">Capitalization <sup><a href="#capitalization" class="silver"><i class="fas fa-link"></i></a></sup></h3>
<ul>
<li><p><strong>Titles</strong> should always be capitalized when they appear before a person&#39;s name.</p>
</li>
<li><p>Follow sentence case for <strong>web buttons</strong> that include three or more words. Use title case for buttons with only one or two words. Using punctuation in buttons is up to the discretion of the writer.</p>
</li>
<li><p><strong>Charter</strong> should always be capitalized when used in reference to the New York City Charter.</p>
</li>
<li><p><strong>City</strong> should be capitalized when referring to New York City.</p>
</li>
<li><p><strong>District</strong> should be capitalized when referring to NYC Community Districts or Council Districts—e.g. <u>the 11th Council District</u>, or <u>within several Districts</u>).</p>
</li>
<li><p>Titles such as <strong>Chair</strong>, <strong>Mayor</strong>, and <strong>Speaker</strong> should always be capitalized when used in reference to their position—e.g. <u>Chair of the City Planning Commission</u> or <u>Mayor of New York City</u> or <u>Speaker of the New York City Council.</u></p>
</li>
<li><p>Capitalize the first word of a <strong>subheading</strong>. Punctuating subheadings is acceptable for questions. Other forms of subhead punctuation are up to the discretion of the writer.</p>
</li>
<li><p>Lowercase adjectives that describe status of a title—e.g. <u>the former Speaker Christine Quinn</u>.</p>
</li>
</ul>
</section>

<section>
<h3 id="compositions">Compositions <sup><a href="#compositions" class="silver"><i class="fas fa-link"></i></a></sup></h3>
<ul>
<li>Use quotation marks around titles of works of art and compositions, like books, songs, television shows, video games, and poems—e.g. say <u>&quot;The Grapes of Wrath&quot;</u> not <u><i>The Grapes of Wrath</i></u>. Do not use quotations or italics for names of publications—e.g. <u>The New York Times</u>.</li>
</ul>
</section>

<section>
<h3 id="contractions">Contractions <sup><a href="#contractions" class="silver"><i class="fas fa-link"></i></a></sup></h3>
<ul>
<li>Use common contractions like <strong>isn&#39;t</strong>, <strong>won&#39;t</strong>, and <strong>you&#39;ll</strong> when possible to set a more conversational tone.</li>
</ul>
</section>

<section>
<h3 id="names">Names <sup><a href="#names" class="silver"><i class="fas fa-link"></i></a></sup></h3>
<ul>
<li>Always use a person&#39;s title, first and last name upon first reference. Use title and last name for following references. Do not use courtesy titles, unless needed to differentiate between people who have the same last name.</li>
</ul>
</section>

<section>
<h3 id="numbers">Numbers <sup><a href="#numbers" class="silver"><i class="fas fa-link"></i></a></sup></h3>
<ul>
<li><p>Spell out numbers <strong>one</strong> through <strong>nine</strong>. Use numerals for numbers <strong>10 and greater</strong>. Always spell out numbers that begin sentences, unless it&#39;s a year—e.g. <u>2006 was a great year</u>. For numbers in the millions, billions or trillions, use a number and word—e.g. <u>1 billion</u> or <u>4.8 million</u>. Large numbers can be abbreviated in charts and graphs if they&#39;re used consistently—e.g. <u>1B</u> or <u>4.8M</u>.</p>
</li>
<li><p>When referring to <strong>money</strong>, always use numerals preceded with a dollar sign—e.g. <u>$400</u>. When referencing an amount of money less than $1, use numerals and spell out the word cents—e.g. <u>30 cents</u>.</p>
</li>
<li><p>For <strong>dates</strong>, avoid using ordinal numbers (1st, 2nd, 3rd). Instead use figures—e.g. <u>March 7, 1980</u>.</p>
</li>
<li><p>Always use numerals for <strong>units</strong>. Spell out words like pounds, feet, and ounces. Units can be abbreviated in charts and graphs if they&#39;re used consistently—e.g. <u>600 ft.</u></p>
</li>
<li><p>The word <strong>percent</strong> should almost always be written out. A percent sign (%) may be used for charts, graphs, and subheadings.</p>
</li>
<li><p>Always use numerals for percentages—e.g. <u>30 percent</u> or <u>6 percent</u>.</p>
</li>
<li><p>Use numerals in reference to <strong>age</strong>. Hyphenate ages when used as an adjective before a noun or in substitution for a noun—e.g. <u>the 20-year-old student</u> or <u>the 8-year-olds</u>). Don&#39;t use an apostrophe when describing a period of time—e.g. <u>in their 20s</u> or <u>the 1950s</u>.</p>
</li>
</ul>
</section>

<section>
<h3 id="hyperlinks">Hyperlinks <sup><a href="#hyperlinks" class="silver"><i class="fas fa-link"></i></a></sup></h3>
<ul>
<li>Avoid hyperlinking <strong><a>read here</a></strong> or <strong><a>click here</a></strong>. Hyperlinked text should always be descriptive to give readers a solid understanding of the linked content. Learn more about writing links in the <a href="#links" data-smooth-scroll>links</a> section.</li>
</ul>
</section>

<section>
<h3 id="hashtags">Hashtags <sup><a href="#hashtags" class="silver"><i class="fas fa-link"></i></a></sup></h3>
<p>Hashtags should be written in #CamelCase. Each word in the hashtag&#39;s phrase should begin with a capital letter. Acronyms within hashtags should be all capitals. Be careful when combining acronyms with other words—e.g. <u>#NYCHealth</u> reads as &quot;New York City Health,&quot; whereas <u>#NYChealth</u> reads as &quot;New York Chealth.&quot;</p>
</section>

<section>
<h3 id="pronouns">Pronouns <sup><a href="#pronouns" class="silver"><i class="fas fa-link"></i></a></sup></h3>
<ul>
<li><p>Pronouns like <strong>you</strong> and <strong>ours</strong> should be used at the writer&#39;s discretion to address readers or services we are providing. This helps humanize the City Planning&#39;s voice and makes us seem much more conversational and approachable.</p>
</li>
<li><p>Always use the singular form of <strong>they</strong> when referring to an abstract person—e.g. say <u>when they contact the lead planner</u> not <u>when he/she contacts the lead planner</u>.</p>
</li>
</ul>
</section>

<section>
<h3 id="punctuation">Punctuation <sup><a href="#punctuation" class="silver"><i class="fas fa-link"></i></a></sup></h3>
<ul>
<li><p><strong>Apostrophes</strong>: Add an apostrophe-s to all singular nouns, even if the noun ends in s. Use only an apostrophe with a singular noun if the following word begins with s—e.g. <u>the boss&#39;s hat</u> or <u>the boss&#39; style</u>. Only use an apostrophe for a proper noun that ends in s—e.g. <u>Districts&#39; residents</u>.</p>
</li>
<li><p><strong>Bullets</strong>: Capitalize the first word of every bullet. Include a period only when the bulleted item is a complete sentence.</p>
</li>
<li><p><strong>Colons</strong>: Capitalize the first word after a colon only if what follows makes a complete sentence.</p>
</li>
<li><p><strong>Commas</strong>: Always use the serial comma, also known as the Oxford comma.</p>
</li>
<li><p><strong>Dashes</strong>: Em dashes should be used—without spaces between them and adjacent words—to offset phrases. Avoid using en dashes when referring to ranges. Instead, spell out <u>to</u>, <u>and</u>, or <u>through</u>.</p>
</li>
<li><p><strong>Dates</strong>: Always use the full name of the month—e.g. say <u>March 3, 2016</u> not <u>Mar 3, 2016</u>.</p>
</li>
<li><p><strong>Quotation marks</strong>: Periods and commas go inside quotation marks.</p>
</li>
</ul>
</section>

<section>
<h3 id="words-to-avoid">Words to avoid <sup><a href="#words-to-avoid" class="silver"><i class="fas fa-link"></i></a></sup></h3>
<p>Figurative, or superfluous, language can be confusing. It also makes translation into additional languages difficult. Here are some examples of words to avoid:</p>
<ul>
<li><strong>Stand</strong> <small>(often used in social movements, but not inclusive of people with physical disabilities)</small></li>
<li><strong>Drive</strong> <small>(use a word like <u>lead</u> instead)</small></li>
<li><strong>Drive out</strong> <small>(use <u>eliminate</u> or <u>push away</u> instead)</small></li>
<li><strong>Going forward</strong> <small>(use <u>in the future</u> instead)</small></li>
<li><strong>In order to</strong> <small>(the words &quot;in order&quot; are unnnecessary; just say <u>to</u> instead)</small></li>
<li><strong>One-stop shop</strong> <small>(describe the item literally—e.g. <u>a tool with comprehensive services</u>)</small></li>
</ul>
<p>Strive to use as few words as possible, especially <strong>jargon</strong> and <strong>buzzwords</strong>, as their meanings are often lost on readers. Opt instead for words that are more specific and descriptive. Here&#39;s a list of words that are used idiomatically, along with more literal suggestions:</p>
<div class="grid-x grid-margin-x">
  <div class="cell large-6">
    <h4>Idioms and misnomers</h4>
    <p>Use literal and specific nouns rather than expressions or objects in a metaphorical context. For example:</p>
    <ul>
      <li><u>Our office is low bandwidth due to a plumbing issue</u> is abstract</li>
      <li><u>Our office hours will end early due to plumbing issues</u> is literal</li>
    </ul>
    <h6>Other examples:</h6>
    <ul>
      <li><strong>agenda</strong> <small>(use plan or intention)</small></li>
      <li><strong>llegals/illegal aliens</strong> <small>(use undocumented immigrants or people without immigration status)</small></li>
      <li><strong>thought leader</strong> <small>(describe person's specific accomplishments)</small></li>
      <li><strong>touchpoint</strong> <small>(refer to actual components)</small></li>
      <li><strong>user testing</strong> <small>(unless you're actually testing the users, use usability testing)</small></li>
    </ul>
  </div>
  <div class="cell large-6">
    <h4>Verbs</h4>
    <p>Use the specific, literal action and sentence subject rather than a hard-to-understand abstraction of that action. For example:</p>
    <ul>
      <li><u>empowered the use of waterfront</u> is abstract</li>
      <li><u>created public space on the waterfront</u> is literal</li>
    </ul>
    <h6>Other examples:</h6>
    <div class="grid-x grid-margin-x">
      <div class="cell large-5" style="margin-bottom:0;">
        <ul>
          <li><strong>collaborate</strong></li>
          <li><strong>combating</strong></li>
          <li><strong>countering</strong></li>
          <li><strong>dialogue</strong></li>
          <li><strong>facilitate</strong></li>
          <li><strong>foster</strong></li>
          <li><strong>impact</strong> <small>(as a verb)</small></li>
          <li><strong>initiate</strong></li>
        </ul>
      </div>
      <div class="cell large-7">
        <ul>
          <li><strong>land</strong> <small>(as verb)</small></li>
          <li><strong>leverage</strong> <small>(implies financial)</small></li>
          <li><strong>progress</strong> <small>(as a verb)</small></li>
          <li><strong>promote</strong> <small>(implies advertising)</small></li>
          <li><strong>streamline</strong></li>
          <li><strong>tackle</strong> <small>(implies football)</small></li>
          <li><strong>transform</strong></li>
          <li><strong>utilize</strong></li>
        </ul>
      </div>
    </div>
  </div>
</div>

</section>

        </div>
        <div class="medium-4 large-3 cell medium-order-1" data-sticky-container>
          <div class="sticky large-padding-top large-padding-bottom" data-sticky data-margin-top="0" data-anchor="main-content">
            <!-- <input id="showCodesCheckbox" type="checkbox"><label for="showCodesCheckbox">Show Code Examples</label> -->
            <ul class="no-bullet" data-smooth-scroll data-animation-easing="swing">
              <li>
                <a href="/top" class="text-weight-bold display-inline-block ">Overview</a>
                <ul class="medium-margin-bottom text-small">
                </ul>
              </li>
              <li>
                <a href="/getting-started" class="text-weight-bold display-inline-block ">Getting Started</a>
                <ul class="medium-margin-bottom text-small">
                  <li><a href="#installation">Installation</a></li>
                  <li><a href="#download">Download</a></li>
                  <li><a href="#ember-and-labs-ui">Ember and Labs UI</a></li>
                </ul>
              </li>
              <li>
                <a href="/logo" class="text-weight-bold display-inline-block ">Logo</a>
                <ul class="medium-margin-bottom text-small">
                  <li><a href="#logo-variations">Logo variations</a></li>
                  <li><a href="#logo-usage">Logo usage</a></li>
                </ul>
              </li>
              <li>
                <a href="/color" class="text-weight-bold display-inline-block ">Color</a>
                <ul class="medium-margin-bottom text-small">
                  <li><a href="#brand-colors">Brand colors</a></li>
                  <li><a href="#grayscale-colors">Grayscale colors</a></li>
                  <li><a href="#data-viz-colors">Data viz colors</a></li>
                  <li><a href="#color-classes">Color classes</a></li>
                  <li><a href="#color-accessibility">Color accessibility</a></li>
                </ul>
              </li>
              <li>
                <a href="/icons" class="text-weight-bold display-inline-block ">Icons</a>
                <ul class="medium-margin-bottom text-small">
                  <li><a href="#font-awesome">Font Awesome</a></li>
                </ul>
              </li>
              <li>
                <a href="/typography" class="text-weight-bold display-inline-block ">Typography</a>
                <ul class="medium-margin-bottom text-small">
                  <li><a href="#type-basics">Type basics</a></li>
                  <li><a href="#fonts">Fonts</a></li>
                  <li><a href="#headers">Headers</a></li>
                  <li><a href="#paragraphs">Paragraphs</a></li>
                  <li><a href="#text-alignment">Text alignment</a></li>
                  <li><a href="#links">Links</a></li>
                  <li><a href="#lists">Lists</a></li>
                  <li><a href="#blockquotes">Blockquotes</a></li>
                  <li><a href="#abbreviations">Abbreviations</a></li>
                  <li><a href="#code">Code</a></li>
                  <li><a href="#keystrokes">Keystrokes</a></li>
                  <li><a href="#dividers">Dividers</a></li>
                </ul>
              </li>
              <li>
                <a href="/forms" class="text-weight-bold display-inline-block ">Forms</a>
                <ul class="medium-margin-bottom text-small">
                  <li><a href="#text-inputs">Text inputs</a></li>
                  <li><a href="#text-areas">Text areas</a></li>
                  <li><a href="#labels-and-placeholders">Labels &amp; placeholders</a></li>
                  <li><a href="#select-menus">Select menus</a></li>
                  <li><a href="#checkboxes-and-radio-buttons">Checkboxes &amp; radio buttons</a></li>
                  <li><a href="#fieldsets">Fieldsets</a></li>
                  <li><a href="#file-upload">File upload</a></li>
                  <li><a href="#placeholder-text">Placeholder text</a></li>
                  <li><a href="#help-text">Help text</a></li>
                </ul>
              </li>
              <li>
                <a href="/navigation" class="text-weight-bold display-inline-block ">Navigation</a>
                <ul class="medium-margin-bottom text-small">
                  <li><a href="#buttons">Buttons</a></li>
                  <li><a href="#button-groups">Button Groups</a></li>
                  <li><a href="#menus">Menus</a></li>
                  <li><a href="#tabs">Tabs</a></li>
                  <li><a href="#pagination">Pagination</a></li>
                </ul>
              </li>
              <li>
                <a href="/accessibility" class="text-weight-bold display-inline-block ">Accessibility</a>
                <ul class="medium-margin-bottom text-small">
                  <li><a href="#contrast">Contrast</a></li>
                  <li><a href="#screen-readers">Screen readers</a></li>
                  <li><a href="#focus-styles">Focus styles</a></li>
                </ul>
              </li>
              <li>
                <a href="/layout" class="text-weight-bold display-inline-block ">Layout</a>
                <ul class="medium-margin-bottom text-small">
                  <li><a href="#there-is-no-device">There is no device</a></li>
                  <li><a href="#whitespace-and-boxes">Whitespace &amp; boxes</a></li>
                  <li><a href="#drop-shadows">Drop shadows</a></li>
                  <li><a href="#tables">Tables</a></li>
                  <li><a href="#responsive-embeds">Responsive embeds</a></li>
                  <li><a href="#visibility">Visibility</a></li>
                  <li><a href="#print-styles">Print styles</a></li>
                </ul>
              </li>
              <li>
                <a href="/maps" class="text-weight-bold display-inline-block ">Maps</a>
                <ul class="medium-margin-bottom text-small">
                </ul>
              </li>
              <li>
                <a href="/voice-and-language" class="text-weight-bold display-inline-block ">Voice &amp; Language</a>
                <ul class="medium-margin-bottom text-small">
                  <li><a href="#acronyms-and-abbreviations">Acronyms and abbreviations</a></li>
                  <li><a href="#addresses">Addresses</a></li>
                  <li><a href="#phone-numbers">Phone numbers</a></li>
                  <li><a href="#capitalization">Capitalization</a></li>
                  <li><a href="#compositions">Compositions</a></li>
                  <li><a href="#contractions">Contractions</a></li>
                  <li><a href="#names">Names</a></li>
                  <li><a href="#numbers">Numbers</a></li>
                  <li><a href="#hyperlinks">Hyperlinks</a></li>
                  <li><a href="#hashtags">Hashtags</a></li>
                  <li><a href="#pronouns">Pronouns</a></li>
                  <li><a href="#punctuation">Punctuation</a></li>
                  <li><a href="#words-to-avoid">Words to avoid</a></li>
                </ul>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>

  <script src="../assets/js/nyc-planning.js"></script>
  </body>
</html>