Style Guide Prime Material

Props

<CtaButton
  cta={{ label: string; action: "quoteModal" | "phone" | "link"; variant?: "primary" | "ghost" | "dark"; href?: string }}
  phone?: string
/>

<QuoteTriggerButton label={string} variant?={"primary" | "ghost" | "dark"} />

Used by

• SectionRenderer (every variant with CTAs)
• Header (mobile + desktop quote CTAs)
• Footer (apex CTA row)

Props

<PortableBody value?={PortableTextBlock[]} />

// Allowed marks: strong, em (rendered as semibold; no italic face shipped), link
// Allowed types: imageWithAlt (figure + figcaption), callout (warm aside w/ orange border)

Used by

• FALLBACK_PAGES (every Sanity-authored page body)
• /about, /careers, /training — long-form copy blocks

Props

<ProductCard
  product={Product}        // Sanity Product type — name, slug, category, specs, image, …
  containImage?={boolean}  // Opt into aspect-[3/2] + object-contain for full-photo visibility (defaults off; used on /construction/scissor-lifts)
/>

Used by

• SectionRenderer productShowcase variant
• FleetCarouselFirstRow (construction sub-pages)
• /used-equipment listing

Props

<MediaFrame
  image?={SanityImage}
  alt?={string}
  aspect?={"16/10" | "4/3" | "1/1" | "16/9"}    // Default 16/10
  sizes?={string}                                 // next/image sizes; default "(max-width: 768px) 100vw, 540px"
  className?={string}
  fit?={"cover" | "contain"}                      // Default cover
  objectPosition?={string}                        // Tailwind utility e.g. "object-top"
  bg?={"canvas" | "warm"}                         // Empty-state surface; default canvas
/>

Used by

• IndustriesGrid (home pillar cards)
• CourseList (training cards)
• SectionRenderer productSpotlight

Props

<EyebrowRule
  text={string}
  dark?={boolean}     // Dark-surface variant — switches the trailing rule colour (bg-white/10 vs bg-line)
  className?={string} // Extra classes on the outer <p>
/>

Used by

• /contact (Our Locations)
• /training (Course Catalog / Schedule / What's Included)
• /careers (Open Positions)
• /construction BenefitsGrid (rental benefits, post-2026-05-25 rentals merge)
• /construction BrandRangesAccordion

Props

<BranchesBand
  eyebrow={string}
  heading={string}
  subheading?={ReactNode}   // Render-prop slot so callers can inline links
  anchorId?={string}        // id on the outer <section> for in-page anchors
  children={ReactNode}      // The card grid
  className?={string}
/>

Used by

• /careers (Current Openings list with JobCard)

Props

<BenefitsGrid
  eyebrow={string}
  heading={string}
  subheading?={string}
  benefits={Array<{ title: string; paragraphs: string[] }>}
  startIndex?={number}              // Default 1
  tone?={"light" | "dark"}          // Default light (bg-canvas / text-ink)
  anchorId?={string}
/>

Used by

• /construction (Why Rent + Service That Backs Up the Fleet — 4 benefits each, light + dark interleaved, post-2026-05-25 rentals merge)
• /used-equipment (programs)
• /training (5 program areas)
• /careers (7 culture pillars)

Props

<QuoteForm
  formId?={string}                                                                 // Formspree endpoint ID (env-driven)
  formType={"aerial_lift" | "telehandler" | "scissor_lift" | "general"}            // Load-bearing for GTM conversion attribution
  subject={string}
  source={string}
  requestedUnit?={string}
  compact?={boolean}
  dark?={boolean}    // LP modal context — inverts label/help colours (fields stay white)
/>

Used by

• Global QuoteModal (every CTA route via useQuoteModal())
• LP modal endpoints (aerial / telehandler / scissor)

Props

<VideoStorySection
  story={HomeVideoStory}    // { eyebrow, heading, body: string[], video: {src, alt}, cta: {label, href} }
/>

Used by

• / (home page, between trust bar and industries grid)

Props

<IndustriesGrid pillars={IndustryPillar[]} />
// IndustryPillar: { title, eyebrow, body, ctaLabel, href, image?, imagePosition? }

Used by

• / (home page, industries pillar section)

Props

<ServicesGrid services={ServiceItem[]} />
// ServiceItem: { title, detail, href? }

Used by

• / (home page, services section)

Props

<BrandRangesAccordion brands={BrandRange[]} categories={ConstructionCategory[]} />

Used by

• /construction (hub page)

Props

<DealerBand bordered?={boolean} />   // default false — opt-in white/10 top+bottom hairlines

Used by

• /construction/telehandlers (bordered)
• /construction/skid-steers-loaders (bordered)
• /construction/aerial-lifts (bordered)

Props

<FleetCarouselFirstRow
  section={Section}              // Sanity-shaped productShowcase section
  containImages?={boolean}       // Forward to ProductCard containImage
  keepCarousel?={boolean}        // Force the > 3 overflow-carousel pattern even for ≤ 3 cards (for paired rows)
/>

Used by

• /construction/telehandlers (first row)
• /construction/scissor-lifts (containImages=true)
• /construction/aerial-lifts

Props

<JobCard
  post={JobPost}      // { slug, title, intro, … }
  location={string}   // Branch label for the eyebrow
/>

Used by

• /careers (Current Openings list)

Props

<CourseList courses={TrainingCourse[]} />
// TrainingCourse: { slug, name, tag, description, duration?, audience?, certification?, imageSrc? }

Used by

• /training (Course Catalog section)

Props

<TrainingSchedule rows={TrainingScheduleRow[]} />
// TrainingScheduleRow: { course, schedule, cost, notes? }

Used by

• /training (Schedule & Pricing section)

Props

<FaqList
  faqs={Faq[]}                 // Faq: { question, answer }
  eyebrow?={string}            // Default "Common Questions"
  heading?={string}            // Default "Rental FAQ"
  anchorId?={string}           // Default "faq"
/>

Used by

• /construction (Rental FAQ cluster, post-2026-05-25 rentals merge)