nyc-planning-style-guide
Version:
Base styles for NYC Department of City Planning (using Foundation for Sites)
728 lines (665 loc) • 176 kB
HTML
<!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, & 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 CDN <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"><<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> /></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></body></code> tag:</h5>
<div class="code-example"><pre><code class="html hljs"><span class="hljs-tag"><<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>></span><span class="undefined"></span><span class="hljs-tag"></<span class="hljs-title">script</span>></span></code></pre></div><p>That's it! You'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'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'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"><!doctype html></span>
<span class="hljs-tag"><<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>></span>
<span class="hljs-tag"><<span class="hljs-title">head</span>></span>
<span class="hljs-tag"><<span class="hljs-title">meta</span> <span class="hljs-attribute">charset</span>=<span class="hljs-value">"utf-8"</span> /></span>
<span class="hljs-tag"><<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>></span>
<span class="hljs-tag"><<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> /></span>
<span class="hljs-tag"><<span class="hljs-title">title</span>></span>NYC Planning [application name]<span class="hljs-tag"></<span class="hljs-title">title</span>></span>
<span class="hljs-tag"><<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>></span>
<span class="hljs-tag"><<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>></span>
<span class="hljs-tag"></<span class="hljs-title">head</span>></span>
<span class="hljs-tag"><<span class="hljs-title">body</span>></span>
<span class="hljs-tag"><<span class="hljs-title">h1</span>></span>Hello, world! <span class="hljs-tag"><<span class="hljs-title">i</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"fas fa-rocket"</span>></span><span class="hljs-tag"></<span class="hljs-title">i</span>></span><span class="hljs-tag"></<span class="hljs-title">h1</span>></span>
<span class="hljs-tag"><<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>></span><span class="undefined"></span><span class="hljs-tag"></<span class="hljs-title">script</span>></span>
<span class="hljs-tag"></<span class="hljs-title">body</span>></span>
<span class="hljs-tag"></<span class="hljs-title">html</span>></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'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 <i class="fas fa-download"></i></a></li>
<li><strong>JavaScript</strong>: <a href="../assets/js/nyc-planning.js">nyc-planning.js <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'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'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 <i class="fas fa-external-link-alt"></i></a>.</p>
</li>
<li><p><strong>Handle behavior/state yourself:</strong> If you're using a framework that handles state for you (e.g. JavaScript MVCs), it's best to avoid the dependencies of jQuery and Foundation'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"><<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> /></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"><!-- Primary, two-color logo --></span>
<span class="hljs-tag"><<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> /></span>
<span class="hljs-comment"><!-- White logo --></span>
<span class="hljs-tag"><<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> /></span>
<span class="hljs-comment"><!-- Black logo --></span>
<span class="hljs-tag"><<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> /></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 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 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'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's the color of the "NYC" 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><body></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'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"><<span class="hljs-title">p</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"text-green-dark"</span>></span>This whole paragraph is dark green.<span class="hljs-tag"></<span class="hljs-title">p</span>></span>
<span class="hljs-tag"><<span class="hljs-title">p</span>></span>This one is black with a <span class="hljs-tag"><<span class="hljs-title">span</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"text-purple"</span>></span>purple<span class="hljs-tag"></<span class="hljs-title">span</span>></span> word.<span class="hljs-tag"></<span class="hljs-title">p</span>></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'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"><<span class="hljs-title">p</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"bg-yellow"</span>></span>This element has a yellow background, which defaults to black text.<span class="hljs-tag"></<span class="hljs-title">p</span>></span>
<span class="hljs-tag"><<span class="hljs-title">p</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"bg-blue-dark"</span>></span>This element has a dark blue background, which defaults to white text.<span class="hljs-tag"></<span class="hljs-title">p</span>></span>
<span class="hljs-tag"><<span class="hljs-title">p</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"bg-chartreuse-light text-green-dark"</span>></span>This element has a light chartreuse background and dark green text (which overrides its default black text).<span class="hljs-tag"></<span class="hljs-title">p</span>></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"><<span class="hljs-title">i</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"fas fa-search"</span>></span><span class="hljs-tag"></<span class="hljs-title">i</span>></span>
<span class="hljs-tag"><<span class="hljs-title">i</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"fas fa-search text-blue"</span>></span><span class="hljs-tag"></<span class="hljs-title">i</span>></span>
<span class="hljs-tag"><<span class="hljs-title">i</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"fas fa-search fa-xs"</span>></span><span class="hljs-tag"></<span class="hljs-title">i</span>></span>
<span class="hljs-tag"><<span class="hljs-title">i</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"fas fa-search fa-2x"</span>></span><span class="hljs-tag"></<span class="hljs-title">i</span>></span>
<span class="hljs-tag"><<span class="hljs-title">i</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"fas fa-search fa-rotate-270"</span>></span><span class="hljs-tag"></<span class="hljs-title">i</span>&g