access-nyc-patterns
Version:
User Interface Patterns for Benefits Access
985 lines • 74 kB
HTML
<!DOCTYPE html>
<html class="bg-color-white text-size-0" lang="en">
<head>
<meta charset="utf-8" />
<meta content="IE=edge" http-equiv="X-UA-Compatible" />
<meta content="width=device-width, initial-scale=1" name="viewport" />
<link href="images/apple-icon-57x57.png" rel="apple-touch-icon" sizes="57x57" />
<link href="images/apple-icon-60x60.png" rel="apple-touch-icon" sizes="60x60" />
<link href="images/apple-icon-72x72.png" rel="apple-touch-icon" sizes="72x72" />
<link href="images/apple-icon-76x76.png" rel="apple-touch-icon" sizes="76x76" />
<link href="images/apple-icon-114x114.png" rel="apple-touch-icon" sizes="114x114" />
<link href="images/apple-icon-120x120.png" rel="apple-touch-icon" sizes="120x120" />
<link href="images/apple-icon-144x144.png" rel="apple-touch-icon" sizes="144x144" />
<link href="images/apple-icon-152x152.png" rel="apple-touch-icon" sizes="152x152" />
<link href="images/apple-icon-180x180.png" rel="apple-touch-icon" sizes="180x180" />
<link href="images/android-icon-192x192.png" rel="icon" sizes="192x192" type="image/png" />
<link href="images/favicon-32x32.png" rel="icon" sizes="32x32" type="image/png" />
<link href="images/favicon-96x96.png" rel="icon" sizes="96x96" type="image/png" />
<link href="images/favicon-16x16.png" rel="icon" sizes="16x16" type="image/png" />
<meta content="#112E51" name="msapplication-TileColor" />
<meta content="images/ms-icon-144x144.png" name="msapplication-TileImage" />
<link href="images/favicon.ico" rel="icon" type="image/x-icon" />
<link href="styles/site-default.css" rel="stylesheet" />
<title>Icons | ACCESS NYC Patterns</title><noscript>
<style>
body {
visibility: visible !important;
}
</style>
</noscript>
<script type="text/javascript">
function load() {
document.body.style.visibility = 'visible'
};
</script>
</head>
<body class="bg-color-blue-dark" onload="load()" style="visibility: hidden;"><a class="sr-only" href="#main-content">Skip to main content</a>
<div class="bg-color-white">
<header class="color-light-background px-2">
<div class="border-b border-color-grey-light">
<div class="flex items-center justify-between p-2 screen-tablet:py-4 screen-tablet:px-2">
<div>
<h1 class="m-0 p-0 leading-normal"><a href="index"><span class="hidden">ACCESS NYC</span><svg aria-hidden="true" class="icon-logo-mark screen-tablet:hidden">
<use xlink:href="#icon-logo-mark"></use>
</svg><svg aria-hidden="true" class="icon-logo-full--large text-color-blue-dark hidden screen-tablet:inline-block">
<use xlink:href="#icon-logo-full"></use>
</svg></a></h1>
</div>
<div class="flex items-center">
<h2 class="text-font-size-small m-0 text-color-blue-dark screen-tablet:hidden">Patterns</h2>
<h2 aria-hidden="true" class="type-h1 m-0 text-color-blue-dark hidden screen-tablet:inline-block">Patterns</h2>
<nav class="text-font-size-small"><a class="rounded-lg text-color-blue-dark border-2 no-underline px-1 ml-2 hidden screen-tablet:inline-block" href="https://github.com/CityOfNewYork/access-nyc-patterns/tree/v0.8.0">0.8.0</a><a aria-hidden="true" class="ml-1 screen-tablet:ml-2 screen-tablet:hidden" href="https://github.com/CityOfNewYork/access-nyc-patterns/tree/v0.8.0">0.8.0</a><button aria-controls="main-menu" aria-expanded="false" class="btn-link ml-1 screen-tablet:ml-2" data-js="toggle" id="main-menu-control">Menu</button></nav>
</div>
</div>
</div>
</header>
<aside aria-hidden="true" aria-labelledby="main-menu-control" class="color-mid-background text-font-size-small hidden hidden:overflowFadeInUp animated relative" id="main-menu" role="region" style="top: -1px">
<div class="page-wrapper py-4 animated">
<div class="screen-tablet:flex">
<nav class="screen-tablet:flex-1 mb-1 px-2"><a class="type-h3 text-font-size-small mb-1 block screen-tablet:border-b screen-tablet:pb-2 screen-tablet:mb-1 border-color-white p-1" href="index">Home</a><a class="block p-1" href="about">About</a><a class="block p-1" href="installation">Installation</a><a class="block p-1" href="design-tools">Design Tools</a><a class="block p-1 screen-tablet:border-b screen-tablet:pb-2 screen-tablet:mb-1 border-color-white p-1" href="developer-tools">Developer Tools</a><a class="block p-1" href="https://www.npmjs.com/package/access-nyc-patterns">NPM</a><a class="block p-1" href="https://github.com/CityOfNewYork/access-nyc-patterns">GitHub</a></nav>
<nav class="screen-tablet:flex-1 mb-1 px-2 screen-desktop:pl-4"><span class="type-h3 text-font-size-small mb-1 block screen-tablet:border-b screen-tablet:pb-2 screen-tablet:mb-1 border-color-white p-1">Elements</span><a class="block p-1" href="buttons">Buttons</a><a class="block p-1" href="checkboxes">Checkboxes</a><a class="block p-1" href="dividers">Dividers</a><a class="block p-1" href="inputs">Inputs</a><a class="block p-1" href="layouts">Layouts</a><a class="block p-1" href="links">Links</a><a class="block p-1" href="lists">Lists</a><a class="block p-1" href="nav">Nav</a><a class="block p-1" href="program-labels">Program Labels</a><a class="block p-1" href="radios">Radios</a><a class="block p-1" href="tables">Tables</a><a class="block p-1" href="tooltips">Tooltips</a><a class="block p-1" href="toggles">Toggles</a><a class="block p-1" href="selects">Selects</a></nav>
<nav class="screen-tablet:flex-1 mb-1 px-2 screen-desktop:pl-4"><span class="type-h3 text-font-size-small mb-1 block screen-tablet:border-b screen-tablet:pb-2 screen-tablet:mb-1 border-color-white p-1">Components</span><a class="block p-1" href="accordion">Accordion</a><a class="block p-1" href="alert-box">Alert Box</a><a class="block p-1" href="alert-banner">Alert Banner</a><a class="block p-1" href="card">Card</a><a class="block p-1" href="checklist">Checklist</a><a class="block p-1" href="disclaimer">Disclaimer</a><a class="block p-1" href="filter">Filter</a><a class="block p-1" href="header">Header</a><a class="block p-1" href="member-list">Member List</a><a class="block p-1" href="nearby-stops">Nearby Stops</a><a class="block p-1" href="share-form">Share Form</a><a class="block p-1" href="side-nav">Side Nav</a><a class="block p-1" href="text-controller">Text Controller</a><a class="block p-1" href="question">Question</a></nav>
<nav class="screen-tablet:flex-1 mb-1 px-2 screen-desktop:pl-4"><span class="type-h3 text-font-size-small mb-1 block screen-tablet:border-b screen-tablet:pb-2 screen-tablet:mb-1 border-color-white p-1">Objects</span><a class="block p-1" href="announcements">Announcements</a><a class="block p-1" href="banner">Banner</a><a class="block p-1" href="card-list">Card Lists</a><a class="block p-1" href="content">Content</a><a class="block p-1" href="footer">Footer</a><a class="block p-1" href="formstack">Formstack</a><a class="block p-1" href="mobile-nav">Mobile Nav</a><a class="block p-1" href="navigation">Navigation</a><a class="block p-1" href="newsletter">Newsletter</a><a class="block p-1" href="search-box">Search Box</a></nav>
<nav class="screen-tablet:flex-1 mb-1 px-2 screen-desktop:pl-4"><a class="type-h3 text-font-size-small mb-1 block screen-tablet:border-b screen-tablet:pb-2 screen-tablet:mb-1 border-color-white p-1" href="utility">Utilities</a><a class="block p-1" href="accessibility">Accessibility</a><a class="block p-1" href="colors">Colors</a><a class="block p-1" href="cookie">Cookie</a><a class="block p-1" href="font">Fonts</a><a class="block p-1" href="icons">Icons</a><a class="block p-1" href="inherit">Inherit</a><a class="block p-1" href="language">Language</a><a class="block p-1" href="media">Media</a><a class="block p-1" href="text">Text</a><a class="block p-1" href="toggle">Toggle</a><a class="block p-1" href="typography">Typography</a></nav>
</div>
<div class="text-center"><button aria-controls="main-menu" aria-expanded="false" class="btn-link" data-js="toggle">Close Menu</button></div>
</div>
</aside>
<main class="color-light-background pt-4" id="main-content">
<article class="pt-4">
<header class="page-wrapper px-2 screen-desktop:px-0 layout--home-body">
<div class="my-0 w-full">
<h1 class="text-color-blue-dark px-2 pb-4 mb-4">Icons</h1>
</div>
</header>
<section class="pb-4 mb-4" id="program-category-icons">
<div class="page-wrapper px-2">
<header class="layout--home-body">
<div class="my-0 px-2 pt-1 pb-4 border-b border-color-grey-light">
<h2 class="m-0"><a class="text-color-grey-mid font-normal no-underline capitalize" href="#program-category-icons">Program Category Icons</a></h2>
<div class="pt-2">
<p class="text-font-size-small m-0">Source: <code><a href="https://github.com/CityOfNewYork/access-nyc-patterns/tree/v0.8.0/src/elements/icons">src/elements/icons/icons-program-category</a></code></p>
</div>
</div>
</header>
<div class="layout--home-body">
<div class="my-0 pt-4 px-2 text-font-size-small table-align-start"><p>These icons are specific to certain types of programs that can be found on ACCESS NYC.</p></div>
</div>
<div class="layout--gutter screen-tablet:layout--gutter justify-between pt-4">
<div class="layout--gutter screen-mobile:layout--two-columns-gutter screen-tablet:layout--three-columns-gutter">
<div class="flex flex-col justify-between items-center border border-color-grey-lightest p-2">
<div class="w-full">
<div class="text-font-size-small">
<h3 class="text-font-size-small capitalize mb-2">icon cash expenses</h3>
<div class="py-4 text-center bg-color-grey-lightest px-2 mb-2 flex items-center justify-center" style="min-height:150px"><svg class="icon-cash-expenses text-color-blue-dark">
<use xlink:href="#icon-cash-expenses"></use>
</svg></div>
<p class="mb-0 flex justify-between">xlink:href<code>#icon-cash-expenses</code></p>
</div>
</div>
</div>
<div class="flex flex-col justify-between items-center border border-color-grey-lightest p-2">
<div class="w-full">
<div class="text-font-size-small">
<h3 class="text-font-size-small capitalize mb-2">icon child care</h3>
<div class="py-4 text-center bg-color-grey-lightest px-2 mb-2 flex items-center justify-center" style="min-height:150px"><svg class="icon-child-care text-color-blue-dark">
<use xlink:href="#icon-child-care"></use>
</svg></div>
<p class="mb-0 flex justify-between">xlink:href<code>#icon-child-care</code></p>
</div>
</div>
</div>
<div class="flex flex-col justify-between items-center border border-color-grey-lightest p-2">
<div class="w-full">
<div class="text-font-size-small">
<h3 class="text-font-size-small capitalize mb-2">icon city id card</h3>
<div class="py-4 text-center bg-color-grey-lightest px-2 mb-2 flex items-center justify-center" style="min-height:150px"><svg class="icon-city-id-card text-color-blue-dark">
<use xlink:href="#icon-city-id-card"></use>
</svg></div>
<p class="mb-0 flex justify-between">xlink:href<code>#icon-city-id-card</code></p>
</div>
</div>
</div>
<div class="flex flex-col justify-between items-center border border-color-grey-lightest p-2">
<div class="w-full">
<div class="text-font-size-small">
<h3 class="text-font-size-small capitalize mb-2">icon education</h3>
<div class="py-4 text-center bg-color-grey-lightest px-2 mb-2 flex items-center justify-center" style="min-height:150px"><svg class="icon-education text-color-blue-dark">
<use xlink:href="#icon-education"></use>
</svg></div>
<p class="mb-0 flex justify-between">xlink:href<code>#icon-education</code></p>
</div>
</div>
</div>
<div class="flex flex-col justify-between items-center border border-color-grey-lightest p-2">
<div class="w-full">
<div class="text-font-size-small">
<h3 class="text-font-size-small capitalize mb-2">icon enrichment</h3>
<div class="py-4 text-center bg-color-grey-lightest px-2 mb-2 flex items-center justify-center" style="min-height:150px"><svg class="icon-enrichment text-color-blue-dark">
<use xlink:href="#icon-enrichment"></use>
</svg></div>
<p class="mb-0 flex justify-between">xlink:href<code>#icon-enrichment</code></p>
</div>
</div>
</div>
<div class="flex flex-col justify-between items-center border border-color-grey-lightest p-2">
<div class="w-full">
<div class="text-font-size-small">
<h3 class="text-font-size-small capitalize mb-2">icon family services</h3>
<div class="py-4 text-center bg-color-grey-lightest px-2 mb-2 flex items-center justify-center" style="min-height:150px"><svg class="icon-family-services text-color-blue-dark">
<use xlink:href="#icon-family-services"></use>
</svg></div>
<p class="mb-0 flex justify-between">xlink:href<code>#icon-family-services</code></p>
</div>
</div>
</div>
<div class="flex flex-col justify-between items-center border border-color-grey-lightest p-2">
<div class="w-full">
<div class="text-font-size-small">
<h3 class="text-font-size-small capitalize mb-2">icon food</h3>
<div class="py-4 text-center bg-color-grey-lightest px-2 mb-2 flex items-center justify-center" style="min-height:150px"><svg class="icon-food text-color-blue-dark">
<use xlink:href="#icon-food"></use>
</svg></div>
<p class="mb-0 flex justify-between">xlink:href<code>#icon-food</code></p>
</div>
</div>
</div>
<div class="flex flex-col justify-between items-center border border-color-grey-lightest p-2">
<div class="w-full">
<div class="text-font-size-small">
<h3 class="text-font-size-small capitalize mb-2">icon health</h3>
<div class="py-4 text-center bg-color-grey-lightest px-2 mb-2 flex items-center justify-center" style="min-height:150px"><svg class="icon-health text-color-blue-dark">
<use xlink:href="#icon-health"></use>
</svg></div>
<p class="mb-0 flex justify-between">xlink:href<code>#icon-health</code></p>
</div>
</div>
</div>
<div class="flex flex-col justify-between items-center border border-color-grey-lightest p-2">
<div class="w-full">
<div class="text-font-size-small">
<h3 class="text-font-size-small capitalize mb-2">icon housing</h3>
<div class="py-4 text-center bg-color-grey-lightest px-2 mb-2 flex items-center justify-center" style="min-height:150px"><svg class="icon-housing text-color-blue-dark">
<use xlink:href="#icon-housing"></use>
</svg></div>
<p class="mb-0 flex justify-between">xlink:href<code>#icon-housing</code></p>
</div>
</div>
</div>
<div class="flex flex-col justify-between items-center border border-color-grey-lightest p-2">
<div class="w-full">
<div class="text-font-size-small">
<h3 class="text-font-size-small capitalize mb-2">icon people with disabilities</h3>
<div class="py-4 text-center bg-color-grey-lightest px-2 mb-2 flex items-center justify-center" style="min-height:150px"><svg class="icon-people-with-disabilities text-color-blue-dark">
<use xlink:href="#icon-people-with-disabilities"></use>
</svg></div>
<p class="mb-0 flex justify-between">xlink:href<code>#icon-people-with-disabilities</code></p>
</div>
</div>
</div>
<div class="flex flex-col justify-between items-center border border-color-grey-lightest p-2">
<div class="w-full">
<div class="text-font-size-small">
<h3 class="text-font-size-small capitalize mb-2">icon work</h3>
<div class="py-4 text-center bg-color-grey-lightest px-2 mb-2 flex items-center justify-center" style="min-height:150px"><svg class="icon-work text-color-blue-dark">
<use xlink:href="#icon-work"></use>
</svg></div>
<p class="mb-0 flex justify-between">xlink:href<code>#icon-work</code></p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="pb-4 mb-4" id="program-card-icons">
<div class="page-wrapper px-2">
<header class="layout--home-body">
<div class="my-0 px-2 pt-1 pb-4 border-b border-color-grey-light">
<h2 class="m-0"><a class="text-color-grey-mid font-normal no-underline capitalize" href="#program-card-icons">Program Card Icons</a></h2>
<div class="pt-2">
<p class="text-font-size-small m-0">Source: <code><a href="https://github.com/CityOfNewYork/access-nyc-patterns/tree/v0.8.0/src/elements/icons">src/elements/icons/icons-program-card</a></code></p>
</div>
</div>
</header>
<div class="layout--home-body">
<div class="my-0 pt-4 px-2 text-font-size-small table-align-start"></div>
</div>
<div class="layout--gutter screen-tablet:layout--gutter justify-between pt-4">
<div class="layout--gutter screen-mobile:layout--two-columns-gutter screen-tablet:layout--three-columns-gutter">
<div class="flex flex-col justify-between items-center border border-color-grey-lightest p-2">
<div class="w-full">
<div class="text-font-size-small">
<h3 class="text-font-size-small capitalize mb-2">icon card cash expenses</h3>
<div class="py-4 text-center bg-color-grey-lightest px-2 mb-2 flex items-center justify-center" style="min-height:150px"><svg class="icon-card-cash-expenses text-color-blue-dark">
<use xlink:href="#icon-card-cash-expenses"></use>
</svg></div>
<p class="mb-0 flex justify-between">xlink:href<code>#icon-card-cash-expenses</code></p>
</div>
</div>
</div>
<div class="flex flex-col justify-between items-center border border-color-grey-lightest p-2">
<div class="w-full">
<div class="text-font-size-small">
<h3 class="text-font-size-small capitalize mb-2">icon card child care</h3>
<div class="py-4 text-center bg-color-grey-lightest px-2 mb-2 flex items-center justify-center" style="min-height:150px"><svg class="icon-card-child-care text-color-blue-dark">
<use xlink:href="#icon-card-child-care"></use>
</svg></div>
<p class="mb-0 flex justify-between">xlink:href<code>#icon-card-child-care</code></p>
</div>
</div>
</div>
<div class="flex flex-col justify-between items-center border border-color-grey-lightest p-2">
<div class="w-full">
<div class="text-font-size-small">
<h3 class="text-font-size-small capitalize mb-2">icon card city id card</h3>
<div class="py-4 text-center bg-color-grey-lightest px-2 mb-2 flex items-center justify-center" style="min-height:150px"><svg class="icon-card-city-id-card text-color-blue-dark">
<use xlink:href="#icon-card-city-id-card"></use>
</svg></div>
<p class="mb-0 flex justify-between">xlink:href<code>#icon-card-city-id-card</code></p>
</div>
</div>
</div>
<div class="flex flex-col justify-between items-center border border-color-grey-lightest p-2">
<div class="w-full">
<div class="text-font-size-small">
<h3 class="text-font-size-small capitalize mb-2">icon card education</h3>
<div class="py-4 text-center bg-color-grey-lightest px-2 mb-2 flex items-center justify-center" style="min-height:150px"><svg class="icon-card-education text-color-blue-dark">
<use xlink:href="#icon-card-education"></use>
</svg></div>
<p class="mb-0 flex justify-between">xlink:href<code>#icon-card-education</code></p>
</div>
</div>
</div>
<div class="flex flex-col justify-between items-center border border-color-grey-lightest p-2">
<div class="w-full">
<div class="text-font-size-small">
<h3 class="text-font-size-small capitalize mb-2">icon card enrichment</h3>
<div class="py-4 text-center bg-color-grey-lightest px-2 mb-2 flex items-center justify-center" style="min-height:150px"><svg class="icon-card-enrichment text-color-blue-dark">
<use xlink:href="#icon-card-enrichment"></use>
</svg></div>
<p class="mb-0 flex justify-between">xlink:href<code>#icon-card-enrichment</code></p>
</div>
</div>
</div>
<div class="flex flex-col justify-between items-center border border-color-grey-lightest p-2">
<div class="w-full">
<div class="text-font-size-small">
<h3 class="text-font-size-small capitalize mb-2">icon card expenses</h3>
<div class="py-4 text-center bg-color-grey-lightest px-2 mb-2 flex items-center justify-center" style="min-height:150px"><svg class="icon-card-expenses text-color-blue-dark">
<use xlink:href="#icon-card-expenses"></use>
</svg></div>
<p class="mb-0 flex justify-between">xlink:href<code>#icon-card-expenses</code></p>
</div>
</div>
</div>
<div class="flex flex-col justify-between items-center border border-color-grey-lightest p-2">
<div class="w-full">
<div class="text-font-size-small">
<h3 class="text-font-size-small capitalize mb-2">icon card family services</h3>
<div class="py-4 text-center bg-color-grey-lightest px-2 mb-2 flex items-center justify-center" style="min-height:150px"><svg class="icon-card-family-services text-color-blue-dark">
<use xlink:href="#icon-card-family-services"></use>
</svg></div>
<p class="mb-0 flex justify-between">xlink:href<code>#icon-card-family-services</code></p>
</div>
</div>
</div>
<div class="flex flex-col justify-between items-center border border-color-grey-lightest p-2">
<div class="w-full">
<div class="text-font-size-small">
<h3 class="text-font-size-small capitalize mb-2">icon card food</h3>
<div class="py-4 text-center bg-color-grey-lightest px-2 mb-2 flex items-center justify-center" style="min-height:150px"><svg class="icon-card-food text-color-blue-dark">
<use xlink:href="#icon-card-food"></use>
</svg></div>
<p class="mb-0 flex justify-between">xlink:href<code>#icon-card-food</code></p>
</div>
</div>
</div>
<div class="flex flex-col justify-between items-center border border-color-grey-lightest p-2">
<div class="w-full">
<div class="text-font-size-small">
<h3 class="text-font-size-small capitalize mb-2">icon card health</h3>
<div class="py-4 text-center bg-color-grey-lightest px-2 mb-2 flex items-center justify-center" style="min-height:150px"><svg class="icon-card-health text-color-blue-dark">
<use xlink:href="#icon-card-health"></use>
</svg></div>
<p class="mb-0 flex justify-between">xlink:href<code>#icon-card-health</code></p>
</div>
</div>
</div>
<div class="flex flex-col justify-between items-center border border-color-grey-lightest p-2">
<div class="w-full">
<div class="text-font-size-small">
<h3 class="text-font-size-small capitalize mb-2">icon card housing</h3>
<div class="py-4 text-center bg-color-grey-lightest px-2 mb-2 flex items-center justify-center" style="min-height:150px"><svg class="icon-card-housing text-color-blue-dark">
<use xlink:href="#icon-card-housing"></use>
</svg></div>
<p class="mb-0 flex justify-between">xlink:href<code>#icon-card-housing</code></p>
</div>
</div>
</div>
<div class="flex flex-col justify-between items-center border border-color-grey-lightest p-2">
<div class="w-full">
<div class="text-font-size-small">
<h3 class="text-font-size-small capitalize mb-2">icon card people with disabilities</h3>
<div class="py-4 text-center bg-color-grey-lightest px-2 mb-2 flex items-center justify-center" style="min-height:150px"><svg class="icon-card-people-with-disabilities text-color-blue-dark">
<use xlink:href="#icon-card-people-with-disabilities"></use>
</svg></div>
<p class="mb-0 flex justify-between">xlink:href<code>#icon-card-people-with-disabilities</code></p>
</div>
</div>
</div>
<div class="flex flex-col justify-between items-center border border-color-grey-lightest p-2">
<div class="w-full">
<div class="text-font-size-small">
<h3 class="text-font-size-small capitalize mb-2">icon card work</h3>
<div class="py-4 text-center bg-color-grey-lightest px-2 mb-2 flex items-center justify-center" style="min-height:150px"><svg class="icon-card-work text-color-blue-dark">
<use xlink:href="#icon-card-work"></use>
</svg></div>
<p class="mb-0 flex justify-between">xlink:href<code>#icon-card-work</code></p>
</div>
</div>
</div>
<div> </div>
</div>
</div>
</div>
</section>
<section class="pb-4 mb-4" id="checklist-category-icons">
<div class="page-wrapper px-2">
<header class="layout--home-body">
<div class="my-0 px-2 pt-1 pb-4 border-b border-color-grey-light">
<h2 class="m-0"><a class="text-color-grey-mid font-normal no-underline capitalize" href="#checklist-category-icons">Checklist Category Icons</a></h2>
<div class="pt-2">
<p class="text-font-size-small m-0">Source: <code><a href="https://github.com/CityOfNewYork/access-nyc-patterns/tree/v0.8.0/src/elements/icons">src/elements/icons/icons-checklist</a></code></p>
</div>
</div>
</header>
<div class="layout--home-body">
<div class="my-0 pt-4 px-2 text-font-size-small table-align-start"><p>These icons are specific to certain kinds of documents needed for applying to specific programs. If there is no icon associated with the requirement, it defaults to displaying a checkmark. These icons can only be implemented using the "Background Image" method described below.</p></div>
</div>
<div class="layout--gutter screen-tablet:layout--gutter justify-between pt-4">
<div class="layout--gutter screen-mobile:layout--two-columns-gutter screen-tablet:layout--three-columns-gutter">
<div class="flex flex-col justify-between items-center border border-color-grey-lightest p-2">
<div class="w-full">
<div class="text-font-size-small">
<h3 class="text-font-size-small capitalize mb-2">icon application</h3>
<div class="py-4 text-center bg-color-grey-lightest px-2 mb-2 flex items-center justify-center" style="min-height:150px">
<div class="bg-icon-application text-color-blue-dark">
<use xlink:href="#icon-application"></use>
</div>
</div>
<p class="mb-0 flex justify-between">selector<code>.bg-icon-application</code></p>
</div>
</div>
</div>
<div class="flex flex-col justify-between items-center border border-color-grey-lightest p-2">
<div class="w-full">
<div class="text-font-size-small">
<h3 class="text-font-size-small capitalize mb-2">icon badge</h3>
<div class="py-4 text-center bg-color-grey-lightest px-2 mb-2 flex items-center justify-center" style="min-height:150px">
<div class="bg-icon-badge text-color-blue-dark">
<use xlink:href="#icon-badge"></use>
</div>
</div>
<p class="mb-0 flex justify-between">selector<code>.bg-icon-badge</code></p>
</div>
</div>
</div>
<div class="flex flex-col justify-between items-center border border-color-grey-lightest p-2">
<div class="w-full">
<div class="text-font-size-small">
<h3 class="text-font-size-small capitalize mb-2">icon calendar</h3>
<div class="py-4 text-center bg-color-grey-lightest px-2 mb-2 flex items-center justify-center" style="min-height:150px">
<div class="bg-icon-calendar text-color-blue-dark">
<use xlink:href="#icon-calendar"></use>
</div>
</div>
<p class="mb-0 flex justify-between">selector<code>.bg-icon-calendar</code></p>
</div>
</div>
</div>
<div class="flex flex-col justify-between items-center border border-color-grey-lightest p-2">
<div class="w-full">
<div class="text-font-size-small">
<h3 class="text-font-size-small capitalize mb-2">icon flag</h3>
<div class="py-4 text-center bg-color-grey-lightest px-2 mb-2 flex items-center justify-center" style="min-height:150px">
<div class="bg-icon-flag text-color-blue-dark">
<use xlink:href="#icon-flag"></use>
</div>
</div>
<p class="mb-0 flex justify-between">selector<code>.bg-icon-flag</code></p>
</div>
</div>
</div>
<div class="flex flex-col justify-between items-center border border-color-grey-lightest p-2">
<div class="w-full">
<div class="text-font-size-small">
<h3 class="text-font-size-small capitalize mb-2">icon generic</h3>
<div class="py-4 text-center bg-color-grey-lightest px-2 mb-2 flex items-center justify-center" style="min-height:150px">
<div class="bg-icon-generic text-color-blue-dark">
<use xlink:href="#icon-generic"></use>
</div>
</div>
<p class="mb-0 flex justify-between">selector<code>.bg-icon-generic</code></p>
</div>
</div>
</div>
<div class="flex flex-col justify-between items-center border border-color-grey-lightest p-2">
<div class="w-full">
<div class="text-font-size-small">
<h3 class="text-font-size-small capitalize mb-2">icon check</h3>
<div class="py-4 text-center bg-color-grey-lightest px-2 mb-2 flex items-center justify-center" style="min-height:150px">
<div class="bg-icon-check text-color-blue-dark">
<use xlink:href="#icon-check"></use>
</div>
</div>
<p class="mb-0 flex justify-between">selector<code>.bg-icon-check</code></p>
</div>
</div>
</div>
<div> </div>
</div>
</div>
</div>
</section>
<section class="pb-4 mb-4" id="logos">
<div class="page-wrapper px-2">
<header class="layout--home-body">
<div class="my-0 px-2 pt-1 pb-4 border-b border-color-grey-light">
<h2 class="m-0"><a class="text-color-grey-mid font-normal no-underline capitalize" href="#logos">Logos</a></h2>
<div class="pt-2">
<p class="text-font-size-small m-0">Source: <code><a href="https://github.com/CityOfNewYork/access-nyc-patterns/tree/v0.8.0/src/elements/icons">src/elements/icons/icons-logo</a></code></p>
</div>
</div>
</header>
<div class="layout--home-body">
<div class="my-0 pt-4 px-2 text-font-size-small table-align-start"></div>
</div>
<div class="layout--gutter screen-tablet:layout--gutter justify-between pt-4">
<div class="layout--gutter screen-mobile:layout--two-columns-gutter screen-tablet:layout--three-columns-gutter">
<div class="flex flex-col justify-between items-center border border-color-grey-lightest p-2">
<div class="w-full">
<div class="text-font-size-small">
<h3 class="text-font-size-small capitalize mb-2">icon logo full</h3>
<div class="py-4 text-center bg-color-grey-lightest px-2 mb-2 flex items-center justify-center" style="min-height:150px"><svg class="icon-logo-full text-color-blue-dark">
<use xlink:href="#icon-logo-full"></use>
</svg></div>
<p class="mb-0 flex justify-between">xlink:href<code>#icon-logo-full</code></p>
</div>
</div>
</div>
<div class="flex flex-col justify-between items-center border border-color-grey-lightest p-2">
<div class="w-full">
<div class="text-font-size-small">
<h3 class="text-font-size-small capitalize mb-2">icon logo full large</h3>
<div class="py-4 text-center bg-color-grey-lightest px-2 mb-2 flex items-center justify-center" style="min-height:150px"><svg class="icon-logo-full--large text-color-blue-dark">
<use xlink:href="#icon-logo-full"></use>
</svg></div>
<p class="mb-0 flex justify-between">xlink:href<code>#icon-logo-full--large</code></p>
</div>
</div>
</div>
<div class="flex flex-col justify-between items-center border border-color-grey-lightest p-2">
<div class="w-full">
<div class="text-font-size-small">
<h3 class="text-font-size-small capitalize mb-2">icon logo mark</h3>
<div class="py-4 text-center bg-color-grey-lightest px-2 mb-2 flex items-center justify-center" style="min-height:150px"><svg class="icon-logo-mark text-color-blue-dark">
<use xlink:href="#icon-logo-mark"></use>
</svg></div>
<p class="mb-0 flex justify-between">xlink:href<code>#icon-logo-mark</code></p>
</div>
</div>
</div>
<div class="flex flex-col justify-between items-center border border-color-grey-lightest p-2">
<div class="w-full">
<div class="text-font-size-small">
<h3 class="text-font-size-small capitalize mb-2">icon logo nyc</h3>
<div class="py-4 text-center bg-color-grey-lightest px-2 mb-2 flex items-center justify-center" style="min-height:150px"><svg class="icon-logo-nyc text-color-blue-dark">
<use xlink:href="#icon-logo-nyc"></use>
</svg></div>
<p class="mb-0 flex justify-between">xlink:href<code>#icon-logo-nyc</code></p>
</div>
</div>
</div>
<div> </div>
</div>
</div>
</div>
</section>
<section class="pb-4 mb-4" id="ui-icons">
<div class="page-wrapper px-2">
<header class="layout--home-body">
<div class="my-0 px-2 pt-1 pb-4 border-b border-color-grey-light">
<h2 class="m-0"><a class="text-color-grey-mid font-normal no-underline capitalize" href="#ui-icons">UI Icons</a></h2>
<div class="pt-2">
<p class="text-font-size-small m-0">Source: <code><a href="https://github.com/CityOfNewYork/access-nyc-patterns/tree/v0.8.0/src/elements/icons">src/elements/icons/icons</a></code></p>
</div>
</div>
</header>
<div class="layout--home-body">
<div class="my-0 pt-4 px-2 text-font-size-small table-align-start"></div>
</div>
<div class="layout--gutter screen-tablet:layout--gutter justify-between pt-4">
<div class="layout--gutter screen-mobile:layout--two-columns-gutter screen-tablet:layout--three-columns-gutter">
<div class="flex flex-col justify-between items-center border border-color-grey-lightest p-2">
<div class="w-full">
<div class="text-font-size-small">
<h3 class="text-font-size-small capitalize mb-2">icon ui alert octagon</h3>
<div class="py-4 text-center bg-color-grey-lightest px-2 mb-2 flex items-center justify-center" style="min-height:150px"><svg class="icon-ui-alert-octagon icon-4 text-color-blue-dark">
<use xlink:href="#icon-ui-alert-octagon"></use>
</svg></div>
<p class="mb-0 flex justify-between">xlink:href<code>#icon-ui-alert-octagon</code></p>
</div>
</div>
</div>
<div class="flex flex-col justify-between items-center border border-color-grey-lightest p-2">
<div class="w-full">
<div class="text-font-size-small">
<h3 class="text-font-size-small capitalize mb-2">icon ui alert triangle</h3>
<div class="py-4 text-center bg-color-grey-lightest px-2 mb-2 flex items-center justify-center" style="min-height:150px"><svg class="icon-ui-alert-triangle icon-4 text-color-blue-dark">
<use xlink:href="#icon-ui-alert-triangle"></use>
</svg></div>
<p class="mb-0 flex justify-between">xlink:href<code>#icon-ui-alert-triangle</code></p>
</div>
</div>
</div>
<div class="flex flex-col justify-between items-center border border-color-grey-lightest p-2">
<div class="w-full">
<div class="text-font-size-small">
<h3 class="text-font-size-small capitalize mb-2">icon ui calendar</h3>
<div class="py-4 text-center bg-color-grey-lightest px-2 mb-2 flex items-center justify-center" style="min-height:150px"><svg class="icon-ui-calendar icon-4 text-color-blue-dark">
<use xlink:href="#icon-ui-calendar"></use>
</svg></div>
<p class="mb-0 flex justify-between">xlink:href<code>#icon-ui-calendar</code></p>
</div>
</div>
</div>
<div class="flex flex-col justify-between items-center border border-color-grey-lightest p-2">
<div class="w-full">
<div class="text-font-size-small">
<h3 class="text-font-size-small capitalize mb-2">icon ui check circle</h3>
<div class="py-4 text-center bg-color-grey-lightest px-2 mb-2 flex items-center justify-center" style="min-height:150px"><svg class="icon-ui-check-circle icon-4 text-color-blue-dark">
<use xlink:href="#icon-ui-check-circle"></use>
</svg></div>
<p class="mb-0 flex justify-between">xlink:href<code>#icon-ui-check-circle</code></p>
</div>
</div>
</div>
<div class="flex flex-col justify-between items-center border border-color-grey-lightest p-2">
<div class="w-full">
<div class="text-font-size-small">
<h3 class="text-font-size-small capitalize mb-2">icon ui check</h3>
<div class="py-4 text-center bg-color-grey-lightest px-2 mb-2 flex items-center justify-center" style="min-height:150px"><svg class="icon-ui-check icon-4 text-color-blue-dark">
<use xlink:href="#icon-ui-check"></use>
</svg></div>
<p class="mb-0 flex justify-between">xlink:href<code>#icon-ui-check</code></p>
</div>
</div>
</div>
<div class="flex flex-col justify-between items-center border border-color-grey-lightest p-2">
<div class="w-full">
<div class="text-font-size-small">
<h3 class="text-font-size-small capitalize mb-2">icon ui chevron down</h3>
<div class="py-4 text-center bg-color-grey-lightest px-2 mb-2 flex items-center justify-center" style="min-height:150px"><svg class="icon-ui-chevron-down icon-4 text-color-blue-dark">
<use xlink:href="#icon-ui-chevron-down"></use>
</svg></div>
<p class="mb-0 flex justify-between">xlink:href<code>#icon-ui-chevron-down</code></p>
</div>
</div>
</div>
<div class="flex flex-col justify-between items-center border border-color-grey-lightest p-2">
<div class="w-full">
<div class="text-font-size-small">
<h3 class="text-font-size-small capitalize mb-2">icon ui chevron left</h3>
<div class="py-4 text-center bg-color-grey-lightest px-2 mb-2 flex items-center justify-center" style="min-height:150px"><svg class="icon-ui-chevron-left icon-4 text-color-blue-dark">
<use xlink:href="#icon-ui-chevron-left"></use>
</svg></div>
<p class="mb-0 flex justify-between">xlink:href<code>#icon-ui-chevron-left</code></p>
</div>
</div>
</div>
<div class="flex flex-col justify-between items-center border border-color-grey-lightest p-2">
<div class="w-full">
<div class="text-font-size-small">
<h3 class="text-font-size-small capitalize mb-2">icon ui chevron right</h3>
<div class="py-4 text-center bg-color-grey-lightest px-2 mb-2 flex items-center justify-center" style="min-height:150px"><svg class="icon-ui-chevron-right icon-4 text-color-blue-dark">
<use xlink:href="#icon-ui-chevron-right"></use>
</svg></div>
<p class="mb-0 flex justify-between">xlink:href<code>#icon-ui-chevron-right</code></p>
</div>
</div>
</div>
<div class="flex flex-col justify-between items-center border border-color-grey-lightest p-2">
<div class="w-full">
<div class="text-font-size-small">
<h3 class="text-font-size-small capitalize mb-2">icon ui chevron up</h3>
<div class="py-4 text-center bg-color-grey-lightest px-2 mb-2 flex items-center justify-center" style="min-height:150px"><svg class="icon-ui-chevron-up icon-4 text-color-blue-dark">
<use xlink:href="#icon-ui-chevron-up"></use>
</svg></div>
<p class="mb-0 flex justify-between">xlink:href<code>#icon-ui-chevron-up</code></p>
</div>
</div>
</div>
<div class="flex flex-col justify-between items-center border border-color-grey-lightest p-2">
<div class="w-full">
<div class="text-font-size-small">
<h3 class="text-font-size-small capitalize mb-2">icon ui info</h3>
<div class="py-4 text-center bg-color-grey-lightest px-2 mb-2 flex items-center justify-center" style="min-height:150px"><svg class="icon-ui-info icon-4 text-color-blue-dark">
<use xlink:href="#icon-ui-info"></use>
</svg></div>
<p class="mb-0 flex justify-between">xlink:href<code>#icon-ui-info</code></p>
</div>
</div>
</div>
<div class="flex flex-col justify-between items-center border border-color-grey-lightest p-2">
<div class="w-full">
<div class="text-font-size-small">
<h3 class="text-font-size-small capitalize mb-2">icon ui mail</h3>
<div class="py-4 text-center bg-color-grey-lightest px-2 mb-2 flex items-center justify-center" style="min-height:150px"><svg class="icon-ui-mail icon-4 text-color-blue-dark">
<use xlink:href="#icon-ui-mail"></use>
</svg></div>
<p class="mb-0 flex justify-between">xlink:href<code>#icon-ui-mail</code></p>
</div>
</div>
</div>
<div class="flex flex-col justify-between items-center border border-color-grey-lightest p-2">
<div class="w-full">
<div class="text-font-size-small">
<h3 class="text-font-size-small capitalize mb-2">icon ui message circle</h3>
<div class="py-4 text-center bg-color-grey-lightest px-2 mb-2 flex items-center justify-center" style="min-height:150px"><svg class="icon-ui-message-circle icon-4 text-color-blue-dark">
<use xlink:href="#icon-ui-message-circle"></use>
</svg></div>
<p class="mb-0 flex justify-between">xlink:href<code>#icon-ui-message-circle</code></p>
</div>
</div>
</div>
<div class="flex flex-col justify-between items-center border border-color-grey-lightest p-2">
<div class="w-full">
<div class="text-font-size-small">
<h3 class="text-font-size-small capitalize mb-2">icon ui minus circle</h3>
<div class="py-4 text-center bg-color-grey-lightest px-2 mb-2 flex items-center justify-center" style="min-height:150px"><svg class="icon-ui-minus-circle icon-4 text-color-blue-dark">
<use xlink:href="#icon-ui-minus-circle"></use>
</svg></div>
<p class="mb-0 flex justify-between">xlink:href<code>#icon-ui-minus-circle</code></p>
</div>
</div>
</div>
<div class="flex flex-col justify-between items-center border border-color-grey-lightest p-2">
<div class="w-full">
<div class="text-font-size-small">
<h3 class="text-font-size-small capitalize mb-2">icon ui plus circle</h3>
<div class="py-4 text-center bg-color-grey-lightest px-2 mb-2 flex items-center justify-center" style="min-height:150px"><svg class="icon-ui-plus-circle icon-4 text-color-blue-dark">
<use xlink:href="#icon-ui-plus-circle"></use>
</svg></div>
<p class="mb-0 flex justify-between">xlink:href<code>#icon-ui-plus-circle</code></p>
</div>
</div>
</div>
<div class="flex flex-col justify-between items-center border border-color-grey-lightest p-2">
<div class="w-full">
<div class="text-font-size-small">
<h3 class="text-font-size-small capitalize mb-2">icon ui printer</h3>
<div class="py-4 text-center bg-color-grey-lightest px-2 mb-2 flex items-center justify-center" style="min-height:150px"><svg class="icon-ui-printer icon-4 text-color-blue-dark">
<use xlink:href="#icon-ui-printer"></use>
</svg></div>
<p class="mb-0 flex justify-between">xlink:href<code>#icon-ui-printer</code></p>
</div>
</div>
</div>
<div class="flex flex-col justify-between items-center border border-color-grey-lightest p-2">
<div class="w-full">
<div class="text-font-size-small">
<h3 class="text-font-size-small capitalize mb-2">icon ui search</h3>
<div class="py-4 text-center bg-color-grey-lightest px-2 mb-2 flex items-center justify-center" style="min-height:150px"><svg class="icon-ui-search icon-4 text-color-blue-dark">
<use xlink:href="#icon-ui-search"></use>
</svg></div>
<p class="mb-0 flex justify-between">xlink:href<code>#icon-ui-search</code></p>
</div>
</div>
</div>
<div class="flex flex-col justify-between items-center border border-color-grey-lightest p-2">
<div class="w-full">
<div class="text-font-size-small">
<h3 class="text-font-size-small capitalize mb-2">icon ui settings</h3>
<div class="py-4 text-center bg-color-grey-lightest px-2 mb-2 flex items-center justify-center" style="min-height:150px"><svg class="icon-ui-settings icon-4 text-color-blue-dark">
<use xlink:href="#icon-ui-settings"></use>
</svg></div>
<p class="mb-0 flex justify-between">xlink:href<code>#icon-ui-settings</code></p>
</div>
</div>
</div>
<div class="flex flex-col justify-between items-center border border-color-grey-lightest p-2">
<div class="w-full">
<div class="text-font-size-small">
<h3 class="text-font-size-small capitalize mb-2">icon ui user check</h3>
<div class="py-4 text-center bg-color-grey-lightest px-2 mb-2 flex items-center justify-center" style="min-height:150px"><svg class="icon-ui-user-check icon-4 text-color-blue-dark">
<use xlink:href="#icon-ui-user-check"></use>
</svg></div>
<p class="mb-0 flex justify-between">xlink:href<code>#icon-ui-user-check</code></p>
</div>
</div>
</div>
<div class="flex flex-col justify-between items-center border border-color-grey-lightest p-2">
<div class="w-full">
<div class="text-font-size-small">
<h3 class="text-font-size-small capitalize mb-2">icon ui x circle</h3>
<div class="py-4 text-center bg-color-grey-lightest px-2 mb-2 flex items-center justify-center" style="min-height:150px"><svg class="icon-ui-x-circle icon-4 text-color-blue-dark">
<use xlink:href="#icon-ui-x-circle"></use>
</svg></div>
<p class="mb-0 flex justify-between">xlink:href<code>#icon-ui-x-circle</code></p>
</div>
</div>
</div>
<div class="flex flex-col justify-between items-center border border-color-grey-lightest p-2">
<div class="w-full">
<div class="text-font-size-small">
<h3 class="text-font-size-small capitalize mb-2">icon ui x</h3>
<div class="py-4 text-center bg-color-grey-lightest px-2 mb-2 flex items-center justify-center" style="min-height:150px"><svg class="icon-ui-x icon-4 text-color-blue-dark">
<use xlink:href="#icon-ui-x"></use>
</svg></div>
<p class="mb-0 flex justify-between">xlink:href<code>#icon-ui-x</code></p>
</div>
</div>
</div>
<div> </div>
</div>
</div>
</div>
</section>
<section class="pb-4 mb-4" id="icon-usage">
<div class="page-wrapper px-2 screen-desktop:px-0">
<header class="layout--home-body">
<div class="my-0 px-2 border-b border-color-grey-light screen-tablet:flex screen-tablet:justify-between">
<h2 class="m-0 pt-1 pb-4"><a class="text-color-grey-mid font-normal no-underline capitalize" href="#icon-usage">Icon Usage</a></h2>
</div>
</header>
<div class="layout--home-body">
<div class="my-0 pt-4 px-2 text-font-size-small table-align-start"><h4>The SVG Sprite</h4>
<p>To use the inline SVGS, include the main icon sprite (<code>dist/icons.svg</code>) in your page markup. ACCESS NYC uses an AJAX method to cache the sprite file while not including it in the page cache to decrease the size of each page. To import the icon through the global ACCESS NYC Patterns script use the following code:</p>
<pre><code><!-- Global Script -->
<script src="dist/scripts/access-nyc.js"></script>
<script>
var access = new AccessNyc();
access.icons();
</script></code></pre>
<p>The script expects the icon sprite path to be named <code>icons.svg</code> and live in the root directory of the site. To overwrite this, pass a path to the method:</p>
<pre><code>access.icons('path/to/icons.svg');</code></pre>
<p>The ES6, CommonJS, and IFFE modules all require global activation to be written into your main script:</p>
<pre><code>// ES6
import Filter from 'src/elements/icons/icons';
// CommonJS
import Filter from 'dist/elements/icons/icons.common';
<!-- IFFE -->
<script src="dist/elements/icons/icons.iffe.js"></script>
new Icons(); // or new Icons('path/to/icons.svg');</code></pre>
<h4>Polyfills</h4>
<p>The script uses the <code>Fetch</code> method which requires a polyfill for IE11 support. See the <a href="/installation">"Polyfills" section in the Installation docs</a> for recommendations.</p>
<h4>Markup</h4>
<p>There are a few options for using icons after the sprite has been loaded on the page:</p>
<h5>Inline SVG’s</h5>
<p>The first option allows you to inline an SVG with the <code>use</code> tag. This is the preferred method for ACCESS NYC. Note that you can change the color of inline SVG icon shapes that have their fill set as currentColor by using a text color utility. Also, note the role="img" attribute, title tag, and title tag id for accessibility support.</p>
<pre><code><svg class="icon-logo-full text-color-blue-dark" role="img">
<title id="icon-logo-full-title">ACCESS NYC Logo</title>
<use xlink:href="#icon-logo-full"></use>
</svg></code></pre>
<h5>Background Images</h5>
<p>The second option does not require the icon sprite to be added to the page through the JavaScript module. It uses background images that reference the icons on the CDN. This option uses a utility class that sets the background image of the icon <code>.bg-< Icon ID Here ></code>. Icons with background images require less markup but their shape fill color will default to black or whatever fill color the shape is set to. Note the <code>role="img"</code> and alt text attributes for accessibility.</p>
<pre><code><div class="icon-logo-full" role="img" alt="The ACCESS NYC Logo"></div></code></pre>
<h5><code>img</code> tag</h5>
<p>The third option is to use the individual SVG path as a source attribute in an image tag. Note the alt text attribute for accessibility.</p>
<pre><code><img src="svgs/icon-logo-full.svg" alt="The ACCESS NYC Logo"></code></pre>
<p><strong>Accessibility Note</strong>: If the SVG graphic doesn't serve a function, it may not be useful to screen readers. Therefore, it may be hidden using the <code>aria-hidden="true"</code> attribute.</p></div>
</div>
</div>
</section>
<section class="pb-4 mb-4" id="subway-icons">
<div class="page-wrapper px-2">
<header class="layout--home-body">
<div class="my-0 px-2 pt-1 pb-4 border-b border-color-grey-light">
<h2 class="m-0"><a class="text-color-grey-mid font-normal no-underline capitalize" href="#subway-icons">Subway Icons</a></h2>
<div class="pt-2">
<p class="text-font-size-small m-0">Source: <code><a href="https://github.com/CityOfNewYork/access-nyc-patterns/tree/v0.8.0/src/elements/icons">src/elements/icons/icons-subway</a></code></p>
</div>
</div>
</header>
<div class="layout--home-body">
<div class="my-0 pt-4 px-2 text-font-size-small table-align-start"><p>The Subway icon set is a group of CSS only icons. The color of the icon is set with the background color utility <code>bg-</code> with a name that follows the <a href="https://en.wikipedia.org/wiki/New_York_City_Subway#Nomenclature">primary trunk line nomenclature</a>, ex: <code>bg-<trunk></code>.</p>
<pre><code><span class="icon-subway bg-lexington-avenue">6</span></code></pre>
<p>For express stops, the border color utility <code>border-<trunk></code> is set instead of the background.</p>
<pre><code><span class="icon-subway icon-subway-express border-lexington-avenue">6<span></code></pre></div>
</div>
<div class="layout--gutter screen-tablet:layout--gutter justify-between pt-4">
<div class="layout--gutter screen-mobile:layout--two-columns-gutter screen-tablet:layout--three-columns-gutter">
<div class="flex flex-col justify-between items-center border border-color-grey-lightest p-2">
<div class="w-full">
<div class="text-font-size-small">
<h3 class="text-font-size-small capitalize mb-2">eighth avenue</h3>
<div class="text-font-size-normal py-4 text-center bg-color-grey-lightest px-2 mb-2 flex items-center justify-center" style="min-height:150px"><span class="icon-subway bg-eighth-avenue mx-1">A</span><span class="icon-subway bg-eighth-avenue mx-1">C</span><span class="icon-subway bg-eighth-avenue mx-1">E</span></div>
<p class="mb-0 flex justify-between">Trunk<code>eighth-avenue</code></p>
</div>
</div>
</div>
<div class="flex flex-col justify-between items-center border border-color-grey-lightest p-2">
<div class="w-full">
<div class="text-font-size-small">
<h3 class="text-font-size-small capitalize mb-2">sixth avenue</h3>
<div class="text-font-size-normal py-4 text-center bg-color-grey-lightest px-2 mb-2 flex items-center justify-center" style="min-height:150px"><span class="icon-subway bg-sixth-avenue mx-1">B</span><span class="icon-subway bg-sixth-avenue mx-1">D</span><span class="icon-subway bg-sixth-avenue mx-1">F</span><span class="icon-subway bg-sixth-avenue mx-1">M</span></div>
<p class="mb-0 flex justify-between">Trunk<code>sixth-avenue</code></p>
</div>
</div>
</div>
<div class="flex flex-col justify-between items-center border border-color-grey-lightest p-2">
<div class="w-full">
<div class="text-font-size-small">
<h3 class="text-font-size-small capitalize mb-2">crosstown</h3>
<div class="text-font-size-normal py-4 text-center bg-color-grey-lightest px-2 mb-2 flex items-center justify-center" style="min-height:150px"><span class="icon-subway bg-crosstown mx-1">G</span></div>
<p class="mb-0 flex justify-between">Trunk<code>crosstown</code></p>
</div>
</div>
</div>
<div class="flex flex-col justify-between items-center border border-color-grey-lightest p-2">
<div class="w-full">
<div class="text-font-size-small">
<h3 class="text-font-size-small capitalize mb-2">canarsie</h3>
<div class="text-font-size-normal py-4 text-center bg-color-grey-lightest px-2 mb-2 flex items-center justify-center" style="min-height:150px"><span class="icon-subway bg-canarsie mx-1">L</span></div>
<p class="mb-0 flex justify-between">Trunk<code>canarsie</code></p>
</div>
</div>
</div>
<div class="flex flex-col justify-between items-center border border-color-grey-lightest p-2">
<div class="w-full">
<div class="text-font-size-small">
<h3 class="text-font-size-small capitalize mb-2">nassau</h3>
<div class="text-font-size-normal py-4 text-center bg-color-grey-lightest px-2 mb-2 flex items-center justify-center" style="min-height:150px"><span class="icon-subway bg-nassau mx-1">J</span><span class="icon-subway bg-nassau mx-1">Z</span></div>
<p class="mb-0 flex justify-between">Trunk<code>nassau</code></p>
</div>
</div>
</div>
<div class="flex flex-col justify-between items-center border border-color-grey-lightest p-2">
<div class="w-full">
<div class="text-font-size-small">
<h3 class="text-font-size-small capitalize mb-2">broadway</h3>
<div class="text-font-size-normal py-4 text-center bg-color-grey-lightest px-2 mb-2 flex items-center justify-center" style="min-height:150px"><span class="icon-subway bg-broadway mx-1">N</span><span class="icon-subway bg-broadway mx-1">Q</span><span class="icon-subway bg-broadway mx-1">R</span><span class="icon-subway bg-broadway mx-1">W</span></div>
<p class="mb-0 flex justify-between">Trunk<code>broadway</code></p>
</div>
</div>
</div>
<div class="flex flex-col justify-between items-center border border-color-grey-lightest p-2">
<div class="w-full">
<div class="text-font-size-small">
<h3 class="text-font-size-small capitalize mb-2">broadway seventh avenue</h3>
<div class="text-font-size-normal py-4 text-center bg-color-grey-lightest px-2 mb-2 flex items-center justify-center" style="min-height:150px"><span class="icon-subway bg-broadway-seventh-avenue mx-1">1</span><span class="icon-subway bg-broadway-seventh-avenue mx-1">2</span><span class="icon-subway bg-broadway-seventh-avenue mx-1">3</span></div>
<p class="mb-0 flex justify-between">Trunk<code>broadway-seventh-avenue</code></p>
</div>
</div>
</div>
<div class="flex flex-col justify-between items-center border border-color-grey-lightest p-2">
<div class="w-full">
<div class="text-font-size-small">
<h3 class="text-font-size-small capitalize mb-2">lexington avenue</h3>
<div class="text-font-size-normal py-4 text-center bg-color-grey-lightest px-2 mb-2 flex items-center justify-center" style="min-height:150px"><span class="icon-subway bg-lexington-avenue mx-1">4</span><span class="icon-subway bg-lexington-avenue mx-1">5</span><span class="icon-subway bg-lexington-avenue mx-1">6</span><span class="icon-subway border-lexington-avenue icon-subway-express mx-1">6<span class="sr-only">Express</span></span></div>
<p class="mb-0 flex justify-between">Trunk<code>lexington-avenue</code></p>
</div>
</div>
</div>
<div class="flex flex-col justify-between items-center border border-color-grey-lightest p-2">
<div class="w-full">
<div class="text-font-size-small">
<h3 class="text-font-size-small capitalize mb-2">flushing</h3>
<div class="text-font-size-normal py-4 text-center bg-color-grey-lightest px-2 mb-2 flex items-center justify-center" style="min-height:150px"><span class="icon-subway bg-flushing mx-1">7</span><span class="icon-subway border-flushing icon-subway-express mx-1">7<span class="sr-only">Express</span></span></div>
<p class="mb-0 flex justify-between">Trunk<code>flushing</code></p>
</div>
</div>
</div>
<div class="flex flex-col justify-between items-center border border-color-grey-lightest p-2">
<div class="w-full">
<div class="text-font-size-small">
<h3 class="text-font-size-small capitalize mb-2">shuttles</h3>
<div class="text-font-size-normal py-4 text-center bg-color-grey-lightest px-2 mb-2 flex items-center justify-center" style="min-height:150px"><span class="icon-subway bg-shuttles mx-1">S</span></div>
<p class="mb-0 flex justify-between">Trunk<code>shuttles</code></p>
</div>
</div>
</div>
<div> </div>
</div>
</div>
</div>
</section>
<div class="sticky bottom-0 bg-color-white shadow-up relative z-10 overflow-y-scroll whitespace-no-wrap animated fadeInUp">
<nav class="nav-inline text-font-size-small p-4"><span class="mr-4">Jump to:</span><a class="mr-4" href="#program-category-icons">Program Category Icons</a><a class="mr-4" href="#program-card-icons">Program Card Icons</a><a class="mr-4" href="#checklist-category-icons">Checklist Category Icons</a><a class="mr-4" href="#logos">Logos</a><a class="mr-4" href="#ui-icons">UI Icons</a><a class="mr-4" href="#icon-usage">Icon Usage</a><a class="mr-4" href="#subway-icons">Subway Icons</a></nav>
</div>
</article>
</main>
</div>
<footer class="py-4 text-center color-dark-background">
<p>
<nav><a class="px-1" href="index">Home</a><a class="px-1" href="about">About</a><a class="px-1" href="installation">Installation</a><a class="px-1" href="design-tools">Design Tools</a><a class="px-1" href="developer-tools">Developer Tools</a></nav>
</p>
<p>Maintained by <a href="https://nyc.gov/opportunity">NYC Opportunity</a></p>
<p class="m-0">
<nav><a class="px-1" href="https://github.com/orgs/CityOfNewYork/teams/nycopportunity">GitHub</a><a class="px-1" href="https://twitter.com/nycopportunity">Twitter</a><a class="px-1" href="https://www.facebook.com/NYCOpportunity">Facebook</a><a class="px-1" href="https://www.instagram.com/nycopportunity">Instagram</a></nav>
</p>
</footer>
<script src="scripts/polyfills.js"></script>
<script src="scripts/access-nyc.js"></script>
<script src="scripts/vue-components.js"></script>
<script type="text/javascript">
var access = new AccessNyc();
var VueComponents = new VueComponents();
access.icons();
access.toggle();
access.alertBanner();
</script>
</body>
</html>