A navigational component intended to showcase multiple product image cards with an optional carousel feature enabled when larger card collections are present.
The VN021 is intended to feature a headline, optional body copy, and 3 to 12 (max recommended) featured product cards. When more than 3 cards are present, the component should display carousel toggles in the top/right of the card group allowing users to advance the carousel to view additional items not currently displayed onscreen.
When carousel controls are present, clicking Next or Previous arrow toggles will respectively advance or reverse the displayed card items by 3 until the end or start of the carousel is reached, disabling the associated carousel toggle when no additional cards are available in that direction.
On click a product card should drive users to the corresponding PDP or product marketing page as needed.
Heading Text: 80
Body Copy: 300
Card Title: 120 (3 lines max, truncated)
Asset Size: 345px x 345px
Aspect Ratio: 1:1
Recommended File Weight: <25kb
Width: 340px
Height: 224px
Desktop: 5:3
Tablet: 5:3
Mobile: 5:3