Products

This product detail template places a gallery beside product copy, with breadcrumbs above. It nests a carousel inside a lightbox and uses @max-md:container to reflow the page on narrow screens.

Included patterns

• The <ui-lightbox> contains a looping <ui-carousel>. Each slide is a button that opens the same modal through invoker commands, so both views share one image set.
• The two-column wrapper uses grid grid-cols-2 gap-lg @max-md:container. Below md, it becomes a band container and the gallery narrows to the xs band through data-container="xs".
• The description is an hgroup with .ui-prose, which styles its feature list and paragraphs without classes on each element.
• The breadcrumbs use a menu of link-variant buttons with the current page disabled. They need no dedicated breadcrumb markup.

Source

Open the raw page, or read products.html on GitHub.