When to use it

Use ProductDetails for the body of the PDP after the hero.

It is the right family when the page needs:

• editorial product story or supporting copy
• specifications, sizing, care, or shipping sections
• grouped downloads or technical attachments
• a stable post-hero rhythm that can stay simple or open up into full composition

If the page only needs a small, compact tab strip, ProductTabs can still be the lighter tool. But when the PDP body itself needs a first-class structure, start with ProductDetails.

Family boundary

ProductDetails complements ProductHeroSection.

• ProductHeroSection owns the top-of-page hero entry: media, buy box, actions, and trust opening.
• ProductDetails owns the body that follows: copy, specs, care, shipping, downloads, and supporting notes.
• ProductRecommendations should stay outside this family so merchandising does not blur into product information.

Composition notes

Lead with the compound path when the page needs explicit control over section ordering or custom markup.

Use the structured path when the body follows a familiar rhythm:

• sections for named PDP sections
• variant="specs" with specs items for definition-list style technical data
• variant="downloads" with downloads items for grouped file rows
• variant="sizing", variant="care", or variant="shipping" when the content should stay semantically explicit even if the markup is still rich text
• footer for supporting notes, project-sales prompts, or service guidance after the main detail sections

Behavior and theming guidance

ProductDetails should feel calm and scannable. Keep the left-side headings short and make the right-side content do the heavier explanatory work.

If the page grows long enough to need sticky in-page navigation, pair ProductDetails with SectionNav. Keep recommendation rails and editorial merchandising blocks outside the family so the main information rhythm stays clear.