Catalog
Every section, grouped by purpose
36 items available today. Grouped by what a visitor is trying to understand or do, because that is how you choose a section — not by counting columns.
Heroes
The first screen: what you do, who for, and what to do next.
Services & explanation
What you offer, and what a customer actually gets.
Conversion
Moving someone from interested to in touch.
CTA band
SectionClosing call to action, centered or split, on a tinted or dark surface.
cta-bandQuote request form
SectionLead capture with every submission state, from invalid to failure.
quote-request-formBooking handoff
SectionHands off to a real scheduler. Ships no fake availability picker.
booking-handoffProject inquiry form
SectionQualifying enquiry form: services, budget, timeline, and context.
project-inquiry-form
Lead capture
Enquiry, quote, and booking forms with every submission state.
Field
FoundationLabel, control, description, and error, wired for assistive technology.
fieldSubmission status
FoundationLive region that announces the outcome of a form submission.
submission-statususeFormSubmission
FoundationSubmission state machine: guards duplicate submits, preserves input.
use-form-submissionQuote request form
SectionLead capture with every submission state, from invalid to failure.
quote-request-formProject inquiry form
SectionQualifying enquiry form: services, budget, timeline, and context.
project-inquiry-form
Proof
Why a visitor should believe you: reviews, results, credentials.
Rating display
FoundationStar rating with its count and source, announced as one value.
rating-displayTestimonial card
FoundationOne customer quote marked up as figure, blockquote, and attribution.
testimonial-cardMetric
FoundationA headline number with the timeframe and source that make it honest.
metricCredential badge
FoundationA licence or certification, linkable to the register that proves it.
credential-badgeCustomer logo strip
SectionA row of customer logos. Falls back to wordmarks when there is no file.
logo-stripTestimonial grid
SectionA grid of customer quotes, with optional ratings and review links.
testimonials-gridCase study preview
SectionCase studies as cards, optionally promoting one to a full-width split.
case-study-previewBefore and after
SectionTwo images compared with a slider that works from the keyboard.
before-after
Pricing & packages
What it costs, what is included, and what is not.
Inclusion list
FoundationWhat a package includes, and what it explicitly does not.
inclusion-listPrice display
FoundationA price, its period, and the small print. Formats nothing itself.
price-displayPackage card
FoundationOne pricing tier. The featured tier is labelled, not just styled.
package-cardPackage comparison
SectionTwo or three tiers side by side, each with its own call to action.
pricing-packages
Objections
The questions that stop someone getting in touch.
People & company
Who does the work, and where they do it.
Person card
FoundationOne team member, with an initials fallback when there is no headshot.
person-cardTeam & credentials
SectionThe people behind the business and what they are qualified to do.
team-credentialsService areas
SectionWhere the business works, as readable text with an optional map.
service-areas
Layout
Width, rhythm, and surface — the shared grid every section sits on.
Typography
Headings and body copy at marketing scale.
Actions
Calls to action, phone links, and other ways to respond.
Media
Images and video that reserve their space before they load.
Cards
Repeating units — services, testimonials, results, packages.
Service card
FoundationOne service or capability, with an optional icon, price, and inclusions.
service-cardTestimonial card
FoundationOne customer quote marked up as figure, blockquote, and attribution.
testimonial-cardPackage card
FoundationOne pricing tier. The featured tier is labelled, not just styled.
package-cardPerson card
FoundationOne team member, with an initials fallback when there is no headshot.
person-card
Local business
Areas served, opening hours, addresses, and tap-to-call.