nyc-planning-style-guide
Version:
Base styles for NYC Department of City Planning (using Foundation for Sites)
463 lines (441 loc) • 36.1 kB
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">
<h1 id="typography" class="large-margin-bottom">Typography</h1>
<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><b></code> for <strong>bold</strong> text, without any extra importance</li>
<li>Use <code><strong></code> for <strong>bold</strong> text, with added semantic "strong" importance</li>
<li>Use <code><i></code> for <em>italic</em> text, without any extra importance</li>
<li>Use <code><em></code> for <em>italicize</em> text, with added semantic importance</li>
<li>Use <code><small></code> for <small>smaller</small> text</li>
<li>Use <code><mark></code> for <mark>marked</mark> or <mark>highlighted</mark> text</li>
<li>Use <code><del></code> for <del>deleted</del> (removed) text</li>
<li>Use <code><ins></code> for <ins>inserted</ins> (added) text</li>
<li>Use <code><sub></code> for <sub>subscripted</sub> text</li>
<li>Use <code><sup></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><body></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's important to use headers semantically. <code><h1></code> through <code><h6></code> elements represent six levels of hierarchy, <code><h1></code> being the highest and <code><h6></code> the lowest. Avoiding using <code><h1></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"><<span class="hljs-title">h1</span>></span>Header Level 1<span class="hljs-tag"></<span class="hljs-title">h1</span>></span>
<span class="hljs-tag"><<span class="hljs-title">h2</span>></span>Header Level 2<span class="hljs-tag"></<span class="hljs-title">h2</span>></span>
<span class="hljs-tag"><<span class="hljs-title">h3</span>></span>Header Level 3<span class="hljs-tag"></<span class="hljs-title">h3</span>></span>
<span class="hljs-tag"><<span class="hljs-title">h4</span>></span>Header Level 4<span class="hljs-tag"></<span class="hljs-title">h4</span>></span>
<span class="hljs-tag"><<span class="hljs-title">h5</span>></span>Header Level 5<span class="hljs-tag"></<span class="hljs-title">h5</span>></span>
<span class="hljs-tag"><<span class="hljs-title">h6</span>></span>Header Level 6<span class="hljs-tag"></<span class="hljs-title">h6</span>></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's easy to read.</p>
<div class="code-example"><pre><code class="html hljs"><span class="hljs-tag"><<span class="hljs-title">p</span>></span>This is a paragraph...<span class="hljs-tag"></<span class="hljs-title">p</span>></span></code></pre></div><p>Wide lines of text are difficult to read and make it harder for people to focus. While there's no perfect line length, a good goal fewer than 120 characters per line (including spaces). It's good practice to use responsive design techniques to create layouts with optimal line lengths.</p>
</section>
<section>
<h3 id="custom-font-size">Custom font size <sup><a href="#custom-font-size" class="silver"><i class="fas fa-link"></i></a></sup></h3>
<p>The <code>.text-[size]</code> classes let you adjust the font size of elements.</p>
<table class="large-margin-bottom">
<tr><td>`.text-xxlarge`</td><td>`2.125rem` (≈ 34 pixels)</td><td class="text-xxlarge">This is giant.</td></tr>
<tr><td>`.text-xlarge`</td><td>`1.5625rem` (≈ 25 pixels)</td><td class="text-xlarge">This is really big.</td></tr>
<tr><td>`.text-large`</td><td>`1.25rem` (≈ 20 pixels)</td><td class="text-large">This is larger than average.</td></tr>
<tr><td>`.text-medium`</td><td>`1rem` (≈ 16 pixels)</td><td class="text-medium">This is medium (default size).</td></tr>
<tr><td>`.text-small`</td><td>`0.8125rem` (≈ 13 pixels)</td><td class="text-small">This is small. Make sure it's accessible.</td></tr>
<tr><td>`.tiny`</td><td>`0.625rem` (≈ 10 pixels)</td><td class="text-tiny">Be careful with text this tiny. ALL CAPS HELPS.</td></tr>
</table>
<h4 id="use-appropriate-semantic-element-tags">Use appropriate, semantic element tags</h4>
<p><i class="fas fa-ban fuchsia"></i> Do not use <code><h3></code> instead of <code><p></code> just to make the larger.</p>
<p>Although header tags make fonts bigger and bolder, text should not be inside a header tag if it is not a heading. Header classes are used to give elements a particular header style, regardless of their tag. This allows for both semantic page structure and versatile design.</p>
<p>For example, an <code><h2></code> or <code><p></code> may be the proper element choice, but they default to specific sizes. You can style an element larger or smaller by adding a <code>.header-[size]</code> class.</p>
<div class="code-example"><pre><code class="html hljs"><span class="hljs-tag"><<span class="hljs-title">h5</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"header-xxlarge"</span>></span>XXL Heading<span class="hljs-tag"></<span class="hljs-title">h5</span>></span>
<span class="hljs-tag"><<span class="hljs-title">h5</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"header-xlarge"</span>></span>XL Heading<span class="hljs-tag"></<span class="hljs-title">h5</span>></span>
<span class="hljs-tag"><<span class="hljs-title">p</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"header-large"</span>></span>Large Heading<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">"header-medium"</span>></span>Medium Heading<span class="hljs-tag"></<span class="hljs-title">p</span>></span>
<span class="hljs-tag"><<span class="hljs-title">h1</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"header-small"</span>></span>Small Heading<span class="hljs-tag"></<span class="hljs-title">h1</span>></span>
<span class="hljs-tag"><<span class="hljs-title">h1</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"header-tiny"</span>></span>Tiny Heading<span class="hljs-tag"></<span class="hljs-title">h1</span>></span>
<span class="hljs-tag"><<span class="hljs-title">p</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"lead"</span>></span>This is lead paragraph...<span class="hljs-tag"></<span class="hljs-title">p</span>></span></code></pre></div><div class="callout">
<h5 class="header-xxlarge">XXL Heading</h5>
<h5 class="header-xlarge">XL Heading</h5>
<p class="header-large">Large Heading</p>
<p class="header-medium">Medium Heading</p>
<h1 class="header-small">Small Heading</h1>
<h1 class="header-tiny">Tiny Heading</h1>
<p class="lead">This is lead paragraph. It's larger than a regular paragraph, which makes it noticeably stand out. If you add `class="lead"` to a paragraph you'll make it a lead paragraph.</p>
</div>
</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"><<span class="hljs-title">p</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"text-left"</span>></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"></<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">"text-right"</span>></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"></<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">"text-center"</span>></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"></<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">"text-justify"</span>></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"></<span class="hljs-title">p</span>></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"><<span class="hljs-title">a</span> <span class="hljs-attribute">href</span>=<span class="hljs-value">"url"</span>></span>link text<span class="hljs-tag"></<span class="hljs-title">a</span>></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>"Click" 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>"Here" conceals the content that they are clicking on. You shouldn't have to read a paragraph to understand a link's context. When links communicate more than "here," you can easily scan content to find the link you'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"><<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>></span>link text<span class="hljs-tag"></<span class="hljs-title">a</span>></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><ol></code> tag to list things if the order of the items doesn't matter.</p>
<div class="code-example"><pre><code class="html hljs"><span class="hljs-tag"><<span class="hljs-title">ul</span>></span>
<span class="hljs-tag"><<span class="hljs-title">li</span>></span>List item<span class="hljs-tag"></<span class="hljs-title">li</span>></span>
<span class="hljs-tag"><<span class="hljs-title">li</span>></span>List item<span class="hljs-tag"></<span class="hljs-title">li</span>></span>
<span class="hljs-tag"><<span class="hljs-title">li</span>></span>This list item contains another list
<span class="hljs-tag"><<span class="hljs-title">ul</span>></span>
<span class="hljs-tag"><<span class="hljs-title">li</span>></span>Nested list item<span class="hljs-tag"></<span class="hljs-title">li</span>></span>
<span class="hljs-tag"><<span class="hljs-title">li</span>></span>Another nested list item<span class="hljs-tag"></<span class="hljs-title">li</span>></span>
<span class="hljs-tag"></<span class="hljs-title">ul</span>></span>
<span class="hljs-tag"></<span class="hljs-title">li</span>></span>
<span class="hljs-tag"><<span class="hljs-title">li</span>></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"></<span class="hljs-title">li</span>></span>
<span class="hljs-tag"></<span class="hljs-title">ul</span>></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><ol></code> tag defines lists with an explicit order, marked with numbers by default.</p>
<p>The optional <code>type="[1,A,a,I,i]"</code> attribute defines the type of the list item marker.</p>
<div class="code-example"><pre><code class="html hljs"><span class="hljs-tag"><<span class="hljs-title">ol</span>></span>
<span class="hljs-tag"><<span class="hljs-title">li</span>></span>Bicycles<span class="hljs-tag"></<span class="hljs-title">li</span>></span>
<span class="hljs-tag"><<span class="hljs-title">li</span>></span>Bike racks<span class="hljs-tag"></<span class="hljs-title">li</span>></span>
<span class="hljs-tag"><<span class="hljs-title">li</span>></span>Bike lanes
<span class="hljs-tag"><<span class="hljs-title">ol</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"a"</span>></span>
<span class="hljs-tag"><<span class="hljs-title">li</span>></span>Sharrows<span class="hljs-tag"></<span class="hljs-title">li</span>></span>
<span class="hljs-tag"><<span class="hljs-title">li</span>></span>Striped<span class="hljs-tag"></<span class="hljs-title">li</span>></span>
<span class="hljs-tag"><<span class="hljs-title">li</span>></span>Buffered<span class="hljs-tag"></<span class="hljs-title">li</span>></span>
<span class="hljs-tag"><<span class="hljs-title">li</span>></span>Protected<span class="hljs-tag"></<span class="hljs-title">li</span>></span>
<span class="hljs-tag"></<span class="hljs-title">ol</span>></span>
<span class="hljs-tag"></<span class="hljs-title">li</span>></span>
<span class="hljs-tag"></<span class="hljs-title">ol</span>></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><ul></code> is a bulleted list and <code><ol></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"><<span class="hljs-title">ul</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"no-bullet"</span>></span>
<span class="hljs-tag"><<span class="hljs-title">li</span>></span>List item<span class="hljs-tag"></<span class="hljs-title">li</span>></span>
<span class="hljs-tag"><<span class="hljs-title">li</span>></span>List item
<span class="hljs-tag"><<span class="hljs-title">ul</span>></span>
<span class="hljs-tag"><<span class="hljs-title">li</span>></span>Nested list item<span class="hljs-tag"></<span class="hljs-title">li</span>></span>
<span class="hljs-tag"><<span class="hljs-title">li</span>></span>Nested list item<span class="hljs-tag"></<span class="hljs-title">li</span>></span>
<span class="hljs-tag"></<span class="hljs-title">ul</span>></span>
<span class="hljs-tag"></<span class="hljs-title">li</span>></span>
<span class="hljs-tag"><<span class="hljs-title">li</span>></span>List item<span class="hljs-tag"></<span class="hljs-title">li</span>></span>
<span class="hljs-tag"></<span class="hljs-title">ul</span>></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><dl></code> tag is used to display name-value pairs, like metadata or a dictionary definition. Each term (<code><dt></code>) is paired with one or more definitions (<code><dd></code>).</p>
<div class="code-example"><pre><code class="html hljs"><span class="hljs-tag"><<span class="hljs-title">dl</span>></span>
<span class="hljs-tag"><<span class="hljs-title">dt</span>></span>Time<span class="hljs-tag"></<span class="hljs-title">dt</span>></span>
<span class="hljs-tag"><<span class="hljs-title">dd</span>></span>The indefinite continued progress of existence and events in the past, present, and future regarded as a whole.<span class="hljs-tag"></<span class="hljs-title">dd</span>></span>
<span class="hljs-tag"><<span class="hljs-title">dt</span>></span>Space<span class="hljs-tag"></<span class="hljs-title">dt</span>></span>
<span class="hljs-tag"><<span class="hljs-title">dd</span>></span>A continuous area or expanse that is free, available, or unoccupied.<span class="hljs-tag"></<span class="hljs-title">dd</span>></span>
<span class="hljs-tag"><<span class="hljs-title">dd</span>></span>The dimensions of height, depth, and width within which all things exist and move.<span class="hljs-tag"></<span class="hljs-title">dd</span>></span>
<span class="hljs-tag"></<span class="hljs-title">dl</span>></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"><<span class="hljs-title">blockquote</span>></span>
Cities have the capability of providing something for everybody, only because, and only when, they are created by everybody.
<span class="hljs-tag"><<span class="hljs-title">cite</span>></span>Jane Jacobs<span class="hljs-tag"></<span class="hljs-title">cite</span>></span>
<span class="hljs-tag"></<span class="hljs-title">blockquote</span>></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><abbr></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"><<span class="hljs-title">abbr</span> <span class="hljs-attribute">title</span>=<span class="hljs-value">"Department of Information Technology & Telecommunications"</span>></span>DoITT<span class="hljs-tag"></<span class="hljs-title">abbr</span>></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><code></code> tag.</p>
<div class="code-example"><pre><code class="html hljs">Remember to escape angle brackets: <span class="hljs-tag"><<span class="hljs-title">code</span>></span>&lt;div&gt;<span class="hljs-tag"></<span class="hljs-title">code</span>></span></code></pre></div><div class="callout">
Remember to escape angle brackets: <code><div></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><kbd></code> element to annotate a key stroke or combination.</p>
<div class="code-example"><pre><code class="html hljs">Press <span class="hljs-tag"><<span class="hljs-title">kbd</span>></span>-<span class="hljs-tag"></<span class="hljs-title">kbd</span>></span> / <span class="hljs-tag"><<span class="hljs-title">kbd</span>></span>+<span class="hljs-tag"></<span class="hljs-title">kbd</span>></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><hr></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"><<span class="hljs-title">hr</span> /></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>
</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="/" 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">
</ul>
</li>
<li>
<a href="/logo" class="text-weight-bold display-inline-block ">Logo</a>
<ul class="medium-margin-bottom text-small">
</ul>
</li>
<li>
<a href="/color" class="text-weight-bold display-inline-block ">Color</a>
<ul class="medium-margin-bottom text-small">
</ul>
</li>
<li>
<a href="/icons" class="text-weight-bold display-inline-block ">Icons</a>
<ul class="medium-margin-bottom text-small">
</ul>
</li>
<li>
<a href="/typography" class="text-weight-bold display-inline-block active">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="#custom-font-size">Custom font size</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">
</ul>
</li>
<li>
<a href="/navigation" class="text-weight-bold display-inline-block ">Navigation</a>
<ul class="medium-margin-bottom text-small">
</ul>
</li>
<li>
<a href="/accessibility" class="text-weight-bold display-inline-block ">Accessibility</a>
<ul class="medium-margin-bottom text-small">
</ul>
</li>
<li>
<a href="/layout" class="text-weight-bold display-inline-block ">Layout</a>
<ul class="medium-margin-bottom text-small">
</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 & Language</a>
<ul class="medium-margin-bottom text-small">
</ul>
</li>
</ul>
</div>
</div>
</div>
</div>
<script src="../assets/js/nyc-planning.js"></script>
</body>
</html>