Services-first
Lead with what you offer. Strong when visitors already know they need your trade and want scope and proof up front.
Components
Components
Headers, heroes, templates, and content patterns you can mix on a live site. Swap placeholders for real copy and shots as projects ship.
How to use this page
This library shows reusable sections and layout patterns for client sites. Treat each block as a starting point: swap in brand colors, adjust radius and typography, and replace placeholders with real copy and photography.
Pick a structure
Choose a header, hero, content flow, and footer that match the business goal.
Apply a style system
Use the same blocks with different radius, type, color, and button treatments.
Swap in real assets
Replace placeholders with photography, testimonials, hours, offers, and contact information.
Style controls
These are the knobs you can turn to make the same components feel more refined, bold, soft, or utilitarian across different industries.
Radius
Sharp, balanced, or soft.
Buttons
Solid Outline Text
Primary action, secondary action, or subtle link.
Typography
Elegant serif
Clean sans
Bold display
A major driver of industry feel.
Color direction
Neutral, organic, warm, or soft.
Header layouts
Logo left with links or CTA is the default; many sites also use a centered logo, a split bar, or a centered menu row between logo and action.
Example A — logo and links
Example B — nav + highlighted CTA
Example C — logo centered, links below
Example D — split bar: nav · logo · nav + CTA
Book
Example E — logo left, centered menu, CTA right
Hero layouts
Same content can be arranged as a single column, split text + media, or a compact band for inner pages.
Stacked — headline, text, buttons
Eyebrow
Main headline
Supporting copy that explains the offer in one or two short lines.
Primary Secondary
Split — copy on the left, visual on the right
Eyebrow
Headline + art
Room for a short paragraph beside a photo, illustration, or device mock.
Compact — inner page intro
Page title
One line of context—enough to orient visitors without repeating the whole story.
Layouts
Templates & layout
Three starter flows—same building blocks, different order and emphasis. Replace the wireframe blocks with real screenshots when you are ready.
Story-led
About and credibility before the detail. Works well when trust and personality close the sale.
Contact-forward
Phone, form, and map up high. Ideal when most people land on the site ready to call or book.
Text sections
Testimonials, about blurbs, and service callouts reuse the same typography rhythm.
Testimonial
“We finally have a link we’re proud to put on the van and in our email signature. Booking calls picked up the first month.”
About snippet
Local, approachable, specific
A short about block might cover years in business, service area, and what makes your crew different—without sounding like a novel.
Service highlight
Seasonal tune-ups
One tight paragraph on a single offer: who it’s for, what’s included, and what the customer should do next.
Request this service →Card grid
Great for services, team members, packages, or FAQs in digestible tiles.
-
Card one
Title, short body, optional link or price.
-
Card two
Same structure keeps the grid easy to scan.
-
Card three
On small screens these stack; on wide screens they sit in a row.
Image grids
Inline rows read as a single band—good for client logos or a tight gallery strip. Staggered grids nudge rhythm; collages use a single square frame, even gutters, and a bento-style grid—mixed spans, flush edges, no overlap.
Inline row
Staggered grid
Collage
Form styles
Useful for quote forms, booking requests, and general contact. This is also a good place to show your preferred floating-label style.
Floating labels
Simple stacked form
Modal popups & alerts
Optional alerts and notices for inline messaging, plus modals for confirmations, policy details, or other info you want to highlight on top of the page. The sample modal uses a fixed overlay; pair with your preferred script or framework dialog.
Alert / inline notice
Heads up
We’ll follow up within one business day after you submit the form.
Saved
Your preferences were updated. You can change them anytime in settings.
Action needed
This link expires in 24 hours. Complete setup before it resets.
Something went wrong
We couldn’t process that request. Check your connection and try again.
Modal dialog
Centered panel over a dimmed, blurred backdrop. Close with the X, Cancel, backdrop click, or Escape.
Carousel
For rotating testimonials, project photos, or short blurbs—keyboard-accessible prev/next controls.