Footer

A website footer is the section at the very end of a webpage. It often contains helpful links and important information, such as:

Contact information so people can get in touch with you.
Navigation links for links to key pages, like "About Us," "Privacy Policy," or "Accessibility."
Social media buttons that take you to the website's social media profiles.
Copyright showing who owns the website content and the year it was last updated.

Code

Content explaining our footer.

      <footer>
      <p>A product of the California Design System.</p>
      <ca-flex format="footer-split-links">
        <ul class="social-icon-list">
          <li>
            <a href="#">
              <ca-pic icon="mail" format="social"></ca-pic>
              <span class="visually-hidden">Email</span>
            </a>
          </li>
          <li>
            <a href="#">
              <ca-pic icon="facebook" format="social"></ca-pic>
              <span class="visually-hidden">Facebook</span>
            </a>
          </li>
          <li>
            <a href="#">
              <ca-pic icon="linked-in" format="social"></ca-pic>
              <span class="visually-hidden">LinkedIn</span>
            </a>
          </li>
          <li>
            <a href="#">
              <ca-pic icon="x-dot-com" format="social"></ca-pic>
              <span class="visually-hidden">X.com</span>
            </a>
          </li>
          <li>
            <a href="#">
              <ca-pic icon="youtube" format="social"></ca-pic>
              <span class="visually-hidden">YouTube</span>
            </a>
          </li>
        </ul>
      </ca-flex>
      <hr>
      <ca-flex format="footer-split-links">
      <ul class="compliance-link-list">
        <li class="flex-basis-full">
          <a href="https://www.ca.gov/images/WebsiteAccessibilityCert-ca.gov.pdf">Website Accessibility Certification</a>
        </li>
        <li>
          <a href="/California-Design-System/pages/conditions-of-use">Conditions of use</a>
        </li>
        <li>
          <a href="/California-Design-System/pages/privacy">Privacy</a>
        </li>
        <li>
          <a href="/California-Design-System/pages/accessibility">Accessibility</a>
        </li>
        <li>
          <a href="/California-Design-System/pages/sitemap">Sitemap</a>
        </li>
      </ul>
    </ca-flex><ca-flex format="footer-end">
    <ca-flex format="copyright-stamp">
      <ca-pic icon="ca-bear" format="footer-bear"></ca-pic>
      <p>An official California state website.</p>
      <p>© <ca-current-year>2025</ca-current-year> State of California</p>
    </ca-flex>
    <ca-flex format="footer-utility">
      <a href="#">
        <ca-pic icon="help" format="utility"></ca-pic>
        <span class="visually-hidden">Help</span>
      </a>
      <a href="#">
        <ca-pic icon="back-to-top" format="utility"></ca-pic>
        <span class="visually-hidden">Back to top</span>
      </a>
    </ca-flex>
  </ca-flex>
</footer>

Anatomy

footer that provides structure for your footer content.
ca-grid with Eureka Design System product stamp and nav list for social media links that are optional.
ca-footer-links containing policy and accessibility certification links along with CA.gov branding and site copyright.
ca-footer-end containing copyright, website help that’s optional, and back-to-top button.

Minimalist

Expanded

Branded

Usage

Do

I made a change.

Don't

Responsive footers

footer that provides structure for your footer content.
ca-grid with Eureka Design System product stamp and nav list for social media links that are optional.
ca-footer-links containing policy and accessibility certification links along with CA.gov branding and site copyright.
ca-footer-end containing copyright, website help that’s optional, and back-to-top button.

Minimalist

Expanded

Branded

Developer notes

Tags, attributes, classes	Description
`footer`
`ca-grid`
`ca-footer-links`
`ca-social-links`
`ca-footer-end`
`ca-current-year`
`ca-utility-icon`
`ca-pic`
`name=""`
`.visually-hidden`

Accessibility

Element or property	Description
`footer`
`ca-grid`
`ca-footer-links`
`ca-social-links`
`ca-footer-end`
`ca-current-year`
`ca-utility-icon`
`ca-pic`
`name=""`
`.visually-hidden`

Changelog

Date	Version	Affects	Notes
MM/DD/YYYY	0.0.0.0	Something	This is the first release.