Alpha

This is an alpha release of our documentation site. View the roadmap.

Footer

On this page

Examples

Default

Open example in a new tab 
<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="Is there anything wrong with this page? Let us know (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 /

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?

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.