Components

A short status or trust label, such as "Licensed and insured" or "Open now".

The call-to-action primitive: primary for the main action, ghost and quiet for secondary actions, phone for tap-to-call numbers, and icon-only buttons for arrows, close and menu.

Radio buttons or checkboxes as a list, chips, a segmented toggle or swatches, with the same error handling as Field.

A labelled form control with hint, required marker and error message; the building block of every form.

Any lucide icon (minus "AI", emoji and novelty glyphs), inlined as SVG; the stroke weight follows the theme.

A responsive photo in AVIF and WebP with explicit dimensions, or a wire box at the same ratio.

A themed slider with a live value; drives the financing calculator and the quote estimator.

Renders content text, or wire bars sized like it. RichText adds inline links and emphasis; masked text keeps derived numbers out of wireframes.

Site header in six structures, one per template. Every one sticks and shrinks on scroll, marks the current page or section, opens a services dropdown on hover, click or keyboard, and swaps the nav for an accessible drawer below 56rem.

The opening section of a page: the main heading, the pitch and the first call to action, in six structural variants.

Two photos of one job split by a divider you drag. Without a real before photo it derives one from the after photo with a grime or worn-finish treatment limited to the part the job changed.

Photos you drag, swipe or step through, snapping to a slide on release. Cards for a row of recent projects, or one big photo at a time with captions and thumbnails.

One photo with a label, caption and credit, stacked or side by side; it can open whole in the lightbox.

Photos in an even grid or a mosaic around one lead photo; any photo opens the lightbox with arrows, swipe, a counter and its caption.

A filterable wall of project photos at their own shapes; chips filter by kind of work with an animated reflow, and every photo opens the lightbox.

What the business does and what it costs, told four ways: photo cards that each open a service page, a printed rate card with dotted leaders, a ruled panel of icon tiles, and alternating photo rows for the full story of each service.

Licences, certifications, insurance and memberships with the numbers a customer can check, set like the lettering on a van door. A credential with a link becomes a whole-cell link to verify it.

The people who will turn up, as flip cards: photo or initials patch, name and role on the front; years, certifications and a personal line on the back. Turns on hover and keyboard focus; a click, tap or Enter keeps a card turned.

A rubber-stamp guarantee seal with the promise in plain words and a coverage list that opens from its button or from a click on the seal. Comes as a section (with or without a job photo) or as a warranty certificate card.

Plan tiers with a monthly or yearly toggle that rolls every price to the other period, a year strip of visit months and the yearly saving worked out.

The average rating set large, with the review count and a bar per star level; heads a reviews band or the reviews page.

Customer reviews as cards in rows, with the average and where it comes from, filters by service, paging and links to projects; or one review set large to close a case study.

Generic rating badges for Google, Angi, Yelp, BBB, Houzz or Nextdoor, each linking to the business there; never the platforms’ own logos.

Review cards on a track you drag, swipe or step through with arrows and keys; optional autoplay that pauses on hover and never runs under reduced motion.

Five stars filled to a rating, fractions included; the building block of every review component.

Big figures that count up once when they scroll into view, with a dimension rule that grows under each. The final numbers are in the HTML, so they read right without JavaScript and under reduced motion.

How a job runs, step by step: what happens, how long it takes and what the customer has in hand at the end of each step. Rows for a full process page, columns for a short "how a visit goes".

A dated story, such as a family firm since 1987 or the days of a job. The entry you are reading lights up as you scroll, and the marker index jumps straight to any year.

Upfront prices as cards with what is included and how long it takes, one featured card on the brand colour, and an add-ons rate sheet.

A live price from a slider, choices, add-ons and a counter, with the maths written out as a receipt; every rate comes from content.

Questions that expand in place, one open at a time, with FAQPage microdata for search. Split puts the heading beside the questions on wide screens; stacked suits a narrow column.

The service area as a stylised map beside the town list. Hover or focus a town in either and both light up; click a town to open its page.

The towns a business covers: a table with ZIP codes and drive times, or a compact directory of names.

Phone, text, email, address and the week of opening hours, with a live "Open now" badge worked out in the business's own time zone.

The request form: paired fields, a photo drop zone with previews, an error summary, sending and success, and a send-failure alert that gives the phone number. Runs in demo mode while form.action is empty.

A stylised street map drawn at build time (no tiles, no API key) with the business pin: an address card with directions, or the service radius with every town.

The bottom of every page. Statement leads with one big sentence and a plate of licence and insurance numbers; big columns carries a full sitemap; compact fits a single-page site.

The body of a 404 page: the h1, what went wrong, the likely ways back and the phone number, beside a photo or over a faint drawing.

A thin band above the header for calm news: a booking window, a seasonal offer, licence numbers. One message, or a few that rotate.

The trail back to the home page on inner pages; a long trail folds its middle on phones.

An alert strip above the header for storms, freezes and outages, switched on from content; dismissing it hides it for the rest of the visit.

A bottom bar on phones and tablets that slides up after the first scroll with call and quote actions; floating buttons move up above it.

Pick a day and a 2-hour arrival window; booked and closed slots show but cannot be picked. The choice submits as date and window with the booking form.

A floating button that opens a small panel: a "call me back" form plus text, WhatsApp and call links. It rides above the sticky call bar on phones.

A short multi-step quote form: service, property, photos, contact. Each step validates before moving on, focus follows the step heading, and the last step sends with success and failure states.

A tear-off coupon with a dashed cut line and a copy-code button that confirms the copy; greys out after its end date.

Recent jobs as pins on a map of the service area. Hover, focus or tap a pin for a photo card; town pages zoom in on their town.

Swatches swap the room photo (one photo per swatch) or tint the roof through a mask over one base photo, with the material details beside it.

A job told day by day: drag along a tape-measure strip to step through the job photos, with the day, what happened and why beside each one.

A poster frame with a play button; the local video file only downloads when someone presses play or picks a chapter. Without a video it shows a coming soon plate.

Drag the project cost and the term to see the monthly payment, with the amount financed, interest and total spelled out and a lending disclaimer.

Materials side by side, one column each, with the recommended option railed and badged. The header row sticks while the rows scroll, the column under the pointer or focus lights up, and phones get one card per material.

Type a ZIP (or a town) and get an instant yes, or a "not yet" with a one-field waitlist form. Served and waitlist codes come from content.