Footer
Regulated disclosure footer
Dense small print for financial or medical products
Dense small print for financial or medical products
Create a compliance-heavy footer with Tailwind CSS of the kind used by regulated products. Start with a four-column link grid — Accounts, Tools, Company and Support — in the usual quiet style. Below a divider, add a regulatory block: a bordered rounded-xl neutral-50 panel with a small heading reading "Important information", three short paragraphs of dense grey small print covering authorisation and firm reference number, capital-at-risk wording, and deposit protection limits, with two inline underlined links. Under that, a row of three trust marks drawn as bordered pills with glyphs — regulator registration, deposit guarantee scheme and an accessibility statement. Finish with a bottom bar holding the copyright, registered office address, and a "Modern slavery statement" link. Keep every line at text-xs with relaxed leading so the block reads as legible small print rather than a wall. <footer class="border-t border-neutral-200 bg-white">
<div class="mx-auto max-w-6xl px-6 py-14">
<div class="grid gap-10 sm:grid-cols-2 lg:grid-cols-4">
<div>
<p class="text-xs font-semibold uppercase tracking-widest text-neutral-400">Accounts</p>
<ul class="mt-4 space-y-2.5 text-sm text-neutral-500">
<li><a href="#" class="transition hover:text-neutral-900">Current account</a></li>
<li><a href="#" class="transition hover:text-neutral-900">Savings</a></li>
<li><a href="#" class="transition hover:text-neutral-900">Business</a></li>
<li><a href="#" class="transition hover:text-neutral-900">Joint accounts</a></li>
</ul>
</div>
<div>
<p class="text-xs font-semibold uppercase tracking-widest text-neutral-400">Tools</p>
<ul class="mt-4 space-y-2.5 text-sm text-neutral-500">
<li><a href="#" class="transition hover:text-neutral-900">Budgeting</a></li>
<li><a href="#" class="transition hover:text-neutral-900">Rate calculator</a></li>
<li><a href="#" class="transition hover:text-neutral-900">Statements</a></li>
<li><a href="#" class="transition hover:text-neutral-900">Open banking</a></li>
</ul>
</div>
<div>
<p class="text-xs font-semibold uppercase tracking-widest text-neutral-400">Company</p>
<ul class="mt-4 space-y-2.5 text-sm text-neutral-500">
<li><a href="#" class="transition hover:text-neutral-900">About us</a></li>
<li><a href="#" class="transition hover:text-neutral-900">Governance</a></li>
<li><a href="#" class="transition hover:text-neutral-900">Investor relations</a></li>
<li><a href="#" class="transition hover:text-neutral-900">Careers</a></li>
</ul>
</div>
<div>
<p class="text-xs font-semibold uppercase tracking-widest text-neutral-400">Support</p>
<ul class="mt-4 space-y-2.5 text-sm text-neutral-500">
<li><a href="#" class="transition hover:text-neutral-900">Help centre</a></li>
<li><a href="#" class="transition hover:text-neutral-900">Complaints</a></li>
<li><a href="#" class="transition hover:text-neutral-900">Financial difficulty</a></li>
<li><a href="#" class="transition hover:text-neutral-900">Report fraud</a></li>
</ul>
</div>
</div>
<div class="mt-12 rounded-xl border border-neutral-200 bg-neutral-50 p-6">
<p class="text-xs font-semibold uppercase tracking-widest text-neutral-500">Important information</p>
<div class="mt-3 space-y-3 text-xs leading-relaxed text-neutral-500">
<p>Kestrel Financial Ltd is authorised by the Prudential Regulation Authority and regulated by the Financial Conduct Authority and the Prudential Regulation Authority (firm reference number 448210). Details are on the <a href="#" class="underline underline-offset-2 hover:text-neutral-900">Financial Services Register</a>.</p>
<p>The value of investments can fall as well as rise and you may get back less than you put in. Past performance is not a guide to future performance. Tax treatment depends on individual circumstances and may change.</p>
<p>Eligible deposits are protected by the Financial Services Compensation Scheme up to £85,000 per depositor, per banking group. Full terms are set out in our <a href="#" class="underline underline-offset-2 hover:text-neutral-900">deposit guarantee statement</a>.</p>
</div>
</div>
<div class="mt-6 flex flex-wrap gap-2">
<span class="inline-flex items-center gap-1.5 rounded-full border border-neutral-200 px-3 py-1.5 text-xs text-neutral-600"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" class="inline-block h-[1em] w-[1em] shrink-0 align-[-0.125em] transition-transform"><path d="M12 3 4.5 6v5.5c0 4.7 3.2 7.7 7.5 9.5 4.3-1.8 7.5-4.8 7.5-9.5V6L12 3Z"/><path d="m9 12 2 2 4-4"/></svg> FCA 448210</span>
<span class="inline-flex items-center gap-1.5 rounded-full border border-neutral-200 px-3 py-1.5 text-xs text-neutral-600"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" class="inline-block h-[1em] w-[1em] shrink-0 align-[-0.125em] transition-transform"><rect x="3" y="5" width="18" height="4" rx="1"/><path d="M5 9v10h14V9M10 13h4"/></svg> FSCS protected</span>
<span class="inline-flex items-center gap-1.5 rounded-full border border-neutral-200 px-3 py-1.5 text-xs text-neutral-600"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" class="inline-block h-[1em] w-[1em] shrink-0 align-[-0.125em] transition-transform"><circle cx="12" cy="12" r="8"/><circle cx="12" cy="12" r="3"/></svg> WCAG 2.2 AA statement</span>
</div>
<div class="mt-8 flex flex-col gap-3 border-t border-neutral-200 pt-6 text-xs text-neutral-400 sm:flex-row sm:items-center sm:justify-between">
<p>© 2026 Kestrel Financial Ltd · Registered in England 08814402 · 4 Leadenhall Court, London EC3V 1PJ</p>
<a href="#" class="underline underline-offset-4 hover:text-neutral-700">Modern slavery statement</a>
</div>
</div>
</footer>