Fintech Banking Homepage Template

A warm, light homepage template for a digital bank, built with Bootstrap 6 for a fictional bank called Larkfield. It fits neobanks and fintech apps.

How it works

Everything sits inside .lf-page, which pins data-bs-theme="light" and maps the Bootstrap 6 primary role to forest green and the accent role to coral, so btn-solid theme-primary and btn-solid theme-accent pick up the brand.

Navbar: navbar lg:navbar-expand with a <dialog class="drawer drawer-end"> for mobile. "Accounts" opens a .menu with icons and descriptions. The script syncs the toggler's aria-expanded and closes the drawer after an in-page link.
Hero: a rounded forest panel (.lf-hero) with a centered serif headline and .lf-band, three app cards (balance with a bar chart, a payment card, a savings ring drawn with conic-gradient).
Accounts: nav nav-pills tabs switch Personal, Joint and Business panes, each with a photo, price and tick list.
Card controls: btn-check radio swatches recolor the [data-lf-card] preview, and three Bootstrap 6 .switch toggles freeze the card or change the status text in a polite live region.
Savings calculator: two auto-initialised .form-range sliders and a pot-type radio group feed a monthly-compounding formula. The result panel shows balance, deposits and interest.
Stories: a rating summary and three quote cards.
Open account: a stepper explains the process next to a <form data-bs-validate novalidate>. The password field uses the Bootstrap 6 Strength meter (data-bs-strength). On submit the script flags invalid fields, simulates the request and reveals the .lf-success alert.
Help and footer: an exclusive <details name="lf-faq"> accordion and a footer with a legal placeholder.

Customization

Change --lf-forest, --lf-mint and --lf-coral in .lf-page (style.css), and the --bs-primary-* / --bs-accent-* overrides next to them, to rebrand.
Add a card colour: copy a .lf-swatch label with a new value, add a .lf-plastic-{value} rule with --lf-card-a / --lf-card-b, and add the name to colors in script.js.
Adjust min, max and step on #lf-monthly and #lf-months, or the value of each lf-rate radio, to match your products.
Replace the setTimeout in the .lf-form submit handler with fetch() to your onboarding API.
Edit .lf-legal in the footer with your licence and deposit protection wording.
The photos come from Unsplash; replace them with your own images.

Accessibility

A skip link jumps to #lf-main. The decorative hero band is aria-hidden, tabs use role="tab" with aria-selected, switches carry role="switch", and swatches are real radio inputs with hidden labels. Calculator and card status updates are announced politely, and focus moves to the success alert after sign-up. Transitions stop under prefers-reduced-motion.

Bootstrap 6 notes

Built on Bootstrap 6.0.0-alpha.1 (alpha APIs can still change). Coming from Bootstrap 5: color variants are btn-solid plus a theme-* role, the navbar collapses into a Drawer, Dropdown is now Menu, checkboxes are .check and switches .switch, ranges need the .form-range wrapper, <select> uses form-control, accordions are native <details>, and validation needs only data-bs-validate. The Strength meter and Range are new Bootstrap 6 components that initialise from markup.