As of January 3rd, 2023 the ACCESS NYC Pattern library package is deprecated in favor of the NYC Opportunity Standard which contains updated user interface elements and usability guidance.
Emails
Below is an example of the results email sent by the ACCESS NYC Screener. The full email source can be viewed here.
<!DOCTYPE html>
<html dir="ltr" lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<title>Find help in NYC with food, money, housing, work and more.</title>
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type" />
<!--[if !mso]><!-- -->
<meta content="IE=edge" http-equiv="X-UA-Compatible">
<!--<![endif]-->
<meta content="width=device-width, initial-scale=1" name="viewport" />
<style type="text/css">
#outlook a {
padding: 0;
}
.ReadMsgBody {
width: 100%;
}
.ExternalClass {
width: 100%;
}
.ExternalClass * {
line-height: 100%;
}
body {
margin: 0;
padding: 0;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
table,
td {
border-collapse: collapse;
mso-table-lspace: 0;
mso-table-rspace: 0;
}
img {
border: 0;
height: auto;
line-height: 100%;
outline: none;
text-decoration: none;
-ms-interpolation-mode: bicubic;
}
p {
display: block;
margin: 0 0 16px;
}
</style>
<!--[if !mso]><!-->
<style type="text/css">
@media only screen and(max-width: 480px) {
@-ms-viewport {
width: 320px;
}
@viewport {
width: 320px;
}
}
</style>
<!--<![endif]-->
<!--[if mso]><xml> <o:OfficeDocumentSettings> <o:AllowPNG/> <o:PixelsPerInch>96</o:PixelsPerInch> </o:OfficeDocumentSettings></xml><![endif]-->
<!--[if lte mso 11]><style type="text/css"> .outlook-group-fix { width:100% !important; }</style><![endif]-->
<style type="text/css">
@media only screen and(min-width: 480px) {
.mj-column-per-100 {
width: 100% !important;
}
}
</style>
</head>
<body style="background: #ffffff;">
<div style="background-color: #ffffff;">
<!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0" width="600" align="center" style="width: 600px;"><tr><td style="line-height:0px; font-size:0px; mso-line-height-rule:exactly;"><![endif]-->
<div style="margin: 0px auto; max-width: 600px; background: #122f50;">
<table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="font-size: 0px; width: 100%; background: #122f50; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility;">
<tbody>
<tr>
<td style="text-align: center; vertical-align: top; direction: ltr; font-size: 0px; padding: 24px;">
<!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td style="vertical-align:top;width:600px;"><![endif]-->
<div class="mj-column-per-100 outlook-group-fix" style="vertical-align: top; display: inline-block; direction: ltr; font-size: 13px; text-align: left; width: 100%;">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%">
<tbody>
<tr>
<td align="left" style="word-break: break-word; font-size: 0px; padding: 0px;">
<table align="left" border="0" cellpadding="0" cellspacing="0" role="presentation" style="border-collapse: collapse; border-spacing: 0px;">
<tbody>
<tr>
<td style="width:250px;">
<a href="https://access.nyc.gov" target="_blank">
<img alt="" height="auto" src="https://access.nyc.gov/wp-content/themes/access/assets/img/email/access-logo.png" style="border:none;display:block;outline:none;text-decoration:none;width:100%;height:auto;" title="" width="250" />
</a>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td align="left" style="word-break: break-word; font-size: 0px; padding: 32px 0px 0px 0px;">
<table bgcolor="#122f50" border="0" cellpadding="0" cellspacing="0" style="cellspacing: 0px; color: #000; font-family: Georgia, serif; font-size: 0; line-height: 0; table-layout: auto; height: 5px" width="100%">
<tr style="height: 5px">
<td bgcolor="#fbb720" height="5" style="background: #fbb720; padding: 0; font-size: 0; line-height: 0; height: 5px" width="130">
<img alt="ACCESS NYC logo" height="5" src="https://access.nyc.gov/wp-content/themes/access/assets/img/email/spacer-trans.png" style="display: block;" />
</td>
<td bgcolor="#122f50" height="5" style="height: 5px;" valign="middle">
<table bgcolor="#122f50" border="0" cellpadding="0" cellspacing="0" style="height: 1px;" width="100%">
<tr>
<td bgcolor="#ffffff" height="1" style="height: 1px; font-size: 0; line-height: 0;">
<img height="1" src="https://access.nyc.gov/wp-content/themes/access/assets/img/email/spacer-white.png" style="display: block;" />
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td align="left" style="word-break: break-word; font-size: 0px; padding: 24px 0px 0px 0px;">
<div style="cursor: auto; color: #ffffff; font-family: Georgia, serif; font-size: 19px; font-weight: bold; line-height: 1.5; text-align: left;">
<h1 class="hero-text" style="font-size: 32px; font-weight: normal; margin: 0; margin-bottom: 24">Find help in NYC with food, money, housing, work and more.</h1>
</div>
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]></td></tr></table><![endif]-->
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]></td></tr></table><![endif]-->
<!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0" width="600" align="center" style="width:600px;"><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
<div style="margin: 0px auto; max-width: 600px;">
<table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="font-size:0px; width:100%;">
<tbody>
<tr>
<td style="text-align: center; vertical-align: top; direction: ltr; font-size: 0px; padding: 0px;">
<!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td style="vertical-align: top; width: 600px;"><![endif]-->
<div class="mj-column-per-100 outlook-group-fix" style="vertical-align:top; display:inline-block; direction: ltr; font-size: 13px; text-align:left; width:100%;">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%">
<tbody>
<tr>
<td align="left" style="word-break: break-word; font-size: 0px; padding: 24px;">
<div style="cursor: auto; color:#000000; font-family: "Open Sans", Helvetica Neue, Helvetica, sans-serif; font-size: 19px; font-weight: normal; line-height: 1.5; text-align: left;">
<p>You recently completed a questionnaire on <a href='https://access.nyc.gov/' style='color: #184e9e;' target='_blank'>ACCESS NYC</a>, the website for finding help with food, money, housing, work, and more.</p>
<p>These are the programs that you may be eligible for:</p>
<div class="wp-block-access-smnyc-email-button">
<table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%">
<tbody>
<tr>
<td align="center" style="word-break:break-word;font-size:0px">
<table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="border-collapse: separate; padding: 16px 0px 32px; float: none">
<tbody>
<tr>
<td align="center" bgcolor="#156b3d" style="border: none; border-radius: 10px; color: #ffffff; cursor: auto; padding:16px 24px" valign="middle">
<a href="https://access.nyc.gov/eligibility/results" style="text-decoration: none; line-height: 100%; background: #156b3d; color: #ffffff; font-family: Trebuchet MS, sans-serif; font-size: 20px; font-weight: bold; text-transform: none; margin: 0px" target="_blank">Your Results ❯</a>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
<p>Have questions? <a href='http://on.nyc.gov/accessnyc-contact-us' style='color: #184E9E;' target='_blank'>Contact us</a>.</p>
</div>
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]></td></tr></table><![endif]-->
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]></td></tr></table><![endif]-->
<!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0" width="600" align="center" style="width: 600px;"><tr><td style="line-height: 0px; font-size: 0px; mso-line-height-rule: exactly; "><![endif]-->
<div style="margin: 0px auto; max-width: 600px; background: #ecf1f5;">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" style="font-size: 0px; width: 100%; background: #ecf1f5;" width="100%">
<tbody>
<tr>
<td style="text-align: center; vertical-align: top; border-top: 7px solid #122f50; direction: ltr; font-size: 0px; padding: 0px;">
<!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td style="vertical-align: top; width: 600px;"><![endif]-->
<div class="mj-column-per-100 outlook-group-fix" style="vertical-align: top; display: inline-block; direction: ltr; font-size: 13px; text-align: left; width: 100%;">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%">
<tbody>
<tr>
<td align="left" style="word-break: break-word; font-size: 0px; padding: 24px;">
<table border="0" cellpadding="0" cellspacing="0" style="cellspacing: 0px; color: #000; font-family: Georgia, serif; font-size: 19px; line-height: 1.5; table-layout: auto;" width="100%">
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td style="padding-right: 15px;" valign="top">
<img height="27" src="https://access.nyc.gov/wp-content/themes/access/assets/img/email/nyc-logo.png" style="display: block;" width="80" />
</td>
<td style="color: #333333; font-size: 12px; font-family: "Trebuchet MS", "sans-serif"; width: 100%; text-align: left">
<div style="line-height: 85%; margin-bottom: 4px;">© City of New York 2023 All Rights Reserved.</div>
<div>NYC is a trademark and service mark of the City of New York.</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]></td></tr></table><![endif]-->
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]></td></tr></table><![endif]-->
</div>
<script src="/reload/reload.js"></script>
</body>
</html>