@cagov/ds-statewide-footer

v2.0.1

Published

2 months ago

The statewide footer puts a standard footer at the very bottom of your site. Having a common footer tells people that the website is an official product of the State of California, which increases user trust.

Downloads

799

0High
0Medium
0Low

Statewide footer

It always includes:

The CA.gov logo on the left that links to the CA.gov site.
A set of standard links:
- Conditions of use
- Privacy policy
- Accessibility
- Contact page for your organization
The copyright notice. It appears at the very bottom of the statewide footer.

When and how to use it

The statewide footer is a required Design System component. Place it at the bottom of the website, below the agency footer and all other content.

Provide a contact page that's relevant to your site. Do not send them to the general CA.gov contact page unless it's appropriate to do so.

Do not add other types of links to the statewide footer. Add them to the site footer instead.

How not to use it

Do not add other elements to or change the statewide footer. Use it only as designed.

Do not combine the statewide footer with site logo, site links (including a contact page), or social media icons. These are contained in the site footer.

Demo and sample markup

<footer>
  <div class="bg-light-grey">
    <div class="container">
      <a href="https://ca.gov" class="cagov-logo" title="ca.gov" rel="noopener noreferrer" target="_blank">
        <svg title="ca.gov icon" width="33px" height="24px" viewBox="0 0 44 34">
          <path class="ca" d="M27.4,14c0.1-0.4,0.4-1.5,0.9-3.2c0.1-0.5,0.4-1.3,0.9-2.7c0.5-1.4,0.9-2.5,1.2-3.3c-0.9,0.6-1.8,1.4-2.7,2.3 c-3.2,3.5-6.9,7.6-8.3,9.8c0.5-0.1,1.5-1.2,4.7-2.3C26.3,14,27.4,14,27.4,14L27.4,14z M26.9,16.2c-10.1,0-14.5,16.1-21.6,16.1 c-1.6,0-2.8-0.7-3.7-2.1c-0.6-0.9-0.8-2-0.8-3.1c0-2.9,1.4-6.7,4.2-11.1c2.4-3.8,4.9-6.9,7.5-9.2c2.3-2,4.2-3,5.9-3 c0.9,0,1.6,0.3,2.1,1C20.8,5.2,21,5.8,21,6.5c0,1.3-0.4,2.8-1.3,4.5c-0.8,1.5-1.7,2.8-2.9,3.9c-0.8,0.8-1.4,1.1-1.8,1.1 c-0.3,0-0.6-0.1-0.8-0.4c-0.2-0.2-0.3-0.4-0.3-0.7c0-0.5,0.4-1,1.2-1.6c1.2-0.9,2.1-1.8,2.8-2.9c1-1.5,1.5-2.8,1.5-3.8 c0-0.4-0.1-0.7-0.3-0.9c-0.2-0.2-0.5-0.3-0.8-0.3c-0.7,0-1.8,0.5-3.2,1.6c-1.6,1.2-3.2,2.9-5,5C8,14.8,6.3,17.4,5.2,20 c-1.2,2.7-1.8,5-1.8,6.9c0,0.9,0.3,1.7,0.8,2.3c0.6,0.7,1.3,1.1,2.1,1.1c3.2-0.1,7.2-7.4,8.4-9.1C27,4.3,27.9,4.3,29.8,2.5 c1.1-1,1.9-1.6,2.5-1.6c0.4,0,0.7,0.1,0.9,0.4c0.2,0.3,0.3,0.5,0.3,0.9c0,0.4-0.2,1-0.6,2c-0.7,1.7-1.3,3.5-1.9,5.4 c-0.5,1.7-0.9,3-1,3.9c0.2,0,0.4,0,0.5,0c0.4,0,0.7,0,1,0c0.8,0,1.2,0.3,1.2,0.9c0,0.3-0.1,0.5-0.3,0.8c-0.2,0.3-0.4,0.4-0.6,0.5 c-0.1,0-0.3,0-0.7,0c-0.8,0-1.4,0-1.7,0.1c-0.1,0.4-0.5,4.1-1.1,4.2C26.7,21.5,26.8,16.7,26.9,16.2L26.9,16.2z" />
          <g>
            <path class="gov" d="M16.8,27.2c0.4,0,0.8,0.2,1.1,0.5c0.3,0.3,0.5,0.7,0.5,1.1c0,0.4-0.2,0.8-0.5,1.1c-0.3,0.3-0.7,0.5-1.1,0.5 c-0.4,0-0.8-0.2-1.1-0.5c-0.3-0.3-0.5-0.7-0.5-1.1c0-0.4,0.2-0.8,0.5-1.1C16,27.4,16.4,27.2,16.8,27.2L16.8,27.2z" />
            <path class="gov" d="M26.7,22.9l-1.1,1.1c-0.7-0.8-1.5-1.1-2.5-1.1c-0.8,0-1.5,0.3-2.1,0.8c-0.6,0.6-0.8,1.2-0.8,2 c0,0.8,0.3,1.5,0.9,2.1c0.6,0.6,1.3,0.8,2.2,0.8c0.6,0,1-0.1,1.4-0.3c0.4-0.2,0.7-0.6,0.9-1.1h-2.4v-1.5h4.2l0,0.4 c0,0.7-0.2,1.4-0.6,2.1c-0.4,0.7-0.9,1.2-1.5,1.5c-0.6,0.3-1.3,0.5-2.1,0.5c-0.9,0-1.7-0.2-2.3-0.6c-0.7-0.4-1.2-0.9-1.6-1.6 c-0.4-0.7-0.6-1.5-0.6-2.3c0-1.1,0.4-2.1,1.1-2.9c0.9-1,2-1.5,3.4-1.5c0.7,0,1.4,0.1,2.1,0.4C25.7,22,26.2,22.4,26.7,22.9 L26.7,22.9z"  />
            <path class="gov" d="M32.2,21.4c1.2,0,2.2,0.4,3.1,1.3c0.9,0.9,1.3,1.9,1.3,3.2c0,1.2-0.4,2.3-1.3,3.1c-0.8,0.9-1.9,1.3-3.1,1.3 c-1.3,0-2.3-0.4-3.2-1.3c-0.8-0.9-1.3-1.9-1.3-3.1c0-0.8,0.2-1.5,0.6-2.2c0.4-0.7,0.9-1.2,1.6-1.6C30.7,21.5,31.4,21.4,32.2,21.4 L32.2,21.4z M32.2,22.9c-0.8,0-1.4,0.3-2,0.8c-0.5,0.5-0.8,1.2-0.8,2.1c0,0.9,0.3,1.7,1,2.2c0.5,0.4,1.1,0.6,1.8,0.6 c0.8,0,1.4-0.3,1.9-0.8c0.5-0.6,0.8-1.2,0.8-2c0-0.8-0.3-1.5-0.8-2C33.6,23.2,33,22.9,32.2,22.9L32.2,22.9z" />
            <polygon class="gov" points="36.3,21.6 38,21.6 40.1,27.6 42.2,21.6 43.9,21.6 40.8,30 39.3,30 36.3,21.6" />
          </g>
        </svg>
      </a>
      <div class="footer-secondary-links">
        <a href="https://www.ca.gov">CA.gov home</a>
        <a href="https://www.ca.gov/use/">Conditions of Use</a>
        <a href="https://www.ca.gov/privacy-policy/">Privacy Policy</a>
        <a href="https://www.ca.gov/accessibility/">Accessibility</a>
        <a href="#">Contact Us</a>
      </div>
      <p class="copyright">Copyright &copy;2022 State of California</p>
    </div>
  </div>
</footer>

Specs

| Property | Value | | ------------ | ------------------- | | Machine name | ds-statewide-footer | | JavaScript | no | | SCSS | ./src/index.scss |

Project installation

The instructions assume familiarity with npm package management tool and Sass.

Include SCSS in your compiler.
Add the sample markup from the component to your HTML.
Adjust links as needed.

CDN installation

We recommend using a build system and bundling your CSS for faster performance. If you do not use a build system, you can include the code from our CDN with a link tag.

<link rel="stylesheet" href="https://cdn.designsystem.webstandards.ca.gov/components/ds-statewide-footer/v2.0.1/dist/index.css">

CSS variables

The following CSS variables are used in this component:

--w-lg
--s-1
--s-2
--s-3
--black
--gray-50
--primary-700
--primary-900
--accent2-500
--cagov-highlight
--cagov-primary-dark
--font-size-1

All CSS variables define their own fallback value so you do not have to use additional CSS unless you want to change them. You may define your own value for the variable by adding your own style rules. Here is an example defining the global hex value for a CSS variable named “--primary-700”:

:root {
  --primary-700: #165ac2;
}

Accessibility

Component-specific accessibility review

Make sure that statewide footer’s links have solid, 2px outline that uses --accent2-500 variable on focused state.
Make sure that cagov-logo link has title or aria-label attribute in it, so screen readers users would understand what is that link about.
Make sure that svg icon inside of the cagov-logo has aria-hidden=”true” attribute, so it is hidden from assistive technologies.
Make sure that all statewide footer elements are contained inside of the footer tag, which is a important semantic landmark for assistive technologies.

Standard accessibility review

As a component in Alpha status, this component must pass the following accessibility reviews every time a new version is published:

Tested with the axe accessibility tool and passes all automated WCAG Level AA checks
Reviewed with the VoiceOver screen reader on desktop
Verified keyboard navigation and that all actionable elements of the component are reachable via keyboard commands only
Reviewed component layout on a variety of screen sizes

Progressive enhancement

This is an HTML- and CSS-only component. JavaScript is not required. It uses CSS variables to inherit design token values. Token definitions are not required because these style rules provide fallback values.

Content model

The content for this component is fixed and can be used as-is, as described in the installation instructions.

For the URL links, refer to the latest version of the component for the most up-to-date URLs.

These links are managed by CA.gov. Additional information about these requirements can be found in the CA State Web Standards.

| Page | URL | Required | Order | | --------------------------- | ----------------------------------------- | --------- | ----- | | CA.gov home | https://www.ca.gov | Yes | 1 | | Conditions of use | https://www.ca.gov/use/ | Yes | 2 | | Privacy policy | https://www.ca.gov/privacy-policy/ | Yes | 3 | | Accessibility | https://www.ca.gov/accessibility/ | Yes | 4 |