Attribution (Footer)
Demonstration
Code
The Attribution Pattern is a footer element for digital products by the Mayor’s Office for Economic Opportunity and its partners. It includes a byline, several NYC logo lockups, NYC trademark, copyright information, NYC.gov terms of use, and privacy policy. This Pattern helps our office establish credibility and trust with our resources and highlights partnerships we maintain to deliver services.
The Pattern should use the role attribute with the value of contentinfo to identify the element as the page footer for screen readers.
The Pattern may include tertiary footer navigation that restates or expands on the available items found in the Navigation or Menu Patterns.
The Pattern may use the “Learn More” toggle to show a summary of the Mayor’s Office for Economic Opportunity and its partners. The “Learn More” region will be hidden from screen readers using the aria-hidden attribute. Potentially focusable children will have their tabindex attribute set to -1 when the region is hidden.
You may replace the “Learn More” toggle with an “About” link if it links to a page containing more information about our office and partner offices. You may also omit it if there is a similar “About” link in the tertiary navigation.
Following the NYC Logo Technical Guidelines, the Pattern uses the “Partnership within City agencies–horizontal” lockup to highlight more than one agency responsible for the website’s creation and maintenance.
The following line must be present where the “NYC” mark is used in public to protect the intellectual property of the City and combat misuse of the logo.
“The NYC mark is a trademark and service mark of the City of New York.”
Additionally, a reference to the nyc.gov terms of service also reinforces its terms of use. See section IV. INTELLECTUAL PROPERTY in the nyc.gov terms of service.
Section IV. states (which may have been updated since the writing of this document) the following.
“The City respects the intellectual property of others and it asks its users to do the same. Service marks and trademarks contained in or displayed on NYC.gov, and the contents of linked sites operated by third parties, are the property of their respective owners (which may be the City). All other design, information, text, graphics, images, pages, interfaces, links, software, and other items and materials contained in or displayed on NYC.gov, and the selection and arrangements thereof, are the property of the City of New York. All rights are reserved.”
The following demonstration shows the Navigation, Menu, and Attribution global elements within the mobile viewport.
The Attribution may be used by either the global stylesheet or module import.
Global Stylesheet and JavaScript
The Attribution 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">
The “Learn More” toggle in the Attribution requires JavaScript for showing, hiding, and screen reader accessibility. To initialize the Attribution instance from the global script use the following code:
<script src="https://cdn.jsdelivr.net/gh/nycopportunity/standard@v0.0.20/dist/js/default.js"></script> <script> var Standard = new Default(); Standard.attribution(); </script>
This function will attach the “Learn More” toggling event to the body of the document.
Stylesheet and JavaScript Module Import
The Attribution includes two stylesheets. One sets the default design tokens using CSS Custom Properties, and another adds custom styles.
@forward '@nycopportunity/pattern-attribution/src/tokens.css'; @forward '@nycopportunity/standard/objects/attribution/_attribution.scss';
The Attribution JavaScript source exists in the Pattern Attribution module, which is a dependency of the Opportunity Standard.
import Attribution from '@nycopportunity/pattern-attribution/src/attribution'; new Attribution();