Open demo

CSS code

HTML 
<footer class="fg">
  <div class="fg-in">
    <nav class="fg-cols" aria-label="Footer">
      <div><h2>Products</h2><ul><li><a href="#">Current accounts</a></li><li><a href="#">Savings</a></li><li><a href="#">Business</a></li></ul></div>
      <div><h2>Support</h2><ul><li><a href="#">Help centre</a></li><li><a href="#">Complaints</a></li><li><a href="#">Financial difficulty</a></li></ul></div>
      <div><h2>Legal</h2><ul><li><a href="#">Terms</a></li><li><a href="#">Privacy notice</a></li><li><a href="#">Cookie policy</a></li></ul></div>
      <div><h2>Company</h2><ul><li><a href="#">About</a></li><li><a href="#">Modern slavery</a></li><li><a href="#">Gender pay gap</a></li></ul></div>
    </nav>
    <ul class="fg-badges" aria-label="Accreditations">
      <li><svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M12 3l7 3v5c0 4.5-3 8.3-7 10-4-1.7-7-5.5-7-10V6z"/></svg> FSCS protected</li>
      <li><svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M5 13l4 4L19 7"/></svg> FCA regulated</li>
      <li><svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><rect x="4" y="10" width="16" height="10" rx="2"/><path d="M8 10V7a4 4 0 018 0v3"/></svg> ISO 27001</li>
      <li><svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><circle cx="12" cy="12" r="9"/><path d="M12 8v5"/></svg> GDPR compliant</li>
    </ul>
    <div class="fg-small">
      <p><strong>Ledgerline Financial Ltd</strong> is registered in England and Wales (company number 00000000). Registered office: 1 Example Street, Bath BA1 1AA.</p>
      <p>Authorised and regulated by the Financial Conduct Authority (firm reference number 000000). Eligible deposits are protected by the Financial Services Compensation Scheme up to £120,000 per eligible depositor.</p>
      <p>Your capital is at risk. The value of investments can fall as well as rise and you may get back less than you invested. Past performance is not a guide to future performance.</p>
    </div>
    <div class="fg-base">
      <p>© Ledgerline Financial Ltd.</p>
      <ul>
        <li><button class="fg-cookie" type="button">Cookie preferences</button></li>
        <li><a href="#">Accessibility</a></li>
        <li><a href="#">Sitemap</a></li>
      </ul>
    </div>
  </div>
</footer>
CSS 
/* Regulated-business footer: four link columns, accreditation badges, the small print a regulator
   expects, and a legal bar with a cookie-preferences button. Replace the sample company details with yours. */
.fg{background:#f4f6f8;border-top:1px solid #dfe4ea;color:#5b6572;padding:38px 34px 22px}
.fg,.fg *{box-sizing:border-box}
:where(.fg) a{color:inherit;text-decoration:none}
:where(.fg) ul{list-style:none;margin:0;padding:0}
:where(.fg) :is(p,h2){margin:0}
.fg a:focus-visible,.fg button:focus-visible{outline:2px solid #0f766e;outline-offset:2px}
.fg-in{max-width:1080px;margin:0 auto}
.fg-cols{display:grid;grid-template-columns:repeat(4,1fr);gap:28px;margin-bottom:30px}
.fg h2{color:#1b2430;font-size:.75rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;margin-bottom:12px}
.fg-cols ul{display:flex;flex-direction:column;gap:8px;font-size:.84rem}
.fg-cols a:hover,.fg-base a:hover{color:#1b2430;text-decoration:underline}
.fg-badges{display:flex;gap:9px;flex-wrap:wrap;margin-bottom:24px}
.fg-badges li{display:inline-flex;align-items:center;gap:8px;background:#fff;border:1px solid #dfe4ea;
  border-radius:9px;padding:8px 12px;font-size:.76rem;font-weight:700;color:#1b2430}
.fg-badges svg{width:15px;height:15px;stroke:#0f766e;fill:none;stroke-width:2.2}
.fg-small{font-size:.78rem;line-height:1.7;border-top:1px solid #dfe4ea;padding-top:20px}
.fg-small p+p{margin-top:10px}
.fg-small strong{color:#1b2430}
.fg-base{margin-top:20px;padding-top:16px;border-top:1px solid #dfe4ea;display:flex;justify-content:space-between;
  gap:14px;flex-wrap:wrap;font-size:.79rem;align-items:center}
.fg-base ul{display:flex;gap:16px;flex-wrap:wrap;align-items:center}
.fg-cookie{border:1px solid #7d8898;background:#fff;font:inherit;font-size:.79rem;font-weight:700;color:#1b2430;
  padding:7px 13px;border-radius:8px;cursor:pointer}
.fg-cookie:hover{background:#eef1f5}
@media (max-width:800px){.fg-cols{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.fg{padding:36px 20px 22px}.fg-cols{grid-template-columns:1fr}}

Bootstrap 5 code

Requires: Bootstrap 5.3.8 CSS

HTML 
<footer class="fg border-top">
  <div class="fg-in">
    <nav aria-label="Footer">
      <div class="row row-cols-1 row-cols-sm-2 row-cols-md-4 g-4 mb-4 pb-1">
        <div class="col"><h2>Products</h2><ul class="nav flex-column"><li class="nav-item"><a class="nav-link" href="#">Current accounts</a></li><li class="nav-item"><a class="nav-link" href="#">Savings</a></li><li class="nav-item"><a class="nav-link" href="#">Business</a></li></ul></div>
        <div class="col"><h2>Support</h2><ul class="nav flex-column"><li class="nav-item"><a class="nav-link" href="#">Help centre</a></li><li class="nav-item"><a class="nav-link" href="#">Complaints</a></li><li class="nav-item"><a class="nav-link" href="#">Financial difficulty</a></li></ul></div>
        <div class="col"><h2>Legal</h2><ul class="nav flex-column"><li class="nav-item"><a class="nav-link" href="#">Terms</a></li><li class="nav-item"><a class="nav-link" href="#">Privacy notice</a></li><li class="nav-item"><a class="nav-link" href="#">Cookie policy</a></li></ul></div>
        <div class="col"><h2>Company</h2><ul class="nav flex-column"><li class="nav-item"><a class="nav-link" href="#">About</a></li><li class="nav-item"><a class="nav-link" href="#">Modern slavery</a></li><li class="nav-item"><a class="nav-link" href="#">Gender pay gap</a></li></ul></div>
      </div>
    </nav>
    <ul class="fg-badges list-unstyled d-flex flex-wrap gap-2 mb-4" aria-label="Accreditations">
      <li class="badge"><svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M12 3l7 3v5c0 4.5-3 8.3-7 10-4-1.7-7-5.5-7-10V6z"/></svg> FSCS protected</li>
      <li class="badge"><svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M5 13l4 4L19 7"/></svg> FCA regulated</li>
      <li class="badge"><svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><rect x="4" y="10" width="16" height="10" rx="2"/><path d="M8 10V7a4 4 0 018 0v3"/></svg> ISO 27001</li>
      <li class="badge"><svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><circle cx="12" cy="12" r="9"/><path d="M12 8v5"/></svg> GDPR compliant</li>
    </ul>
    <div class="fg-small border-top pt-3">
      <p class="mb-0"><strong>Ledgerline Financial Ltd</strong> is registered in England and Wales (company number 00000000). Registered office: 1 Example Street, Bath BA1 1AA.</p>
      <p class="mb-0">Authorised and regulated by the Financial Conduct Authority (firm reference number 000000). Eligible deposits are protected by the Financial Services Compensation Scheme up to £120,000 per eligible depositor.</p>
      <p class="mb-0">Your capital is at risk. The value of investments can fall as well as rise and you may get back less than you invested. Past performance is not a guide to future performance.</p>
    </div>
    <div class="fg-base border-top d-flex flex-wrap justify-content-between align-items-center gap-3 mt-3 pt-3">
      <p class="mb-0">© Ledgerline Financial Ltd.</p>
      <ul class="nav align-items-center">
        <li class="nav-item"><button class="btn fg-cookie" type="button">Cookie preferences</button></li>
        <li class="nav-item"><a class="nav-link" href="#">Accessibility</a></li>
        <li class="nav-item"><a class="nav-link" href="#">Sitemap</a></li>
      </ul>
    </div>
  </div>
</footer>
CSS 
/* Bootstrap grid, .nav.flex-column lists, .badge accreditations and a .btn for cookie preferences,
   restyled through --bs-* variables. Replace the sample company details with yours. */
.fg{--bs-border-color:#dfe4ea;background:#f4f6f8;color:#5b6572;padding:38px 34px 22px}
.fg a{text-decoration:none}
.fg a:focus-visible,.fg .btn:focus-visible{outline:2px solid #0f766e;outline-offset:2px;box-shadow:none}
.fg-in{max-width:1080px;margin:0 auto}
.fg h2{color:#1b2430;font-size:.75rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;margin-bottom:12px;line-height:normal}
.fg .nav{--bs-nav-link-color:#5b6572;--bs-nav-link-hover-color:#1b2430;--bs-nav-link-padding-x:0;--bs-nav-link-padding-y:0;
  --bs-nav-link-font-size:.84rem;gap:8px}
.fg .nav-link:hover{text-decoration:underline}
.fg-badges .badge{--bs-badge-font-size:.76rem;--bs-badge-font-weight:700;--bs-badge-padding-x:12px;--bs-badge-padding-y:8px;
  --bs-badge-color:#1b2430;--bs-badge-border-radius:9px;display:inline-flex;align-items:center;gap:8px;background:#fff;
  border:1px solid #dfe4ea;line-height:normal}
.fg-badges svg{width:15px;height:15px;stroke:#0f766e;fill:none;stroke-width:2.2}
.fg-small{font-size:.78rem;line-height:1.7}
.fg-small p+p{margin-top:10px}
.fg-small strong{color:#1b2430}
.fg-base{font-size:.79rem}
.fg-base .nav{--bs-nav-link-font-size:.79rem;gap:16px}
.fg-cookie{--bs-btn-bg:#fff;--bs-btn-color:#1b2430;--bs-btn-border-color:#7d8898;--bs-btn-hover-bg:#eef1f5;--bs-btn-hover-color:#1b2430;
  --bs-btn-hover-border-color:#7d8898;--bs-btn-active-bg:#eef1f5;--bs-btn-active-color:#1b2430;--bs-btn-active-border-color:#7d8898;
  --bs-btn-font-size:.79rem;--bs-btn-font-weight:700;--bs-btn-padding-x:13px;--bs-btn-padding-y:7px;--bs-btn-border-radius:8px;
  --bs-btn-line-height:normal}
@media (max-width:575.98px){.fg{padding:36px 20px 22px}}

Tailwind 4 code

Requires: Tailwind CSS 4

HTML 
<footer class="border-t border-[#dfe4ea] bg-[#f4f6f8] px-5 pt-9 pb-[22px] text-[#5b6572] min-[521px]:px-[34px] min-[521px]:pt-[38px]">
  <div class="mx-auto max-w-[1080px]">
    <nav class="mb-[30px] grid grid-cols-1 gap-7 min-[521px]:grid-cols-2 min-[801px]:grid-cols-4 [&_a]:hover:text-[#1b2430] [&_a]:hover:underline [&_a]:focus-visible:outline-2 [&_a]:focus-visible:outline-offset-2 [&_a]:focus-visible:outline-[#0f766e]" aria-label="Footer">
      <div><h2 class="mb-3 text-[.75rem] font-extrabold tracking-[.08em] text-[#1b2430] uppercase">Products</h2><ul class="flex flex-col gap-2 text-[.84rem]"><li><a href="#">Current accounts</a></li><li><a href="#">Savings</a></li><li><a href="#">Business</a></li></ul></div>
      <div><h2 class="mb-3 text-[.75rem] font-extrabold tracking-[.08em] text-[#1b2430] uppercase">Support</h2><ul class="flex flex-col gap-2 text-[.84rem]"><li><a href="#">Help centre</a></li><li><a href="#">Complaints</a></li><li><a href="#">Financial difficulty</a></li></ul></div>
      <div><h2 class="mb-3 text-[.75rem] font-extrabold tracking-[.08em] text-[#1b2430] uppercase">Legal</h2><ul class="flex flex-col gap-2 text-[.84rem]"><li><a href="#">Terms</a></li><li><a href="#">Privacy notice</a></li><li><a href="#">Cookie policy</a></li></ul></div>
      <div><h2 class="mb-3 text-[.75rem] font-extrabold tracking-[.08em] text-[#1b2430] uppercase">Company</h2><ul class="flex flex-col gap-2 text-[.84rem]"><li><a href="#">About</a></li><li><a href="#">Modern slavery</a></li><li><a href="#">Gender pay gap</a></li></ul></div>
    </nav>
    <ul class="mb-6 flex flex-wrap gap-[9px] [&>li]:inline-flex [&>li]:items-center [&>li]:gap-2 [&>li]:rounded-[9px] [&>li]:border [&>li]:border-[#dfe4ea] [&>li]:bg-white [&>li]:px-3 [&>li]:py-2 [&>li]:text-[.76rem] [&>li]:font-bold [&>li]:text-[#1b2430] [&_svg]:size-[15px] [&_svg]:fill-none [&_svg]:stroke-[#0f766e] [&_svg]:stroke-[2.2]" aria-label="Accreditations">
      <li><svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M12 3l7 3v5c0 4.5-3 8.3-7 10-4-1.7-7-5.5-7-10V6z"/></svg> FSCS protected</li>
      <li><svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M5 13l4 4L19 7"/></svg> FCA regulated</li>
      <li><svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><rect x="4" y="10" width="16" height="10" rx="2"/><path d="M8 10V7a4 4 0 018 0v3"/></svg> ISO 27001</li>
      <li><svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><circle cx="12" cy="12" r="9"/><path d="M12 8v5"/></svg> GDPR compliant</li>
    </ul>
    <div class="space-y-2.5 border-t border-[#dfe4ea] pt-5 text-[.78rem] leading-[1.7]">
      <p><strong class="text-[#1b2430]">Ledgerline Financial Ltd</strong> is registered in England and Wales (company number 00000000). Registered office: 1 Example Street, Bath BA1 1AA.</p>
      <p>Authorised and regulated by the Financial Conduct Authority (firm reference number 000000). Eligible deposits are protected by the Financial Services Compensation Scheme up to £120,000 per eligible depositor.</p>
      <p>Your capital is at risk. The value of investments can fall as well as rise and you may get back less than you invested. Past performance is not a guide to future performance.</p>
    </div>
    <div class="mt-5 flex flex-wrap items-center justify-between gap-3.5 border-t border-[#dfe4ea] pt-4 text-[.79rem]">
      <p>© Ledgerline Financial Ltd.</p>
      <ul class="flex flex-wrap items-center gap-4 [&_a]:hover:text-[#1b2430] [&_a]:hover:underline [&_a]:focus-visible:outline-2 [&_a]:focus-visible:outline-offset-2 [&_a]:focus-visible:outline-[#0f766e]">
        <li><button class="cursor-pointer rounded-lg border border-[#7d8898] bg-white px-[13px] py-[7px] text-[.79rem] font-bold text-[#1b2430] hover:bg-[#eef1f5] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#0f766e]" type="button">Cookie preferences</button></li>
        <li><a href="#">Accessibility</a></li>
        <li><a href="#">Sitemap</a></li>
      </ul>
    </div>
  </div>
</footer>

About this set

A light footer for a bank, lender, insurer or any regulated business that has to show small print on every page. Four link columns (Products, Support, Legal, Company) come first, including the pages regulated firms usually link from the footer such as complaints, financial difficulty, modern slavery and gender pay gap. A row of outlined badges lists accreditations with small icons (FSCS protected, FCA regulated, ISO 27001, GDPR compliant). Three paragraphs of small print follow: the registered company details, the authorisation and deposit-protection statement, and a capital-at-risk warning. The legal bar holds a Cookie preferences button, so visitors can reopen your consent dialog at any time, plus Accessibility and Sitemap links. Use it as a starting point for a UK-style financial services site. The company number, firm reference and address are placeholders; replace them, the badges and the wording with what applies to your business and check it with your compliance team. The deposit-protection figure reflects the FSCS limit of £120,000 that applies from December 2025.

What’s included

  • Four link columns covering the pages regulated firms usually link
  • Accreditation badges with icons, grouped in a labelled list
  • Three paragraphs of small print with placeholder company details
  • Cookie preferences button in the legal bar
  • Button border darkened to meet 3:1 against the footer

Accessibility

Link columns sit in a nav labelled Footer under h2 headings, and the badges are a list labelled Accreditations with aria-hidden icons. Cookie preferences is a real button, not a link, ready for your consent script. Links and the button show a 2px teal outline on keyboard focus, and the small print reaches 5.4:1 on #f4f6f8.

Customise it

Change #f4f6f8 (background), #0f766e (icons and focus) and #7d8898 (button border) in the .fg rules. In Bootstrap the button colours are --bs-btn-* on .fg-cookie and the badges use --bs-badge-*; in Tailwind edit the bg-[#f4f6f8] and stroke-[#0f766e] utilities. Replace every placeholder number and address.