Products Bundle Hotspot 4 block design & features
ProductsBundleHotspot4 frames a full-length studio photo in the middle of this Shadcn UI section, with product labels floating in the space to its left and right. Thin lines run from a pin on each garment to its label, like an annotated fashion sketch. Each label gives the piece name, a short detail and a price, and a bar under the figure shows the bundle price against the separate total next to an add the full look button. A centred heading and description sit above.
Hovering a label or a pin makes that line solid and dark while the others fade back, fills the pin, brings the label to full strength and slides open a row of size buttons beneath it. The lines stay hairline thin at any width and the rest of the section stays flat, with no cards or shadows, so the photo and the linework carry the look.
It reads as editorial and technical at once, a rare annotated layout that suits garments with distinct parts. Complexity is moderate and comes from the geometry of the figure rather than heavy content. It needs one full-length portrait photo in a two by three ratio and a name, detail, price, sizes, pin position, label side and label height for each piece. On small screens the lines are hidden, the photo sits on its own with its pins, and the labels become a stacked list below.