Footer
On this page
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="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</a>
</li>
<li class="cads-footer__link">
<a class="cads-footer__hyperlink" href="#">Work</a>
</li>
<li class="cads-footer__link">
<a class="cads-footer__hyperlink" href="#">Debt and Money</a>
</li>
<li class="cads-footer__link">
<a class="cads-footer__hyperlink" href="#">Consumer</a>
</li>
<li class="cads-footer__link">
<a class="cads-footer__hyperlink" href="#">Family</a>
</li>
<li class="cads-footer__link">
<a class="cads-footer__hyperlink" href="#">Housing</a>
</li>
<li class="cads-footer__link">
<a class="cads-footer__hyperlink" href="#">Law and courts</a>
</li>
<li class="cads-footer__link">
<a class="cads-footer__hyperlink" href="#">Immigration</a>
</li>
<li class="cads-footer__link">
<a class="cads-footer__hyperlink" href="#">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="#">Advisor resources</a>
</li>
<li class="cads-footer__link">
<a class="cads-footer__hyperlink" href="#">Education resources</a>
</li>
<li class="cads-footer__link">
<a class="cads-footer__hyperlink" href="#">Accessibility</a>
</li>
<li class="cads-footer__link">
<a class="cads-footer__hyperlink" href="#">Site search</a>
</li>
<li class="cads-footer__link">
<a class="cads-footer__hyperlink" href="#">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</a>
</li>
<li class="cads-footer__link">
<a class="cads-footer__hyperlink" href="#">Annual reports</a>
</li>
<li class="cads-footer__link">
<a class="cads-footer__hyperlink" href="#">Contact us</a>
</li>
<li class="cads-footer__link">
<a class="cads-footer__hyperlink" href="#">Complaints</a>
</li>
<li class="cads-footer__link">
<a class="cads-footer__hyperlink" href="#">Media</a>
</li>
<li class="cads-footer__link">
<a class="cads-footer__hyperlink" href="#">Policy research</a>
</li>
<li class="cads-footer__link">
<a class="cads-footer__hyperlink" href="#">Support us</a>
</li>
<li class="cads-footer__link">
<a class="cads-footer__hyperlink" href="#">Volunteering</a>
</li>
<li class="cads-footer__link">
<a class="cads-footer__hyperlink" href="#">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="#">How we provide advice</a>
</li>
<li class="cads-footer__link">
<a class="cads-footer__hyperlink" href="#">The difference we make</a>
</li>
<li class="cads-footer__link">
<a class="cads-footer__hyperlink" href="#">Support us</a>
</li>
<li class="cads-footer__link">
<a class="cads-footer__hyperlink" href="#">How Citizens Advice works</a>
</li>
<li class="cads-footer__link">
<a class="cads-footer__hyperlink" href="#">Disclaimer and Copyright</a>
</li>
<li class="cads-footer__link">
<a class="cads-footer__hyperlink" href="#">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 ©2026 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: "#", title: "Benefits" },
{ url: "#", title: "Work" },
{ url: "#", title: "Debt and Money" },
{ url: "#", title: "Consumer" },
{ url: "#", title: "Family" },
{ url: "#", title: "Housing" },
{ url: "#", title: "Law and courts" },
{ url: "#", title: "Immigration" },
{ url: "#", title: "Health" }
]
) %>
<% c.with_column(
title: "Resources and tools",
links: [
{ url: "#", title: "Advisor resources" },
{ url: "#", title: "Education resources" },
{ url: "#", title: "Accessibility" },
{ url: "#", title: "Site search" },
{ url: "#", title: "A-Z of advice" }
]
) %>
<% c.with_column(
title: "More from us",
links: [
{ url: "#", title: "About us" },
{ url: "#", title: "Annual reports" },
{ url: "#", title: "Contact us" },
{ url: "#", title: "Complaints" },
{ url: "#", title: "Media" },
{ url: "#", title: "Policy research" },
{ url: "#", title: "Support us" },
{ url: "#", title: "Volunteering" },
{ url: "#", title: "Jobs" }
]
) %>
<% c.with_column(
title: "About Citizens Advice",
links: [
{ url: "#", title: "How we provide advice" },
{ url: "#", title: "The difference we make" },
{ url: "#", title: "Support us" },
{ url: "#", title: "How Citizens Advice works" },
{ url: "#", title: "Disclaimer and Copyright" },
{ url: "#", title: "Privacy and cookies" }
]
) %>
<% end %>
Minimal
<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 ©2026 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 %>
With text in a column
<footer id="cads-footer" class="cads-footer">
<div class="cads-grid-container">
<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</a>
</li>
<li class="cads-footer__link">
<a class="cads-footer__hyperlink" href="#">Work</a>
</li>
<li class="cads-footer__link">
<a class="cads-footer__hyperlink" href="#">Debt and Money</a>
</li>
<li class="cads-footer__link">
<a class="cads-footer__hyperlink" href="#">Consumer</a>
</li>
<li class="cads-footer__link">
<a class="cads-footer__hyperlink" href="#">Family</a>
</li>
<li class="cads-footer__link">
<a class="cads-footer__hyperlink" href="#">Housing</a>
</li>
<li class="cads-footer__link">
<a class="cads-footer__hyperlink" href="#">Law and courts</a>
</li>
<li class="cads-footer__link">
<a class="cads-footer__hyperlink" href="#">Immigration</a>
</li>
<li class="cads-footer__link">
<a class="cads-footer__hyperlink" href="#">Health</a>
</li>
</ul>
</div>
<div class="cads-grid-col-md-3" data-testid="footer-column">
<h2 class="cads-footer__section-title">Connect with us</h2>
<ul class="cads-footer__links">
<li class="cads-footer__link">
<a class="cads-footer__hyperlink" href="https://example.com">Twitter</a>
</li>
<li class="cads-footer__link">
<a class="cads-footer__hyperlink" href="https://example.com">Facebook</a>
</li>
<li class="cads-footer__link">
<a class="cads-footer__hyperlink" href="https://example.com">YouTube</a>
</li>
</ul>
</div>
<div class="cads-grid-col-md-3" data-testid="footer-column">
<h2 class="cads-footer__section-title">Citizens Advice network</h2>
<p class="cads-footer__text">Our network provides advice in 2,500 locations across England and Wales.</p>
<p class="cads-footer__text">We have over 21,500 volunteers supporting the delivery of our work alongside 7,000 paid staff.</p>
<p class="cads-footer__text">Our service is worth at least £750 million to society.</p>
<ul class="cads-footer__links">
<li class="cads-footer__link">
<a class="cads-footer__hyperlink" href="#">More about Citizens Advice</a>
</li>
</ul>
</div>
<div class="cads-grid-col-md-3" data-testid="footer-column">
<h2 class="cads-footer__section-title">About this site</h2>
<ul class="cads-footer__links">
<li class="cads-footer__link">
<a class="cads-footer__hyperlink" href="#">Accessibility statement</a>
</li>
<li class="cads-footer__link">
<a class="cads-footer__hyperlink" href="#">Terms and conditions</a>
</li>
<li class="cads-footer__link">
<a class="cads-footer__hyperlink" href="#">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 ©2026 Citizens Advice. All rights reserved.</p>
<p class="cads-footer__meta-text" data-testid="legal-summary">Citizens Advice Edenbridge & Westerham is the operating name of Edenbridge & Westerham Citizens Advice Bureau. Authorised and regulated by the Financial Conduct Authority. FRN: 620747. Charity registration number: 1155993. Company number: 8880174. Registered office: The Eden Centre, Four Elms Road, EDENBRIDGE, Kent, TN8 6BY</p>
</div>
</div>
</div>
</footer>
<%= render CitizensAdviceComponents::Footer.new do |c| %>
<% c.with_column(
title: "Advice",
links: [
{ url: "#", title: "Benefits" },
{ url: "#", title: "Work" },
{ url: "#", title: "Debt and Money" },
{ url: "#", title: "Consumer" },
{ url: "#", title: "Family" },
{ url: "#", title: "Housing" },
{ url: "#", title: "Law and courts" },
{ url: "#", title: "Immigration" },
{ url: "#", title: "Health" }
]
) %>
<% c.with_column(
title: "Connect with us",
links: [
{ url: "https://example.com", title: "Twitter" },
{ url: "https://example.com", title: "Facebook" },
{ url: "https://example.com", title: "YouTube" }
]
) %>
<% c.with_column(
title: "Citizens Advice network",
text_lines: [
"Our network provides advice in 2,500 locations across England and Wales.",
"We have over 21,500 volunteers supporting the delivery of our work alongside 7,000 paid staff.",
"Our service is worth at least £750 million to society."
],
links: [
{ url: "#", title: "More about Citizens Advice" }
]
) %>
<% c.with_column(
title: "About this site",
links: [
{ url: "#", title: "Accessibility statement" },
{ url: "#", title: "Terms and conditions" },
{ url: "#", title: "Privacy and cookies" }
]
) %>
<% c.with_legal_summary("Citizens Advice Edenbridge & Westerham is the operating name of Edenbridge & Westerham Citizens Advice Bureau. Authorised and regulated by the Financial Conduct Authority. FRN: 620747. Charity registration number: 1155993. Company number: 8880174. Registered office: The Eden Centre, Four Elms Road, EDENBRIDGE, Kent, TN8 6BY") %>
<% end %>
With an additional logo
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: "#", title: "Benefits" },
{ url: "#", title: "Work" },
{ url: "#", title: "Debt and Money" },
{ url: "#", title: "Consumer" },
{ url: "#", title: "Family" },
{ url: "#", title: "Housing" },
{ url: "#", title: "Law and courts" },
{ url: "#", title: "Immigration" },
{ url: "#", title: "Health" }
]
) %>
<% c.with_column(
title: "Resources and tools",
links: [
{ url: "#", title: "Advisor resources" },
{ url: "#", title: "Education resources" },
{ url: "#", title: "Accessibility" },
{ url: "#", title: "Site search" },
{ url: "#", title: "A-Z of advice" }
]
) %>
<% c.with_column(
title: "More from us",
links: [
{ url: "#", title: "About us" },
{ url: "#", title: "Annual reports" },
{ url: "#", title: "Contact us" },
{ url: "#", title: "Complaints" },
{ url: "#", title: "Media" },
{ url: "#", title: "Policy research" },
{ url: "#", title: "Support us" },
{ url: "#", title: "Volunteering" },
{ url: "#", title: "Jobs" }
]
) %>
<% c.with_column(
title: "About Citizens Advice",
links: [
{ url: "#", title: "How we provide advice" },
{ url: "#", title: "The difference we make" },
{ url: "#", title: "Support us" },
{ url: "#", title: "How Citizens Advice works" },
{ url: "#", title: "Disclaimer and Copyright" },
{ url: "#", 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 Optional, 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? |
Argument
text_lines
|
Description Optional, an array of lines of text to be included below the header |
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.
Additional logo slot
The component accepts additional_logo to render additional content alongside the legal text in the footer. This is intended
for including additional regulator or other important logos, such as the Fundraising Regulator.
Questions and contributions
For National Citizens Advice staff you can find us in the #design-system channel on Slack. For open issues, roadmap, and source code see the GitHub project.