Insurance Company Homepage Template

A warm, light Bootstrap 6 homepage template for an insurance company, built around an instant quote form in the hero, with coverage cards, bundle plans, a claims process, reviews, an FAQ and an agent call to action.

How it works

Everything sits inside .ns-page, which pins data-bs-theme="light" and re-maps two Bootstrap 6 color roles: --bs-primary-* becomes forest green and --bs-accent-* becomes coral, so btn-solid theme-primary, btn-solid theme-accent, badges, the switch and the range all follow the brand.

• Top bar and navbar: .ns-topbar with the claims line, then navbar lg:navbar-expand with a <dialog class="drawer drawer-end">. "Insurance" opens a .menu with menu-item-icon and menu-item-description. The script syncs aria-expanded on .ns-toggler and closes the drawer after a link is chosen.
• Hero quote form: coverage type is a group of btn-check radio labels (.ns-type), the start date uses the Bootstrap 6 Datepicker (data-bs-toggle="datepicker"), and the coverage limit is a .form-range whose value is mirrored into [data-ns-limit-out]. The form uses data-bs-validate; on submit the script flags empty fields with .is-invalid, otherwise simulates the request and shows an estimate in [data-ns-result].
• Coverage cards: every link with data-ns-quote (cards and menu items) preselects that coverage type in the quote form.
• Plans: a Bootstrap 6 .switch (#ns-yearly) swaps each .ns-price-amount between data-ns-monthly and data-ns-yearly.
• Claims: a photo with a stat badge and a vertical .stepper. "Start a claim" opens #ns-claim-dialog, a native <dialog class="dialog"> with its own validated form; on success it closes and shows #ns-toast.
• Reviews, FAQ and CTA: .progress rating bars, review cards, an exclusive <details name="ns-faq"> accordion and an agent band.

Customization

• Change --ns-forest and --ns-coral in .ns-page (style.css) and the --bs-primary-* / --bs-accent-* values beside them to rebrand.
• Edit the base object in script.js to set the starting monthly price per coverage type, or replace the setTimeout in the quote handler with fetch() to your rating API.
• Edit data-ns-monthly / data-ns-yearly on each .ns-price-amount to change plan prices.
• Change min, max and step on #ns-limit to adjust the coverage limit range.
• Remove .ns-plan-featured from the Preferred card to make all plans look equal.
• The photos come from Unsplash; replace them with your own members, agents and office images.

Accessibility

A skip link jumps to #ns-main. The coverage tiles sit in a fieldset with a legend, quote results and price changes are announced through aria-live regions, rating bars use role="progressbar" with labels, and the toast uses role="status". Focus moves to the result panel after a quote and to the first invalid field on errors. Hover lifts respect prefers-reduced-motion.

Bootstrap 6 notes

Built on Bootstrap 6.0.0-alpha.1 (alpha APIs can still change). For Bootstrap 5 developers: btn-solid theme-accent replaces per-color buttons, the navbar uses lg:navbar-expand with a Drawer instead of navbar-collapse, Dropdown is now Menu, Modal is now Dialog, form-select is gone (form-control on <select>), switches use .switch, and Datepicker and the new Range are built in. script.js imports Dialog, Drawer and Toast as an ES module.