Footer

Examples

Default

<footer id="cads-footer" class="cads-footer">
  <div class="cads-grid-container">
    <div class="cads-grid-row">
      <div class="cads-grid-col">
        <p class="cads-footer__feedback">
          <a class="cads-footer__hyperlink js-cads-footer-feedback" target="_blank" rel="noopener" aria-label=" (opens in a new tab)" href="https://www.research.net/r/J8PLH2H">Is there anything wrong with this page? Let us know</a>
        </p>
      </div>
    </div>
    <nav class="cads-footer__navigation" aria-label="Footer Navigation">
      <div class="cads-grid-row">
        <div class="cads-grid-col-md-3" data-testid="footer-column">
          <h2 class="cads-footer__section-title">Advice</h2>
          <ul class="cads-footer__links">
            <li class="cads-footer__link">
              <a class="cads-footer__hyperlink" href="/benefits/">Benefits</a>
            </li>
            <li class="cads-footer__link">
              <a class="cads-footer__hyperlink" href="/work/">Work</a>
            </li>
            <li class="cads-footer__link">
              <a class="cads-footer__hyperlink" href="/debt-and-money/">Debt and Money</a>
            </li>
            <li class="cads-footer__link">
              <a class="cads-footer__hyperlink" href="/consumer/">Consumer</a>
            </li>
            <li class="cads-footer__link">
              <a class="cads-footer__hyperlink" href="/family/">Family</a>
            </li>
            <li class="cads-footer__link">
              <a class="cads-footer__hyperlink" href="/housing/">Housing</a>
            </li>
            <li class="cads-footer__link">
              <a class="cads-footer__hyperlink" href="/law-and-courts/">Law and courts</a>
            </li>
            <li class="cads-footer__link">
              <a class="cads-footer__hyperlink" href="/immigration/">Immigration</a>
            </li>
            <li class="cads-footer__link">
              <a class="cads-footer__hyperlink" href="/health/">Health</a>
            </li>
          </ul>
        </div>
        <div class="cads-grid-col-md-3" data-testid="footer-column">
          <h2 class="cads-footer__section-title">Resources and tools</h2>
          <ul class="cads-footer__links">
            <li class="cads-footer__link">
              <a class="cads-footer__hyperlink" href="/about-us/how-citizens-advice-works/products-and-services/adviser-resources/">Advisor resources</a>
            </li>
            <li class="cads-footer__link">
              <a class="cads-footer__hyperlink" href="/about-us/how-we-provide-advice/our-prevention-work/education/">Education resources</a>
            </li>
            <li class="cads-footer__link">
              <a class="cads-footer__hyperlink" href="/resources-and-tools/about-this-site/accessibility/">Accessibility</a>
            </li>
            <li class="cads-footer__link">
              <a class="cads-footer__hyperlink" href="/resources-and-tools/about-this-site/accessibility/">Site search</a>
            </li>
            <li class="cads-footer__link">
              <a class="cads-footer__hyperlink" href="/resources-and-tools/search-navigation-tools/a-to-z-of-advice/">A-Z of advice</a>
            </li>
          </ul>
        </div>
        <div class="cads-grid-col-md-3" data-testid="footer-column">
          <h2 class="cads-footer__section-title">More from us</h2>
          <ul class="cads-footer__links">
            <li class="cads-footer__link">
              <a class="cads-footer__hyperlink" href="/about-us/">About us</a>
            </li>
            <li class="cads-footer__link">
              <a class="cads-footer__hyperlink" href="/about-us/how-citizens-advice-works/who-we-are-and-what-we-do/annual-reports/">Annual reports</a>
            </li>
            <li class="cads-footer__link">
              <a class="cads-footer__hyperlink" href="/about-us/contact-us/contact-us/contact-us/">Contact us</a>
            </li>
            <li class="cads-footer__link">
              <a class="cads-footer__hyperlink" href="/about-us/contact-us/contact-us/make-a-complaint-about-us/">Complaints</a>
            </li>
            <li class="cads-footer__link">
              <a class="cads-footer__hyperlink" href="/about-us/how-citizens-advice-works/media/">Media</a>
            </li>
            <li class="cads-footer__link">
              <a class="cads-footer__hyperlink" href="/about-us/policy/">Policy research</a>
            </li>
            <li class="cads-footer__link">
              <a class="cads-footer__hyperlink" href="/about-us/support-us/">Support us</a>
            </li>
            <li class="cads-footer__link">
              <a class="cads-footer__hyperlink" href="/about-us/support-us/volunteering/">Volunteering</a>
            </li>
            <li class="cads-footer__link">
              <a class="cads-footer__hyperlink" href="/about-us/how-citizens-advice-works/job-and-voluntary-opportunities/">Jobs</a>
            </li>
          </ul>
        </div>
        <div class="cads-grid-col-md-3" data-testid="footer-column">
          <h2 class="cads-footer__section-title">About Citizens Advice</h2>
          <ul class="cads-footer__links">
            <li class="cads-footer__link">
              <a class="cads-footer__hyperlink" href="/about-us/how-we-provide-advice/">How we provide advice</a>
            </li>
            <li class="cads-footer__link">
              <a class="cads-footer__hyperlink" href="/about-us/difference-we-make/">The difference we make</a>
            </li>
            <li class="cads-footer__link">
              <a class="cads-footer__hyperlink" href="/about-us/support-us/">Support us</a>
            </li>
            <li class="cads-footer__link">
              <a class="cads-footer__hyperlink" href="/about-us/how-citizens-advice-works/">How Citizens Advice works</a>
            </li>
            <li class="cads-footer__link">
              <a class="cads-footer__hyperlink" href="/resources-and-tools/about-this-site/disclaimer-and-copyright/">Disclaimer and Copyright</a>
            </li>
            <li class="cads-footer__link">
              <a class="cads-footer__hyperlink" href="/about-us/citizens-advice-privacy-policy/">Privacy and cookies</a>
            </li>
          </ul>
        </div>
      </div>
    </nav>
    <div class="cads-footer__company-info">
      <div class="cads-footer__logo">
        <a class="cads-logo" href="/" title="Citizens Advice homepage"></a>
      </div>
      <div class="cads-footer__meta">
        <p class="cads-footer__meta-text" data-testid="copyright">Copyright ©2024 Citizens Advice. All rights reserved.</p>
        <p class="cads-footer__meta-text" data-testid="legal-summary">Citizens Advice is an operating name of the National Association of Citizens Advice Bureaux. Registered charity number 279057. VAT number 726 0202 76. Company limited by guarantee. Registered number 01436945 England. Registered office: Citizens Advice, 3rd Floor, 1 Easton Street, London, WC1X 0DW</p>
      </div>
    </div>
  </div>
</footer>

<%= render CitizensAdviceComponents::Footer.new do |c|
  c.with_feedback_link(url: "https://www.research.net/r/J8PLH2H", new_tab: true)
  c.with_column(
    title: "Advice",
    links: [
      { url: "/benefits/", title: "Benefits" },
      { url: "/work/", title: "Work" },
      { url: "/debt-and-money/", title: "Debt and Money" },
      { url: "/consumer/", title: "Consumer" },
      { url: "/family/", title: "Family" },
      { url: "/housing/", title: "Housing" },
      { url: "/law-and-courts/", title: "Law and courts" },
      { url: "/immigration/", title: "Immigration" },
      { url: "/health/", title: "Health" }
    ]
  )
  c.with_column(
    title: "Resources and tools",
    links: [
      { url: "/about-us/how-citizens-advice-works/products-and-services/adviser-resources/", title: "Advisor resources" },
      { url: "/about-us/how-we-provide-advice/our-prevention-work/education/", title: "Education resources" },
      { url: "/resources-and-tools/about-this-site/accessibility/", title: "Accessibility" },
      { url: "/resources-and-tools/about-this-site/accessibility/", title: "Site search" },
      { url: "/resources-and-tools/search-navigation-tools/a-to-z-of-advice/", title: "A-Z of advice" }
    ]
  )
  c.with_column(
    title: "More from us",
    links: [
      { url: "/about-us/", title: "About us" },
      { url: "/about-us/how-citizens-advice-works/who-we-are-and-what-we-do/annual-reports/", title: "Annual reports" },
      { url: "/about-us/contact-us/contact-us/contact-us/", title: "Contact us" },
      { url: "/about-us/contact-us/contact-us/make-a-complaint-about-us/", title: "Complaints" },
      { url: "/about-us/how-citizens-advice-works/media/", title: "Media" },
      { url: "/about-us/policy/", title: "Policy research" },
      { url: "/about-us/support-us/", title: "Support us" },
      { url: "/about-us/support-us/volunteering/", title: "Volunteering" },
      { url: "/about-us/how-citizens-advice-works/job-and-voluntary-opportunities/", title: "Jobs" }
    ]
  )
  c.with_column(
    title: "About Citizens Advice",
    links: [
      { url: "/about-us/how-we-provide-advice/", title: "How we provide advice" },
      { url: "/about-us/difference-we-make/", title: "The difference we make" },
      { url: "/about-us/support-us/", title: "Support us" },
      { url: "/about-us/how-citizens-advice-works/", title: "How Citizens Advice works" },
      { url: "/resources-and-tools/about-this-site/disclaimer-and-copyright/", title: "Disclaimer and Copyright" },
      { url: "/about-us/citizens-advice-privacy-policy/", title: "Privacy and cookies" }
    ]
  )
end %>

Minimal

Open example in a new tab

<footer id="cads-footer" class="cads-footer">
  <div class="cads-grid-container">
    <div class="cads-footer__company-info">
      <div class="cads-footer__logo">
        <a class="cads-logo" href="/" title="Citizens Advice homepage"></a>
      </div>
      <div class="cads-footer__meta">
        <p class="cads-footer__meta-text" data-testid="copyright">Copyright ©2024 Citizens Advice. All rights reserved.</p>
        <p class="cads-footer__meta-text" data-testid="legal-summary">Citizens Advice is an operating name of the National Association of Citizens Advice Bureaux. Registered charity number 279057. VAT number 726 0202 76. Company limited by guarantee. Registered number 01436945 England. Registered office: Citizens Advice, 3rd Floor, 1 Easton Street, London, WC1X 0DW</p>
      </div>
    </div>
  </div>
</footer>

<%= render CitizensAdviceComponents::Footer.new %>

Using with Rails

If you are using the citizens_advice_components gem, you can call the component from within a template using:

<%= render CitizensAdviceComponents::Footer.new do |c|
  c.with_feedback_link(url: "https://www.research.net/r/J8PLH2H", new_tab: true)
  c.with_column(
    title: "Advice",
    links: [
      { url: "/benefits/", title: "Benefits" },
      { url: "/work/", title: "Work" },
      { url: "/debt-and-money/", title: "Debt and Money" },
      { url: "/consumer/", title: "Consumer" },
      { url: "/family/", title: "Family" },
      { url: "/housing/", title: "Housing" },
      { url: "/law-and-courts/", title: "Law and courts" },
      { url: "/immigration/", title: "Immigration" },
      { url: "/health/", title: "Health" }
    ]
  )
  c.with_column(
    title: "Resources and tools",
    links: [
      { url: "/about-us/how-citizens-advice-works/products-and-services/adviser-resources/", title: "Advisor resources" },
      { url: "/about-us/how-we-provide-advice/our-prevention-work/education/", title: "Education resources" },
      { url: "/resources-and-tools/about-this-site/accessibility/", title: "Accessibility" },
      { url: "/resources-and-tools/about-this-site/accessibility/", title: "Site search" },
      { url: "/resources-and-tools/search-navigation-tools/a-to-z-of-advice/", title: "A-Z of advice" }
    ]
  )
  c.with_column(
    title: "More from us",
    links: [
      { url: "/about-us/", title: "About us" },
      { url: "/about-us/how-citizens-advice-works/who-we-are-and-what-we-do/annual-reports/", title: "Annual reports" },
      { url: "/about-us/contact-us/contact-us/contact-us/", title: "Contact us" },
      { url: "/about-us/contact-us/contact-us/make-a-complaint-about-us/", title: "Complaints" },
      { url: "/about-us/how-citizens-advice-works/media/", title: "Media" },
      { url: "/about-us/policy/", title: "Policy research" },
      { url: "/about-us/support-us/", title: "Support us" },
      { url: "/about-us/support-us/volunteering/", title: "Volunteering" },
      { url: "/about-us/how-citizens-advice-works/job-and-voluntary-opportunities/", title: "Jobs" }
    ]
  )
  c.with_column(
    title: "About Citizens Advice",
    links: [
      { url: "/about-us/how-we-provide-advice/", title: "How we provide advice" },
      { url: "/about-us/difference-we-make/", title: "The difference we make" },
      { url: "/about-us/support-us/", title: "Support us" },
      { url: "/about-us/how-citizens-advice-works/", title: "How Citizens Advice works" },
      { url: "/resources-and-tools/about-this-site/disclaimer-and-copyright/", title: "Disclaimer and Copyright" },
      { url: "/about-us/citizens-advice-privacy-policy/", title: "Privacy and cookies" }
    ]
  )
end %>

Component arguments

The constructor accepts the following properties

Argument	Description
Argument `homepage_url`	Description Optional, defaults to `/`

Feedback link slot

The component accepts a feedback_link slot to render an optional feedback link. The slot accepts the following named arguments:

Argument	Description
Argument `title`	Description Optional, title for the column
Argument `url`	Description Required, feedback URL

Column slots

The component accepts up to four column slots. These can either be passed on at a time like in the example above, or by iterating through an array e.g.

<%= render CitizensAdviceComponents::Footer.new do |c|
  c.with_columns(columns)
end %>

Each slot accepts the following named arguments:

Argument	Description
Argument `title`	Description Required, title for the column
Argument `links`	Description Required, an array of hashes, each with the following:
Argument `link[:url]`	Description → Required, url for the link
Argument `link[:title]`	Description → Required, title for the link
Argument `link[:new_tab]`	Description → Optional, should this link open in a new tab?

Legal summary slot

The component accepts legal_summary to render a customised text at the bottom of the footer. The slot requires a text string.

If the slot is not provided, the legal summary will display default text.

Questions and contributions

All design system discussions take place in the #design-system Slack channel. For current issues, roadmap and other info see the Github project board and related issues.