Parts pages

Parts page primitives

Fourteen reusable parts-page surfaces for the Oak Flats Mufflermen brand — catalogue hero, search rail, category cards, result cards, detail hero, image gallery, spec table, fitment list, supplier badge, related rail, breadcrumb, FAQ, price chip, category shell. Bonus: a full detail-page composition route.

Production answer

Parts page primitives is a reusable Oak Flats Muffler Men UI primitive with documented states, accessibility expectations, theme behavior, and implementation evidence.

Primary CTAReview Parts page primitives states
Generative search brief

Parts page primitives: Fourteen reusable parts-page surfaces for the Oak Flats Mufflermen brand — catalogue hero, search rail, category cards, result cards, detail hero, image gallery, spec table, fitment list, supplier badge, related rail, breadcrumb, FAQ, price chip, category shell. Bonus: a full detail-page composition route.

Parts catalogue primitives — composed from the umbrella design system
Primitive 01

Parts catalogue hero

Catalogue hero with kicker, headline, supplier coverage chip, part count chip, and supplier badge row.

HeroOpen
Primitive 02

Parts search rail

Vertical search rail — search input, category nav, supplier chips, price slider, in-stock toggle, fitment chips.

FilteringOpen
Primitive 03

Part category card

Single category card — thumbnail mark, category name, part count chip, popular supplier chips.

CategoryOpen
Primitive 04

Part result card

Search result card — supplier-watermark image, SKU, title, supplier badge, RRP, fitment chip row.

ResultOpen
Primitive 05

Part detail hero

Part detail hero — gallery on left, summary on right with title, sku, supplier, price, in-stock, install time, CTA.

ProductOpen
Primitive 06

Part image gallery

Primary image + thumb strip + zoom indicator with supplier-watermark variant and placeholder fallback.

MediaOpen
Primitive 07

Part spec table

Sectioned spec table — Dimensions / Materials / Sound / Compliance / Fitment groups.

SpecsOpen
Primitive 08

Fitment compatibility list

Vehicle fitment table — make, model, years, body, engine, notes chip, adapter-required chip.

FitmentOpen
Primitive 09

Supplier badge

Inline supplier badge with official brand logo artwork, verified chip, and optional warranty chip.

BrandOpen
Primitive 10

Related parts rail

Horizontal scrollable rail of PartResultCards filtered by category + supplier.

Cross-sellOpen
Primitive 11

Parts breadcrumb

Home / Parts / Category / Part — adapter over primitives/Breadcrumb with category tone on the leaf.

NavOpen
Primitive 12

Parts FAQ section

Accordion adapter over marketing/FaqAccordion with parts-specific 8-question default content.

SupportOpen
Primitive 13

Part price chip

Price chip wraps commerce/PriceTag with savings chip and payment-instalment hint.

PricingOpen
Primitive 14

Parts category page shell

Composition shell — Breadcrumb + Hero + Rail + Result grid + Pagination + FAQ.

CompositionOpen
Bonus

Full part detail experience

Composes Breadcrumb + Detail hero + Gallery + Spec table + Fitment list + Related rail + FAQ.

CompositionOpen