Services & areas

Services + area-hub primitives

Fourteen reusable primitives that mirror the live services index, service detail, and regional area-hub anatomy. Each primitive composes a shared umbrella primitive (TextFirstHero, FeatureGrid, ProcessSteps, FaqAccordion, TestimonialWall, PriceTag, StaticMapCanvas, MetricBlock, Breadcrumb) so the surface stays consistent across the design system.

Production answer

Services + area-hub primitives is a reusable Oak Flats Muffler Men UI primitive with documented states, accessibility expectations, theme behavior, and implementation evidence.

Primary CTAReview Services + area-hub primitives states
Generative search brief

Services + area-hub primitives: Fourteen reusable primitives that mirror the live services index, service detail, and regional area-hub anatomy. Each primitive composes a shared umbrella primitive (TextFirstHero, FeatureGrid, ProcessSteps, FaqAccordion, TestimonialWall, PriceTag, StaticMapCanvas, MetricBlock, Breadcrumb) so the surface stays consistent across the design system.

Visual reference only — no live booking wiring
Primitive 01

Services index hero

Anchor hero for the services index: kicker, headline, supporting copy, service-count + lead-time chips, dual CTA.

Composes TextFirstHeroOpen
Primitive 02

Service tile

Single service tile: category iconmark + name + short description + lead-time chip + average-price chip.

Uses shared iconsOpen
Primitive 03

Service detail hero

Service detail hero with cover-image placeholder and Sound / Compliance / Performance scope chips.

Composes FeatureSpotlightOpen
Primitive 04

Service process steps

Numbered process steps row — drop-off → fitment check → build → test → handover.

Composes ProcessStepsOpen
Primitive 05

Service FAQ block

Service-specific FAQ accordion with single-open expansion and Base UI accessibility wiring.

Composes FaqAccordionOpen
Primitive 06

Service testimonials

Testimonials wall for this service: star rating + customer name + vehicle + quote.

Composes TestimonialWallOpen
Primitive 07

Service pricing band

Pricing band card — From $XXX + GST chip + booking-deposit chip + finance chip.

Composes PriceTagOpen
Primitive 08

Service coverage card

Coverage card: mini radius map + drive-time stat + suburb chip cloud + see-all CTA.

Composes StaticMapCanvasOpen
Primitive 09

Area hub hero

Area hub hero with suburbs-count + workshops-count chips and split-credit layout.

Composes TextFirstHeroOpen
Primitive 10

Area coverage map mini

Mini coverage map: hand-drawn region outline + workshop pins + scale chip.

Composes StaticMapCanvas + MapPinOpen
Primitive 11

Area stats trio

Trio of stat tiles: workshops count + suburbs covered + average response time.

Composes MetricBlockOpen
Primitive 12

Area services grid

Grid of services available in this area with localised copy + book CTA per service.

Composes FeatureGridOpen
Primitive 13

Services breadcrumb

Home / Services / Service trail. No postcode badge.

Composes BreadcrumbOpen
Primitive 14

Area suburb list card

Listing of suburbs in an area with postcode + drive-time chip + services-count per row.

Composes DistanceDurationChipOpen