Mortgage Broker Website Template
Demo brand: WICKBOURNE MORTGAGE ADVICE · Whole-of-market mortgage broker · 20 routes · Astro 7 + Tailwind 4
Live preview
The demo is a full desktop site. Open it in a new tab ↗
About this mortgage broker website template
A complete website for an independent mortgage broker: a live "what would it cost a month?" card in the hero, a repayment and borrowing calculator suite, five service pages, a fees page, rate-watch notes, an FAQ and a contact form that arrives pre-filled with the client’s numbers. Twenty built pages, all driven by content and data files.
It looks calm and trustworthy. A warm white ground, white cards, one dark band for the fee story, and one raspberry accent. Real home-buying photography carries the colour: Bath stone terraces, keys changing hands, moving boxes and paperwork on a kitchen table. Source Serif 4 for headings, Overpass for everything else.
Every section answers what a buyer asks before calling a broker: what will it cost a month, how much can I borrow, what do you charge and when, why not just go to my bank, and how long does it take. The calculators, the fee table and the broker vs bank comparison do that on the page. Motion is one quiet reveal.
The 20 pages you get
- Home
/ - Hero with the live monthly-cost card, promises, five mortgage types, the fee story, process and week-by-week timeline, the full calculator, broker vs bank comparison, client stories, rate-watch notes, grouped FAQ and a call-to-action.
- Mortgages
/mortgages/ - All five services with their fee, a box of example rates, and a route for cases that fit none of them.
- Service pages
/mortgages/…/ - First-time buyers, remortgage, buy-to-let, self-employed and home movers. Each has key facts, the fee, what to have ready, named steps, a client story, its own FAQ and a calculator preset for that kind of case.
- Calculators
/calculators/ - Monthly repayments and borrowing illustration, the example rates behind them, and what drifting onto the variable rate costs. Opens with numbers passed in the link.
- Fees
/fees/ - The flat fee per kind of case, when it is paid, commission explained, what the fee covers and the broker vs bank table.
- About
/about/ - The firm’s story, four advisers shown by initials rather than face photos, and what the firm will not do.
- Rate watch
/rate-watch/ - Dated notes with a lead article and an example-rates snapshot. Add a Markdown file and it appears here.
- Notes
/rate-watch/…/ - Four written pieces: early repayments, booking a remortgage six months ahead, self-employed income and buy-to-let rental cover.
- FAQ
/faq/ - Open answers grouped by first-time buyers, remortgage and buy-to-let, plus fees and general questions.
- Contact
/contact/ - A call-back form that pre-fills topic, loan, rate, term and a message from any "Book a free call" button, with phone, email and hours.
- Privacy and terms of business
/legal/…/ - Two starter legal pages on a shared layout, with placeholders for your regulator’s wording.
- 404
/404 - Designed, with a way back to the calculators.
What is in the build
- A working calculator suite: repayment or interest-only payments, total interest, what a rate 0.5% lower saves, and an affordability range labelled as an illustration
- A live monthly-cost card in the hero that feeds the full calculator further down the page
- "Book a free call" buttons that carry the client’s numbers into the contact form
- Example rates, income multiples and calculator defaults in one data file; the maths in one small file of pure functions
- Numbers rendered at build time, so every calculator reads correctly before JavaScript loads
- Services and rate-watch notes as content collections; every business fact and every regulatory placeholder line in one file
- Comparison and fee tables that stack row by row on phones instead of scrolling sideways
- Real home-buying photography, optimised by Astro, and one accent colour that rebrands the whole site
- Vitest and Playwright suites included
The design decision
Every template in this catalog is loud in exactly one channel and deliberately quiet in the other three. That single rule is what stops 65 different worlds reading as one design system in different paint.
- The world
- Warm white ground with white cards and one dark band, Source Serif 4 headings over Overpass text, Bath terraces and home-buying photography, one raspberry accent.
- The mechanic
- A live monthly-cost card in the hero feeds a repayment and affordability calculator suite, whose call-booking buttons pre-fill the contact form with the client’s numbers. Motion is one quiet reveal.
- Loud channel
- Imagery
- Imagery. Bath terraces, keys, moving boxes, paperwork
- Type & palette
- Source Serif 4 · Overpass
-
#fbf9f7#1c1718#9f1239
Who it is for
Built for independent and whole-of-market mortgage brokers and small advice firms, and a good fit for protection advisers or later-life lending specialists who want working calculators on their site. It suits a firm that wins clients by being clear about cost: a flat fee, a published process and numbers a visitor can check for themselves.
Under the hood
- Astro 7 · static output, zero client framework
- Tailwind 4 · one @theme block holds the palette
- MDX content collections for the blog
- GSAP + Lenis for the scroll work, reduced-motion aware
- Self-hosted woff2 — no Google Fonts request
- Sitemap, canonicals and per-route meta wired
- Vitest + Playwright suites in the repository
- Zero third-party requests · strict CSP-ready
How to get started
- 01 Accept the repository invite and clone it.
- 02 Run
npm install, thennpm run dev. - 03 Replace the content in
src/data/with your own — that is where the brand, the copy and every list live. - 04 Swap the images in
public/images/and the palette in the@themeblock. - 05 Run
npm run buildand deploydist/anywhere static.
Questions
Are the rates live?
No. They are example rates in one data file, clearly labelled on every calculator with the date they were set. Change the file and rebuild, or connect your own source.
I am regulated. Is the compliance wording included?
The template never names a real regulator or registration number. The risk warning, authorisation line, firm reference and complaints route are placeholders in one file, and the README lists each one to replace. Have your compliance adviser review the copy and the calculators before launch.
Where do enquiries go?
The contact form posts nowhere by default. Point it at your form backend or CRM; the README shows how. The form still fills itself from the calculator links.
Can I use the photographs?
Yes. They are from Pexels, which allows commercial use, and each one is listed with its source in LICENSING.md. None shows a face, a bank logo, an estate-agent board or a readable house number.
What exactly do I get for $49?
Access to a private GitHub repository holding the complete Astro source of this template — every route you see in the preview, the content model, the images and the tests. Updates arrive in that same repository.
How many sites can I build with one licence?
As many as you like, for yourself or for clients. The licence is per buyer, not per project. The one thing you may not do is resell or redistribute the source as a template, theme or starter kit.
Do I need to know Astro?
It helps, but the common case is editing content and colour. Content lives in typed objects under src/data, colour lives in one @theme block, and npm run dev shows the result. Deploying is a static folder — Cloudflare Pages, Netlify and Vercel all take it as-is.
Is anything loaded from a third party?
No. Fonts are self-hosted woff2, there is no analytics, no tag manager, no CDN script and no external CSS. The build ships static HTML under a strict Content-Security-Policy.
More professional services templates
HALLREN Counsel LLP
Corporate & litigation counsel
Loud
Moving set-piece
Sightline Capital
Financial advisory
Loud
Imagery
WARDENBY
Estate agency / lettings
Loud
Imagery
Balsworth & Co.
Chartered accountancy practice
Loud
Imagery
MARLEDGE FINANCIAL PLANNING
Financial planning & advice
Loud
Display type