Attribution (Footer)

Global Elements Demonstration Anchor Link Global Elements Demonstration

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

View the global elements demonstration at full screen.

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();