Law Firm Homepage Template

A complete Bootstrap 6 law firm homepage for a fictional practice, Ashcombe Reid, with a parchment and oxblood look, practice area tabs, case results, attorneys, reviews and a consultation form.

How it works

Everything sits inside .lw-page (data-bs-theme="light"), which remaps the Bootstrap 6 primary role (--bs-primary-bg and related tokens) to oxblood for buttons, badges and the stepper.

• Top bar: the script fills [data-lw-open-status] from the visitor's clock and LW_HOURS, so it never goes stale. A text button opens the call-back dialog.
• Navbar: navbar lg:navbar-expand with a <dialog class="drawer drawer-end"> for mobile. "Practice areas" opens a .menu. Its data-lw-area links open the matching tab via Tab.getOrCreateInstance().
• Hero: serif headline, calls to action, a <dl> of statistics and a framed photo with a "Recent result" card.
• Practice areas: nav nav-pills nav-pills-vertical tabs switch five .tab-pane panels.
• Results, attorneys, process: a dark results grid, four partner cards and a stepper md:stepper-horizontal inside .contains-inline.
• Reviews and FAQ: quote cards with avatar avatar-subtle initials and an exclusive accordion of <details name="lw-faq">.
• Consultation form: <form data-bs-validate novalidate> with a Combobox (data-bs-name="area"). On submit the script flags invalid fields and checks the Combobox's hidden input. It then simulates sending and opens #lw-toast.
• Call-back dialog: #lw-callback is a <dialog class="dialog"> with a btn-check radio group. A valid submit closes it and shows a toast.

Customization

• To rebrand, change --lw-oxblood, --lw-brass and --lw-paper on .lw-page in style.css, plus the --bs-primary-* overrides.
• Edit LW_HOURS in script.js to set your office hours.
• Replace the setTimeout in the .lw-form submit handler with fetch() to your intake endpoint. The call-back form has a matching comment.
• Add or remove .tab-pane panels, their nav-link buttons and the data-lw-area links to match your practice groups.
• Delete sections such as .lw-process or .lw-reviews (and their navbar links) for a shorter page.
• The photos come from Unsplash. Replace them with your own office and attorney portraits.

Accessibility

A skip link targets #lw-main. Tabs use role="tab" and aria-selected. The Combobox uses aria-labelledby, star ratings have hidden text, and the toast uses role="status". A failed submit moves focus to the first invalid field. Focus outlines are visible, and motion stops under prefers-reduced-motion.

Bootstrap 6 notes

Built on Bootstrap 6.0.0-alpha.1 (alpha APIs can still change). Coming from Bootstrap 5:

• btn-solid theme-primary replaces per-color buttons.
• Drawer replaces navbar-collapse, Menu replaces Dropdown, and Dialog replaces Modal.
• Combobox replaces form-select.
• data-bs-validate replaces needs-validation.

The alpha Combobox logs a harmless "more than one instance" console error. It has no reset method, so the chosen area stays selected after submit.