access-nyc-patterns
Version:
User Interface Patterns for Benefits Access
658 lines (656 loc) • 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 cla