042
AI ready Refreshed

Financial Advisor Website Template

£29 View live demo or the whole Vault, £79.20

Includes the original v1 design as a separate download.

Seven-page website template for financial planners, accountants, mortgage brokers and any adviser who sells a relationship: the people are the hero, as cut-out portraits on colour shapes. Visitors drag life events onto a kitchen table to build the agenda for a first meeting, and the booking page arrives pre-filled.

ScrollTriggerFlip advanced
11 more details
draggabletouch-dragflip-layoutsnapscroll-revealstaggerview-transitionsinteractive-mapprogressive-enhancementfocus-managementkeyboard-navigation
Open Financial Advisor Template template in new tab

Updated

About this template

A seven-page site for a small advice practice whose product is the people in it. Pennock & Shah is a fictional two-partner, fixed-fee financial planning firm above a bike shop on Kelham Island, Sheffield. The two planners appear as cut-out portraits on paper-textured colour shapes, a family laughs on a bright green sofa in the hero, and the page commits to one grass green with a deep curved band, pink and mint shapes and big printed fees.

Read the full template overview

The home page lets a visitor drag what is going on in their life (a house move, a new baby, an NHS pension, an inheritance) onto a photographed kitchen table. Each item adds a line to an agenda card for the first conversation and to a list of what to bring, and the booking page arrives with those topics already on its own table. Nothing on the site projects anyone's money: the interactions are about the relationship, not forecasts.

The pages are Home, How we work (with a draggable month-by-month year), Fees (fixed fees on cards with an illustrative running total), Who we help (a swipeable deck of illustrative clients), About (partner profiles, ask-the-partners answers, the office and a real street map), Notes with one article and a saved checklist, and Book. Swap the photographs, names, fees and life items and it serves an accountant, mortgage broker or coach.

Financial Advisor Template - website template preview

What's included

13 items
  • Seven plain HTML pages plus one article: Home, How we work, Fees, Who we help, About, Notes, a tax-year checklist article and Book a conversation
  • Kitchen-table agenda builder: drag or tap eight photographed life items onto a table photo; an agenda card and a what-to-bring list build as you go
  • The agenda carries to the booking page in sessionStorage only, never in the URL, and the booking table and topic boxes arrive pre-filled
  • Cut-out partner portraits on paper-textured colour shapes, reused in the home band, About, the booking band and the phone menu
  • Month-by-month year strip with mouse drag, native touch scrolling, a keyboard tablist and previous and next buttons
  • Fixed fees printed large on cards, with a one-person or couple switch and an illustrative running total of one-off and monthly fees
  • Swipeable deck of four illustrative clients, each linked to a fuller first-year story with an add-to-agenda button
  • Ask-the-partners answers with the answering partner stepping forward; a details list without JavaScript
  • MapLibre street map on OpenFreeMap tiles, loaded only as it nears the screen, with a link fallback
  • Notes sorted by life item with Flip, a tax-year checklist saved on the device and a live countdown to 5 April
  • Phone menu as a full-height green sheet with focus trap, Escape, current-page marker and the partners' faces; plain link row without JavaScript
  • 'Not financial advice' notice and a placeholder FRN in every footer
  • Self-hosted Parkinsans and Golos Text, preloaded hero image with phone srcset, and CSS view transitions between pages

Perfect for

5 use cases
  • Independent financial planners and small advice practices
  • Accountants and bookkeepers who sell an ongoing relationship
  • Mortgage brokers and pension specialists
  • Will writers, estate planners and small-business coaches
  • Any consultant website that needs people, process and fixed fees rather than charts

How it works

5 sections

Seven standalone pages

Every page is plain HTML sharing one stylesheet and one script, with a CSS view transition between pages where the browser supports it. Each feature looks for its own data attribute and returns when it is absent, so any section can be deleted. Content is readable with JavaScript off, and a blocked CDN restores the same plain document.

The kitchen table

Each life item is a real button holding a photographed cut-out with its label, the topic it adds and what to bring. Mouse and pen can drag items onto the table photo; touch taps them, so swiping over the tray still scrolls the page. Placed items can be moved or dragged off again, and the agenda card and bring list update in a live region.

Carrying the agenda to booking

The chosen topics are kept in the tab's session storage and never written to the address bar, because life events can be sensitive. The booking page ticks the same topics, drops their objects onto a small copy of the table and fills a confirmation card as the visitor picks a partner, a time and phone, video or the office. Without storage the form simply starts empty.

Fees, year and deck

Fee cards print every fixed fee at large size and an optional running total adds one-off and monthly amounts separately, labelled illustrative. The year strip is a native horizontal scroller with mouse drag, tabs and arrow keys. The client deck responds to horizontal drags only, so vertical swipes still scroll.

Accessible by default

The phone menu is a real button with aria-expanded, a focus trap, Escape and focus return, and the rest of the page is inert while it is open. Reduced motion places items instantly and drops every slide and tilt. Measured contrast pairs are recorded in the stylesheet, and grass green only ever carries full-strength ink.

Plugins ScrollTrigger, Flip
Difficulty Advanced
Includes HTML + JS + CSS source, documentation, AI setup prompt, lifetime updates

Lighthouse, as measured

Google Lighthouse on this template's demo (8 pages, lowest score shown), from the latest scan. A measurement of the demo as shipped, not a promise for your page.

Accessibility
100
Best practices
100

No performance score, on purpose. That figure depends on how you deploy: your server's compression and caching, your CDN, the connection and the device doing the test, none of which the code controls. The same page can score very differently on two consecutive runs, so measure it where it will live.

Questions about this template

Which businesses does this design suit besides financial planners?

Anything that sells a relationship with named people rather than a product. An accountant swaps the life items for receipts, a VAT letter and a new van; a mortgage broker uses keys, a payslip and a survey; a coach or will writer changes the fees and stories. The cut-out portraits, kitchen table and fee cards stay as they are.

How do I change the life items on the kitchen table?

Each item is one button in the home page tray with a label, the sentence it adds to the agenda and what to bring, set as data attributes. Replace the cut-out image, edit those three values and repeat the same item as a checkbox on the booking page so the agenda can carry across. The README lists the matching attributes.

Does the booking form send anything?

No. It is an unwired front end that collects topics, a preferred partner, a time window, phone, video or office, name, phone, email and a note, then shows a confirmation card saying nothing was sent. Point the form at Formspree, Netlify Forms, Calendly or your CRM before you publish.

Is any of this financial advice, and what about regulation?

The worked example says on every footer that the site is general information, not financial advice, and every client story, meeting card and fee total is labelled illustrative. The FCA number is an obvious FRN 000000 placeholder. Replace it with your own and have your compliance adviser read the copy before launch.

Can I use my own team photos as cut-outs?

Yes. Shoot each person half-length against a plain light wall, remove the background to a transparent WebP and replace the clare-cutout and imran-cutout files. The colour shape behind each portrait is CSS, so changing a person's colour is one class. The small round faces in the nav are square crops of the same photos.

How do I change the fees and the running total?

Each fee card holds its amount and whether it is one-off or monthly as data attributes, and the printed price is ordinary text. Edit both and the total follows. Delete the running total bar and the tick boxes if you would rather show prices only; the cards work without them.

Paid template

Purchase to unlock the code.

Buying Financial Advisor Template opens the HTML, CSS and JavaScript source, the full documentation, an AI setup prompt for your editor, and every update we ship to it. Standard license: unlimited personal and commercial projects. Every paid product is tested for desktop and mobile layouts, reduced-motion handling, animation cleanup and keyboard controls wherever there is something to operate.

£29 Standard license, unlimited projects

Browse free effects

Or the whole library: the Vault, £79.20, one payment.

Documentation

Quick Start

  1. Unzip the folder and open index.html in a browser, or serve the folder with any static server (npx serve .).
  2. Every page is plain HTML: index.html, how-we-work.html, fees.html, who-we-help.html, about.html, notes.html, notes-tax-year-end.html and book.html.
  3. Replace the names, address, phone number, fees and photographs, then upload the folder to any host. There is no build step.

Using It With Your Own Design

  • Colours live in the token block at the top of assets/style.css. --grass is the brand colour; --kelham the deep band and footer; --rhubarb and --mint the shapes behind people. The measured contrast pairs are in the comment above them; grass only ever carries full-strength ink.
  • Type is two tokens, --font-display and --font-body. Swap the woff2 files in assets/fonts/ and the two @font-face rules.
  • The colour shapes behind people are .blob plus a tone class (tone-grass, tone-rhubarb, tone-mint, tone-paper) and an optional shape variant (blob--2, blob--3). The crumpled-paper texture is assets/img/paper.webp, multiplied through the colour.
  • Each feature is attached by a data- attribute and the script skips any that are missing, so you can delete a section from any page without touching the script.

Pages and Configuration

Navigation

The desktop bar shows five page links plus a booking pill. Mark the current page with aria-current="page" on its link in both the bar and the #menu sheet. On phones the links fold into a full-height green sheet opened by the Menu button (data-menu-toggle); it traps focus, closes on Escape and returns focus to the button. Without JavaScript the links show as a plain row. A booking pill (data-dock) appears on phones after the first screen, except on the booking page.

The kitchen table (Home)

The tray in [data-table-section] holds one button per life item:

Code snippet omitted: it ships with the download.

data-label is the agenda heading, data-talk completes "We will talk about ..." and data-bring joins the "Please bring" list. The surrounding <li class="tray__slot"> needs a matching data-slot and data-label. Mouse and pen drag items onto the table; touch taps them. The chosen ids are kept in sessionStorage under ps-agenda and are never put in the URL.

Book

Each topic checkbox in book.html uses the same id in data-topic (and its own data-label, data-talk, data-bring), so items from the kitchen table arrive ticked and drop onto the small table at the top. The confirmation card ([data-confirm]) fills from the form. The form sends nothing: set its action to your form service (Formspree, Netlify Forms, your CRM) and remove the preventDefault in initBook once it posts for real, or keep the script and send with fetch.

Fees

Each .fee card holds data-amount and data-kind (once or month); the printed price is ordinary text, so edit both. The plan card's one-person or couple switch rewrites its amount. The running total bar ([data-fee-sum]) and the "I might need this" ticks are optional; delete them and the cards still work.

How we work: the year strip

Twelve .month items inside [data-year-track], each with a matching tab in .year__tabs. Add or remove months in pairs (card and tab). The strip is a native horizontal scroller, so touch and trackpads work as usual; mouse users can also drag it.

Who we help

The deck holds one [data-deck-card] per story; data-story is the id of the matching .story article below and data-items the table items its "Put this on my agenda" button adds. Every story is labelled illustrative; keep that label if you write your own.

About

Ask-the-partners chips are buttons with data-who (clare or imran) and data-answer. Rename the people by changing data-ask-person on the two figures. The map reads data-lng and data-lat on [data-map] and puts the pin there; the link inside it is the fallback. The regulation, complaints and privacy blocks hold placeholders: replace FRN 000000 and the company number with your own, and have your compliance adviser read every page.

Notes

The pile on notes.html is a list of <li data-tags="..."> notes. Tags use the same ids as the kitchen-table items, and the chips above sort matching notes to the top. Only the tax-year article is written; the other five cards are marked "Coming in April" and deliberately link nowhere. Write each one, then turn its <div class="note"> into an <a class="note" href="...">. The checklist in the article keeps ticks in localStorage (ps-checklist) and can pass them to the booking form's note box.

Footer

Every footer carries "This site is general information, not financial advice." and the regulatory placeholder. Keep a line like it on every page of a regulated business.

Palette

Token Value Use
--white #FFFFFF Home hero and cards
--paper #ECECE8 Inner grounds and panels
--ink #13221A All text
--grass #33B46A Brand fields, pills, the sofa
--kelham #0F4A33 Curved band and footer, white text
--rhubarb #F6A6C9 Shapes behind people, the booking band
--mint #BFEACF Shapes and soft panels
--leaf #14773F Links and focus rings

Images

Bundled images are optimised WebP derivatives in assets/img/, baked from the masters in assets/img-src/ by assets/img-manifest.json. To regenerate after replacing a master, run the repository's image script or simply drop your own WebP files in with the same names and dimensions.

Cut-outs (*-cutout.webp, hero-family*.webp, item-*.webp) are transparent WebP. Shoot replacements against a plain light background, remove the background and keep a little space around the subject.

Accessibility

  • Every draggable item is a button with aria-pressed and a label that says what a press does; the agenda and running total are live regions.
  • The year strip is a tablist with arrow keys, Home and End; the deck has previous and next buttons and only reacts to horizontal drags.
  • The phone menu traps focus, closes on Escape and marks the rest of the page inert while open.
  • Reduced motion places items instantly, drops tilts and slides, and turns off the page crossfade.
  • Without JavaScript every page, story, answer and fee is still readable, and the booking form keeps its plain checkboxes.

Dependencies

  • GSAP with ScrollTrigger on every page and Flip on Home and Notes. Built against 3.15.0; works with 3.12+.
  • MapLibre GL 4.7.1 on the About page, loaded by the script only when the map nears the screen, with OpenFreeMap tiles (OpenStreetMap data, no API key). Keep the OpenStreetMap attribution.

Fonts

Parkinsans and Golos Text, both under the SIL Open Font License (assets/fonts/OFL.txt), self-hosted as latin woff2 files.

Teardown

The script runs inside one gsap.context, stored on window.gsapContext. Calling window.gsapContext.revert() removes its animations and ScrollTriggers; the page also reverts on pagehide.

Worked examples, the events and programmatic API, and the class reference ship with the download, alongside the full source.