Opportunity Standard

The Application Banner Pattern follows the guidance for City’s single sign-on service (SSO), “NYC.ID,” integrated applications. The Pattern is required as a global element when the application uses “NYC.ID.” You can find further guidance on the “NYC.ID” Documentation site.

The look and feel of NYC.ID coordinates with NYC.gov, and includes two elements: 1) An application header—required; displays the NYC.gov logo and your application name, and includes a few other items. 2) An application brand banner—optional, but recommended; displays your application logo.

The application header is black banner that must appear at the very top—above all content and navigation elements—of all pages within your application. The application header has two configurations. 1) Anonymous: The user is not logged in. NYC.ID Authenticated: The user is logged in with a NYC.ID account.

The “Log In,” “Log Out,” and “Profile” links are not required in the Pattern if they are present in the Navigation and Menu Patterns.

The City’s single sign-on service (SSO), “NYC.ID,” is used by multiple City websites and applications for user authentication. New users of your application may have an account already. Using patterns from these websites and applications may help reduce sign-up and log-in flow friction.

For most City websites, “NYC.ID” is referred to as “NYC Account” (as opposed to “NYC.ID Account”). Copy and other references in “NYC.ID” integrated applications should refer to “NYC.ID” this way. For example, “log in using your NYC account.”

The most notable integration is ACCESS HRA. It may be beneficial to encourage new users of your application to use their “ACCESS HRA Account.” For example, “you can also use your ACCESS HRA account to sign in.”

You can find a list of other NYC.ID integrations here.

The following demonstration shows the Application Header, Navigation, Menu, and Attribution global elements within the mobile viewport.

View the global elements demonstration at full screen.

The Application Header may be used by either the global stylesheet or module import.

Global Stylesheet

The Application Header will display correctly with the global stylesheet.

<link href="https://cdn.jsdelivr.net/gh/nycopportunity/standard@v0.0.20/dist/css/default.css" rel="stylesheet">

Stylesheet Module Import

The Application Header source exists in the Pattern Application Header module, which is a dependency of the Opportunity Standard. It includes two stylesheets. One sets the default design tokens using CSS Custom Properties, and another adds custom styles.

@forward '@nycopportunity/pattern-application-header/src/tokens.css';
@forward '@nycopportunity/pattern-application-header/src/_attribution.scss';