Bundle rows
PDP bundle UI. Three concept variations were prototyped — see bundle concepts brief for the full rationale and recommendation. This showcase distills the two patterns the team is most likely to ship: the stacked-cards "Frequently bought together" and the kit-table "Service-day kit". Each composes mini product cards, qty steppers, pills, and the bundle subtotal.
Concept A — stacked cards (FBT)
Amazon-style. Three product cards in a row with + operators between them and a bundle-total card on the right. Lowest editorial overhead — pairings can be algorithmic. Recommended ship-first.
Frequently bought together
Save 10% when you bundle this brush with the supplies you'll use it with.
Concept B — curated kit ("Service-day kit")
Editorial branded kit. Hero banner with kit name + savings callout, product rows below in a card-table. Higher perceived value because the kit has a name and a story. Layer in for top SKUs after launch.
Components composed in this pattern
| Slot | Component | Variant |
|---|---|---|
| Per-item qty | Qty stepper | Default 32px (both concepts) |
| Stock indicator | Pill / inline text | pill-success for "You save $X" totals |
| "This item" label | Inline pill (page-local) | Brand bg, white text — distinguishes the current PDP product from companion items |
| Bundle action | Button | btn-primary with cart icon |
| Item card (Concept A) | Custom .br-card | Smaller cousin of Product card |
| Hero (Concept B) | Custom gradient header | Brand → brand-dark gradient with accent savings callout |