<section class="bg-color-surface flex w-full max-w-none items-center justify-center p-4 sm:p-6 md:p-8" aria-labelledby="product-card-20-title"> <article class="border-color-default bg-color-modal flex w-full max-w-sm flex-col gap-5 rounded border p-4 shadow-sm sm:p-5"> <figure class="flex flex-col gap-3"> <img src="https://www.plusui.com/images/blocks/product-card/product-card-4-headset-pro.png" alt="Audio desk headset shown for preorder" class="bg-color-default-default h-72 w-full rounded object-cover" /> <figcaption class="sr-only">Audio Desk Reserve product preview</figcaption> </figure> <header class="flex w-full items-start justify-between gap-3"> <div class="min-w-0"> <p class="text-color-caption text-xs font-medium uppercase">Preorder</p> <h2 id="product-card-20-title" class="text-color-default truncate text-xl font-semibold">Audio Desk Reserve</h2> </div> <plus-chip status="warning" size="sm" invert>Ships Friday</plus-chip> </header> <p class="text-color-caption text-sm">Reserve today for the next fulfillment window.</p> <div class="flex w-full flex-col gap-2" aria-label="Audio Desk Reserve availability"> <div class="flex items-center justify-between gap-3"> <span class="text-color-caption text-sm">Reserved</span> <span class="text-color-success text-sm font-medium">12 of 18 ready</span> </div> <div class="bg-color-default-default h-2 w-full overflow-hidden rounded-full" role="img" aria-label="Reserve today for the next fulfillment window."> <span class="bg-color-success-default block h-full w-2/3 rounded-full"></span> </div> </div> <div class="flex w-full flex-wrap items-baseline gap-2"> <p class="text-color-default text-2xl font-semibold md:text-3xl">$99.00</p> <p class="text-color-placeholder text-sm font-medium line-through">$129.00</p> <plus-chip status="warning" size="sm" invert>Ships Friday</plus-chip> </div> <plus-divider kind="dashed"></plus-divider> <div class="flex w-full items-center gap-2"> <plus-button kind="filled" status="primary" size="md" class="min-w-0 flex-1">Preorder</plus-button> </div> </article> </section>

<section class="bg-color-surface flex w-full max-w-none items-center justify-center p-4 sm:p-6 md:p-8" aria-labelledby="product-card-19-title"> <article class="border-color-default bg-color-modal flex w-full max-w-sm flex-col gap-5 rounded border p-4 shadow-sm sm:p-5"> <figure class="flex flex-col gap-3"> <img src="https://www.plusui.com/images/blocks/product-card/product-card-3-retro-camera.jpg" alt="Retro camera starter pack product image" class="bg-color-default-default h-72 w-full rounded object-cover" /> <figcaption class="sr-only">Camera Starter Pack product preview</figcaption> </figure> <header class="flex w-full items-start justify-between gap-3"> <div class="min-w-0"> <p class="text-color-caption text-xs font-medium uppercase">Starter pack</p> <h2 id="product-card-19-title" class="text-color-default truncate text-xl font-semibold">Camera Starter Pack</h2> </div> <plus-chip status="success" size="sm" invert>Starter</plus-chip> </header> <p class="text-color-caption text-sm">Camera, strap, and starter film in one ready-to-ship pack.</p> <div class="border-color-default bg-color-surface flex w-fit items-center gap-2 rounded border px-2 py-1"> <span class="text-color-default text-sm font-medium">5.0</span> <i class="fa-solid fa-star text-color-primary text-xs" aria-hidden="true"></i> <plus-divider orientation="vertical" class="h-4"></plus-divider> <span class="text-color-caption text-xs">29 reviews</span> </div> <div class="flex w-full flex-wrap items-baseline gap-2"> <p class="text-color-default text-2xl font-semibold md:text-3xl">$154.00</p> <p class="text-color-placeholder text-sm font-medium line-through">$189.00</p> <plus-chip status="success" size="sm" invert>Starter</plus-chip> </div> <plus-divider kind="dashed"></plus-divider> <div class="flex w-full items-center gap-2"> <plus-button kind="outlined" status="default" size="md" aria-label="Add to favorites"><i class="fa-regular fa-heart" aria-hidden="true"></i></plus-button> <plus-button kind="filled" status="primary" size="md" class="min-w-0 flex-1">Add Pack</plus-button> <plus-button kind="outlined" status="default" size="md" aria-label="Add to basket"><i class="fa-solid fa-basket-shopping" aria-hidden="true"></i></plus-button> </div> </article> </section>

<section class="bg-color-surface flex w-full max-w-none items-center justify-center p-4 sm:p-6 md:p-8" aria-labelledby="product-card-9-title"> <article class="border-color-default bg-color-modal flex w-full max-w-sm flex-col gap-5 rounded border p-4 shadow-sm sm:p-5"> <figure class="flex flex-col gap-3"> <img src="https://www.plusui.com/images/blocks/product-card/product-card-1-wine-bottles.png" alt="Decorative bottle gift set arranged for a catalog card" class="bg-color-default-default h-72 w-full rounded object-cover" /> <figcaption class="sr-only">Cellar Gift Bundle product preview</figcaption> </figure> <header class="flex w-full items-start justify-between gap-3"> <div class="min-w-0"> <p class="text-color-caption text-xs font-medium uppercase">Gift set</p> <h2 id="product-card-9-title" class="text-color-default truncate text-xl font-semibold">Cellar Gift Bundle</h2> </div> <plus-chip status="success" size="sm" invert>Save $20</plus-chip> </header> <p class="text-color-caption text-sm">Three curated bottles packed for same-day gifting.</p> <div class="border-color-default bg-color-surface flex w-fit items-center gap-2 rounded border px-2 py-1"> <span class="text-color-default text-sm font-medium">4.9</span> <i class="fa-solid fa-star text-color-primary text-xs" aria-hidden="true"></i> <plus-divider orientation="vertical" class="h-4"></plus-divider> <span class="text-color-caption text-xs">118 reviews</span> </div> <div class="flex w-full flex-wrap items-baseline gap-2"> <p class="text-color-default text-2xl font-semibold md:text-3xl">$84.00</p> <p class="text-color-placeholder text-sm font-medium line-through">$104.00</p> <plus-chip status="success" size="sm" invert>Save $20</plus-chip> </div> <plus-divider kind="dashed"></plus-divider> <div class="flex w-full items-center gap-2"> <plus-button kind="filled" status="primary" size="md" class="min-w-0 flex-1">Add Bundle</plus-button> </div> </article> </section>

<section class="bg-color-surface flex w-full max-w-none items-center justify-center p-0" aria-labelledby="product-card-8-title"> <article class="border-color-default bg-color-modal flex w-full max-w-none flex-col gap-10 overflow-hidden rounded border p-12"> <img src="https://www.plusui.com/images/blocks/product-card/product-card-8-cosmetics.png" alt="Pink cosmetic cream jar and packaging on a soft pink studio background" class="bg-color-default-default w-full rounded object-cover" /> <div class="flex w-full items-center justify-center gap-2" aria-label="Cosmetics product gallery position"> <span class="bg-color-disabled-default size-5 rounded-full"></span> <span class="bg-color-default-invert-default size-5 rounded-full" aria-current="true"></span> <span class="bg-color-disabled-default size-5 rounded-full"></span> <span class="bg-color-disabled-default size-5 rounded-full"></span> </div> <div class="flex w-full items-center justify-between gap-4"> <plus-chip status="default" size="md">Free Shipping</plus-chip> <plus-button kind="text" status="default" size="sm" aria-label="Add Cosmetics to favorites"> <i class="fa-regular fa-heart text-color-caption text-4xl" aria-hidden="true"></i> </plus-button> </div> <div class="flex w-full flex-wrap items-center gap-3"> <p class="text-color-default text-5xl font-semibold">$110.97</p> <plus-chip status="danger" size="md">Save %40</plus-chip> <p class="text-color-disabled text-3xl font-semibold line-through">$110.97</p> </div> <plus-divider kind="dashed"></plus-divider> <div class="flex w-full flex-col gap-2"> <h2 id="product-card-8-title" class="text-color-default text-4xl font-semibold">Cosmetics</h2> <p class="text-color-caption text-3xl">A lightweight daily cosmetic that hydrates the skin while enhancing its natural glow.</p> </div> <div class="flex w-full items-center gap-2" aria-label="Cosmetics size options"> <button type="button" class="bg-color-primary-default text-color-default-invert size-20 rounded-l px-3 text-3xl font-medium" aria-pressed="true">S</button> <button type="button" class="border-color-default bg-color-modal text-color-default size-20 border px-3 text-3xl font-medium" aria-pressed="false">M</button> <button type="button" class="border-color-default bg-color-modal text-color-disabled size-20 rounded-r border px-3 text-3xl font-medium" aria-pressed="false">L</button> </div> </article> </section>

<section class="bg-color-surface flex w-full max-w-none items-center justify-center p-0" aria-labelledby="product-card-5-title"> <article class="border-color-default bg-color-modal flex w-full max-w-none flex-col gap-10 overflow-hidden rounded border p-12"> <img src="https://www.plusui.com/images/blocks/product-card/product-card-5-cream.png" alt="Decorative cream cone product against a soft blue studio background" class="bg-color-default-default w-full rounded object-cover" /> <div class="flex w-full items-center justify-center gap-2" aria-label="Cream product gallery position"> <span class="bg-color-disabled-default size-5 rounded-full"></span> <span class="bg-color-default-invert-default size-5 rounded-full" aria-current="true"></span> <span class="bg-color-disabled-default size-5 rounded-full"></span> <span class="bg-color-disabled-default size-5 rounded-full"></span> </div> <p class="text-color-primary text-3xl font-semibold">Home and Life</p> <div class="flex w-full flex-col gap-2"> <header class="text-color-default flex w-full items-center justify-between gap-4"> <h2 id="product-card-5-title" class="min-w-px flex-1 truncate text-4xl font-semibold">Cream</h2> </header> <p class="text-color-caption text-3xl">A lightweight moisturising cream that hydrates and softens the skin.</p> </div> <div class="flex w-full flex-wrap items-center gap-2" aria-label="Cream color options"> <button type="button" class="border-color-default bg-color-info-default size-14 rounded border" aria-label="Select blue cream color"></button> <button type="button" class="border-color-default bg-color-success-default size-14 rounded border" aria-label="Select green cream color"></button> <button type="button" class="border-color-default bg-color-warning-default size-14 rounded border" aria-label="Select amber cream color"></button> <button type="button" class="border-color-default bg-color-danger-default size-14 rounded border" aria-label="Select red cream color"></button> <span class="text-color-caption ml-1 flex min-w-px items-center gap-2 text-3xl"> <i class="fa-solid fa-palette text-2xl" aria-hidden="true"></i> <span>Pick a color</span> </span> </div> <plus-divider kind="dashed"></plus-divider> <div class="flex w-full items-end justify-between gap-4"> <div class="flex min-w-px flex-1 flex-col gap-1"> <div class="flex w-full items-center gap-2"> <plus-chip status="success" size="md" invert>%40</plus-chip> <p class="text-color-disabled min-w-px text-3xl font-semibold line-through sm:text-base">$110.97</p> </div> <p class="text-color-default text-5xl font-semibold">$110.97</p> </div> <plus-button kind="filled" status="primary" size="sm" aria-label="Add Cream to basket"> <i class="fa-solid fa-basket-shopping text-color-default-invert text-4xl" aria-hidden="true"></i> </plus-button> </div> </article> </section>

<section class="bg-color-surface flex w-full max-w-none items-center justify-center p-4 sm:p-6 md:p-8" aria-labelledby="product-card-13-title"> <article class="border-color-default bg-color-modal flex w-full max-w-sm flex-col gap-5 rounded border p-4 shadow-sm sm:p-5"> <figure class="flex flex-col gap-3"> <img src="https://www.plusui.com/images/blocks/product-card/product-card-5-cream.png" alt="Cosmetic cream jar and package product image" class="bg-color-default-default h-72 w-full rounded object-cover" /> <figcaption class="sr-only">Daily Cream Set product preview</figcaption> </figure> <header class="flex w-full items-start justify-between gap-3"> <div class="min-w-0"> <p class="text-color-caption text-xs font-medium uppercase">Skin routine</p> <h2 id="product-card-13-title" class="text-color-default truncate text-xl font-semibold">Daily Cream Set</h2> </div> <plus-chip status="success" size="sm" invert>Subscribe</plus-chip> </header> <p class="text-color-caption text-sm">Refill every 30 days with pause-anytime delivery.</p> <div class="border-color-default bg-color-surface flex w-fit items-center gap-2 rounded border px-2 py-1"> <span class="text-color-default text-sm font-medium">4.9</span> <i class="fa-solid fa-star text-color-primary text-xs" aria-hidden="true"></i> <plus-divider orientation="vertical" class="h-4"></plus-divider> <span class="text-color-caption text-xs">230 reviews</span> </div> <div class="flex w-full flex-wrap items-baseline gap-2"> <p class="text-color-default text-2xl font-semibold md:text-3xl">$54.00</p> <p class="text-color-placeholder text-sm font-medium line-through">$68.00</p> <plus-chip status="success" size="sm" invert>Subscribe</plus-chip> </div> <plus-divider kind="dashed"></plus-divider> <div class="flex w-full items-center gap-2"> <plus-button kind="filled" status="primary" size="md" class="min-w-0 flex-1">Add Routine</plus-button> </div> </article> </section>

<section class="bg-color-surface flex w-full max-w-none items-center justify-center p-0" aria-labelledby="product-card-6-title"> <article class="border-color-default bg-color-modal flex w-full max-w-none flex-col gap-10 overflow-hidden rounded border p-12"> <img src="https://www.plusui.com/images/blocks/product-card/product-card-6-designer-cup.png" alt="Black designer cup on a blue studio background" class="bg-color-default-default w-full rounded object-cover" /> <div class="flex w-full items-center justify-center gap-2" aria-label="Designer Cup product gallery position"> <span class="bg-color-disabled-default size-5 rounded-full"></span> <span class="bg-color-default-invert-default size-5 rounded-full" aria-current="true"></span> <span class="bg-color-disabled-default size-5 rounded-full"></span> <span class="bg-color-disabled-default size-5 rounded-full"></span> </div> <header class="flex w-full items-start justify-between gap-4"> <h2 id="product-card-6-title" class="text-color-default min-w-px flex-1 truncate text-base font-medium sm:text-xl">Designer Cup</h2> <plus-chip status="success" size="md" invert>Decor</plus-chip> </header> <plus-divider kind="dashed"></plus-divider> <div class="flex w-full items-end justify-between gap-3 sm:items-center"> <div class="flex min-w-px flex-1 flex-col whitespace-nowrap"> <p class="text-color-default text-5xl font-semibold">$129.00</p> <p class="text-color-placeholder text-base line-through sm:text-lg">$139.00</p> </div> <div class="flex shrink-0 items-center gap-2"> <plus-button kind="outlined" status="default" size="sm" suffix="true" aria-label="Quantity 1 for Designer Cup" class="min-w-16"> <span>1</span> <i class="fa-solid fa-chevron-down text-color-caption" aria-hidden="true"></i> </plus-button> <plus-button kind="outlined" status="primary" size="sm" aria-label="Add Designer Cup to basket">Add</plus-button> </div> </div> </article> </section>

<section class="bg-color-surface flex w-full max-w-none items-center justify-center p-4 sm:p-6 md:p-8" aria-labelledby="product-card-14-title"> <article class="border-color-default bg-color-modal flex w-full max-w-sm flex-col gap-5 rounded border p-4 shadow-sm sm:p-5"> <figure class="flex flex-col gap-3"> <img src="https://www.plusui.com/images/blocks/product-card/product-card-6-designer-cup.png" alt="Designer cup product image for a workspace card" class="bg-color-default-default h-72 w-full rounded object-cover" /> <figcaption class="sr-only">Desk Cup Duo product preview</figcaption> </figure> <header class="flex w-full items-start justify-between gap-3"> <div class="min-w-0"> <p class="text-color-caption text-xs font-medium uppercase">Workspace</p> <h2 id="product-card-14-title" class="text-color-default truncate text-xl font-semibold">Desk Cup Duo</h2> </div> <plus-chip status="info" size="sm" invert>Bundle</plus-chip> </header> <p class="text-color-caption text-sm">Add two glazed cups to complete the desk setup.</p> <div class="border-color-default bg-color-surface flex w-fit items-center gap-2 rounded border px-2 py-1"> <span class="text-color-default text-sm font-medium">4.5</span> <i class="fa-solid fa-star text-color-primary text-xs" aria-hidden="true"></i> <plus-divider orientation="vertical" class="h-4"></plus-divider> <span class="text-color-caption text-xs">37 reviews</span> </div> <div class="flex w-full flex-wrap items-baseline gap-2"> <p class="text-color-default text-2xl font-semibold md:text-3xl">$32.00</p> <p class="text-color-placeholder text-sm font-medium line-through">$44.00</p> <plus-chip status="info" size="sm" invert>Bundle</plus-chip> </div> <plus-divider kind="dashed"></plus-divider> <div class="flex w-full items-center gap-2"> <div class="border-color-default bg-color-surface flex h-10 items-center rounded border"> <button type="button" class="text-color-caption flex size-10 items-center justify-center" aria-label="Decrease quantity"><i class="fa-solid fa-minus" aria-hidden="true"></i></button> <span class="text-color-default min-w-9 text-center text-sm font-medium">1</span> <button type="button" class="text-color-caption flex size-10 items-center justify-center" aria-label="Increase quantity"><i class="fa-solid fa-plus" aria-hidden="true"></i></button> </div> <plus-button kind="outlined" status="primary" size="md" class="min-w-0 flex-1">Add Duo</plus-button> </div> </article> </section>

<section class="bg-color-surface flex w-full max-w-none items-center justify-center p-4 sm:p-6 md:p-8" aria-labelledby="product-card-10-title"> <article class="border-color-default bg-color-modal flex w-full max-w-sm flex-col gap-5 rounded border p-4 shadow-sm sm:p-5"> <figure class="flex flex-col gap-3"> <img src="https://www.plusui.com/images/blocks/product-card/product-card-2-t-shirt.png" alt="Folded everyday t-shirt product image" class="bg-color-default-default h-72 w-full rounded object-cover" /> <figcaption class="sr-only">Everyday Tee product preview</figcaption> </figure> <header class="flex w-full items-start justify-between gap-3"> <div class="min-w-0"> <p class="text-color-caption text-xs font-medium uppercase">Apparel</p> <h2 id="product-card-10-title" class="text-color-default truncate text-xl font-semibold">Everyday Tee</h2> </div> <plus-chip status="info" size="sm" invert>Cotton</plus-chip> </header> <p class="text-color-caption text-sm">Soft daily tee with a relaxed fit and reinforced seams.</p> <div class="border-color-default bg-color-surface flex w-fit items-center gap-2 rounded border px-2 py-1"> <span class="text-color-default text-sm font-medium">4.7</span> <i class="fa-solid fa-star text-color-primary text-xs" aria-hidden="true"></i> <plus-divider orientation="vertical" class="h-4"></plus-divider> <span class="text-color-caption text-xs">64 reviews</span> </div> <div class="flex w-full flex-wrap items-baseline gap-2"> <p class="text-color-default text-2xl font-semibold md:text-3xl">$29.00</p> <p class="text-color-placeholder text-sm font-medium line-through">$39.00</p> <plus-chip status="info" size="sm" invert>Cotton</plus-chip> </div> <div class="flex items-center gap-2" aria-label="Everyday Tee size options"> <button type="button" class="border-color-primary bg-color-primary-default text-color-default-invert h-9 min-w-9 rounded border px-3 text-sm font-medium" aria-pressed="true">S</button> <button type="button" class="border-color-default bg-color-modal text-color-default h-9 min-w-9 rounded border px-3 text-sm font-medium" aria-pressed="false">M</button> <button type="button" class="border-color-default bg-color-modal text-color-default h-9 min-w-9 rounded border px-3 text-sm font-medium" aria-pressed="false">L</button> </div> <plus-divider kind="dashed"></plus-divider> <div class="flex w-full items-center gap-2"> <plus-button kind="filled" status="primary" size="md" class="min-w-0 flex-1">Add Tee</plus-button> </div> </article> </section>

<section class="bg-color-surface flex w-full max-w-none items-center justify-center p-4 sm:p-6 md:p-8" aria-labelledby="product-card-12-title"> <article class="border-color-default bg-color-modal flex w-full max-w-sm flex-col gap-5 rounded border p-4 shadow-sm sm:p-5"> <figure class="flex flex-col gap-3"> <img src="https://www.plusui.com/images/blocks/product-card/product-card-4-headset-pro.png" alt="Studio headset product image for a stock card" class="bg-color-default-default h-72 w-full rounded object-cover" /> <figcaption class="sr-only">Focus Headset product preview</figcaption> </figure> <header class="flex w-full items-start justify-between gap-3"> <div class="min-w-0"> <p class="text-color-caption text-xs font-medium uppercase">Audio desk</p> <h2 id="product-card-12-title" class="text-color-default truncate text-xl font-semibold">Focus Headset</h2> </div> <plus-chip status="warning" size="sm" invert>Low Stock</plus-chip> </header> <p class="text-color-caption text-sm">18 sold this week, 9 ready to ship.</p> <div class="flex w-full flex-col gap-2" aria-label="Focus Headset availability"> <div class="flex items-center justify-between gap-3"> <span class="text-color-caption text-sm">Reserved</span> <span class="text-color-success text-sm font-medium">9 of 27 left</span> </div> <div class="bg-color-default-default h-2 w-full overflow-hidden rounded-full" role="img" aria-label="18 sold this week, 9 ready to ship."> <span class="bg-color-success-default block h-full w-1/3 rounded-full"></span> </div> </div> <div class="flex w-full flex-wrap items-baseline gap-2"> <p class="text-color-default text-2xl font-semibold md:text-3xl">$119.00</p> <p class="text-color-placeholder text-sm font-medium line-through">$139.00</p> <plus-chip status="warning" size="sm" invert>Low Stock</plus-chip> </div> <plus-divider kind="dashed"></plus-divider> <div class="flex w-full items-center gap-2"> <plus-button kind="filled" status="primary" size="md" class="min-w-0 flex-1">Reserve</plus-button> </div> </article> </section>

<section class="bg-color-surface flex w-full max-w-none items-center justify-center p-4 sm:p-6 md:p-8" aria-labelledby="product-card-16-title"> <article class="border-color-default bg-color-modal flex w-full max-w-sm flex-col gap-5 rounded border p-4 shadow-sm sm:p-5"> <figure class="flex flex-col gap-3"> <img src="https://www.plusui.com/images/blocks/product-card/product-card-8-cosmetics.png" alt="Pink cosmetic routine kit product image" class="bg-color-default-default h-72 w-full rounded object-cover" /> <div class="flex items-center justify-center gap-2" aria-label="Glow Routine Kit gallery position"> <span class="bg-color-primary-default size-2 rounded-full" aria-current="true"></span> <span class="bg-color-divider size-2 rounded-full"></span> <span class="bg-color-divider size-2 rounded-full"></span> </div> <figcaption class="sr-only">Glow Routine Kit product preview</figcaption> </figure> <header class="flex w-full items-start justify-between gap-3"> <div class="min-w-0"> <p class="text-color-caption text-xs font-medium uppercase">Beauty edit</p> <h2 id="product-card-16-title" class="text-color-default truncate text-xl font-semibold">Glow Routine Kit</h2> </div> <plus-chip status="danger" size="sm" invert>Set</plus-chip> </header> <p class="text-color-caption text-sm">Three-step care set for daily hydration and glow.</p> <div class="border-color-default bg-color-surface flex w-fit items-center gap-2 rounded border px-2 py-1"> <span class="text-color-default text-sm font-medium">4.8</span> <i class="fa-solid fa-star text-color-primary text-xs" aria-hidden="true"></i> <plus-divider orientation="vertical" class="h-4"></plus-divider> <span class="text-color-caption text-xs">145 reviews</span> </div> <div class="flex w-full flex-wrap items-baseline gap-2"> <p class="text-color-default text-2xl font-semibold md:text-3xl">$72.00</p> <p class="text-color-placeholder text-sm font-medium line-through">$96.00</p> <plus-chip status="danger" size="sm" invert>Set</plus-chip> </div> <div class="flex items-center gap-2" aria-label="Glow Routine Kit tone options"> <button type="button" class="border-color-primary bg-color-primary-invert-default size-7 rounded-full border" aria-label="Selected soft tone" aria-pressed="true"></button> <button type="button" class="border-color-default bg-color-warning-invert-default size-7 rounded-full border" aria-label="Warm tone" aria-pressed="false"></button> <button type="button" class="border-color-default bg-color-info-invert-default size-7 rounded-full border" aria-label="Cool tone" aria-pressed="false"></button> </div> <plus-divider kind="dashed"></plus-divider> <div class="flex w-full items-center gap-2"> <plus-button kind="filled" status="primary" size="md" class="min-w-0 flex-1">Add Kit</plus-button> </div> </article> </section>

<section class="bg-color-surface flex w-full max-w-none items-center justify-center p-0" aria-labelledby="product-card-7-title"> <article class="border-color-default bg-color-modal flex w-full max-w-none flex-col gap-10 overflow-hidden rounded border p-12"> <img src="https://www.plusui.com/images/blocks/product-card/product-card-7-home-electronics.png" alt="Home electronics speaker, media box, remote, and yellow smart speaker on a neutral background" class="bg-color-default-default w-full rounded object-cover" /> <div class="flex w-full items-center justify-center gap-2" aria-label="Home Electronics product gallery position"> <span class="bg-color-disabled-default size-5 rounded-full"></span> <span class="bg-color-default-invert-default size-5 rounded-full" aria-current="true"></span> <span class="bg-color-disabled-default size-5 rounded-full"></span> <span class="bg-color-disabled-default size-5 rounded-full"></span> </div> <header class="flex w-full items-start justify-between gap-4"> <h2 id="product-card-7-title" class="text-color-default min-w-px flex-1 truncate text-4xl font-medium">Home Electronics</h2> <plus-chip status="success" size="md" invert>Samsung</plus-chip> </header> <plus-divider kind="dashed"></plus-divider> <div class="flex w-full items-center justify-between gap-4"> <div class="flex min-w-px flex-1 items-baseline gap-2 whitespace-nowrap"> <p class="text-color-default text-5xl font-semibold">$129.00</p> <p class="text-color-placeholder text-base line-through">$139.00</p> </div> <div class="flex shrink-0 items-center gap-2"> <plus-button kind="text" status="default" size="sm" aria-label="Add Home Electronics to favorites"> <i class="fa-solid fa-heart text-color-caption text-4xl" aria-hidden="true"></i> </plus-button> <plus-button kind="text" status="default" size="sm" aria-label="Add Home Electronics to basket"> <i class="fa-solid fa-basket-shopping text-color-caption text-4xl" aria-hidden="true"></i> </plus-button> </div> </div> </article> </section>

<section class="bg-color-surface flex w-full max-w-none items-center justify-center p-4 sm:p-6 md:p-8" aria-labelledby="product-card-15-title"> <article class="border-color-default bg-color-modal flex w-full max-w-sm flex-col gap-5 rounded border p-4 shadow-sm sm:p-5"> <figure class="flex flex-col gap-3"> <img src="https://www.plusui.com/images/blocks/product-card/product-card-7-home-electronics.png" alt="Home electronics product image for a compare card" class="bg-color-default-default h-72 w-full rounded object-cover" /> <figcaption class="sr-only">Home Hub Mini product preview</figcaption> </figure> <header class="flex w-full items-start justify-between gap-3"> <div class="min-w-0"> <p class="text-color-caption text-xs font-medium uppercase">Connected home</p> <h2 id="product-card-15-title" class="text-color-default truncate text-xl font-semibold">Home Hub Mini</h2> </div> <plus-chip status="primary" size="sm" invert>Smart</plus-chip> </header> <p class="text-color-caption text-sm">Compact controller with voice, routines, and room scenes.</p> <div class="border-color-default bg-color-surface flex w-fit items-center gap-2 rounded border px-2 py-1"> <span class="text-color-default text-sm font-medium">4.4</span> <i class="fa-solid fa-star text-color-primary text-xs" aria-hidden="true"></i> <plus-divider orientation="vertical" class="h-4"></plus-divider> <span class="text-color-caption text-xs">76 reviews</span> </div> <div class="flex w-full flex-wrap items-baseline gap-2"> <p class="text-color-default text-2xl font-semibold md:text-3xl">$89.00</p> <p class="text-color-placeholder text-sm font-medium line-through">$109.00</p> <plus-chip status="primary" size="sm" invert>Smart</plus-chip> </div> <plus-divider kind="dashed"></plus-divider> <div class="flex w-full items-center gap-2"> <plus-button kind="outlined" status="default" size="md" aria-label="Add to favorites"><i class="fa-regular fa-heart" aria-hidden="true"></i></plus-button> <plus-button kind="filled" status="primary" size="md" class="min-w-0 flex-1">Add Hub</plus-button> <plus-button kind="outlined" status="default" size="md" aria-label="Add to basket"><i class="fa-solid fa-basket-shopping" aria-hidden="true"></i></plus-button> </div> </article> </section>

<section class="bg-color-surface flex w-full max-w-none items-center justify-center p-4 sm:p-6 md:p-8" aria-labelledby="product-card-11-title"> <article class="border-color-default bg-color-modal flex w-full max-w-sm flex-col gap-5 rounded border p-4 shadow-sm sm:p-5"> <figure class="flex flex-col gap-3"> <img src="https://www.plusui.com/images/blocks/product-card/product-card-3-retro-camera.jpg" alt="Retro camera product kit on a neutral studio background" class="bg-color-default-default h-72 w-full rounded object-cover" /> <figcaption class="sr-only">Retro Camera Kit product preview</figcaption> </figure> <header class="flex w-full items-start justify-between gap-3"> <div class="min-w-0"> <p class="text-color-caption text-xs font-medium uppercase">Creator gear</p> <h2 id="product-card-11-title" class="text-color-default truncate text-xl font-semibold">Retro Camera Kit</h2> </div> <plus-chip status="primary" size="sm" invert>Kit</plus-chip> </header> <p class="text-color-caption text-sm">Includes a strap, starter film, and travel pouch.</p> <div class="border-color-default bg-color-surface flex w-fit items-center gap-2 rounded border px-2 py-1"> <span class="text-color-default text-sm font-medium">4.8</span> <i class="fa-solid fa-star text-color-primary text-xs" aria-hidden="true"></i> <plus-divider orientation="vertical" class="h-4"></plus-divider> <span class="text-color-caption text-xs">42 reviews</span> </div> <div class="flex w-full flex-wrap items-baseline gap-2"> <p class="text-color-default text-2xl font-semibold md:text-3xl">$129.00</p> <p class="text-color-placeholder text-sm font-medium line-through">$149.00</p> <plus-chip status="primary" size="sm" invert>Kit</plus-chip> </div> <plus-divider kind="dashed"></plus-divider> <div class="flex w-full items-center gap-2"> <div class="border-color-default bg-color-surface flex h-10 items-center rounded border"> <button type="button" class="text-color-caption flex size-10 items-center justify-center" aria-label="Decrease quantity"><i class="fa-solid fa-minus" aria-hidden="true"></i></button> <span class="text-color-default min-w-9 text-center text-sm font-medium">1</span> <button type="button" class="text-color-caption flex size-10 items-center justify-center" aria-label="Increase quantity"><i class="fa-solid fa-plus" aria-hidden="true"></i></button> </div> <plus-button kind="outlined" status="primary" size="md" class="min-w-0 flex-1">Add Kit</plus-button> </div> </article> </section>

<section class="bg-color-surface flex w-full max-w-none items-center justify-center p-4 sm:p-6 md:p-8" aria-labelledby="product-card-18-title"> <article class="border-color-default bg-color-modal flex w-full max-w-sm flex-col gap-5 rounded border p-4 shadow-sm sm:p-5"> <figure class="flex flex-col gap-3"> <img src="https://www.plusui.com/images/blocks/product-card/product-card-2-t-shirt.png" alt="Soft cotton t-shirt product image" class="bg-color-default-default h-72 w-full rounded object-cover" /> <figcaption class="sr-only">Soft Cotton Tee product preview</figcaption> </figure> <header class="flex w-full items-start justify-between gap-3"> <div class="min-w-0"> <p class="text-color-caption text-xs font-medium uppercase">Recommended</p> <h2 id="product-card-18-title" class="text-color-default truncate text-xl font-semibold">Soft Cotton Tee</h2> </div> <plus-chip status="info" size="sm" invert>New Fit</plus-chip> </header> <p class="text-color-caption text-sm">Best paired with the relaxed travel overshirt.</p> <div class="border-color-default bg-color-surface flex w-fit items-center gap-2 rounded border px-2 py-1"> <span class="text-color-default text-sm font-medium">4.6</span> <i class="fa-solid fa-star text-color-primary text-xs" aria-hidden="true"></i> <plus-divider orientation="vertical" class="h-4"></plus-divider> <span class="text-color-caption text-xs">88 reviews</span> </div> <div class="flex w-full flex-wrap items-baseline gap-2"> <p class="text-color-default text-2xl font-semibold md:text-3xl">$26.00</p> <p class="text-color-placeholder text-sm font-medium line-through">$34.00</p> <plus-chip status="info" size="sm" invert>New Fit</plus-chip> </div> <div class="flex items-center gap-2" aria-label="Soft Cotton Tee size options"> <button type="button" class="border-color-primary bg-color-primary-default text-color-default-invert h-9 min-w-9 rounded border px-3 text-sm font-medium" aria-pressed="true">S</button> <button type="button" class="border-color-default bg-color-modal text-color-default h-9 min-w-9 rounded border px-3 text-sm font-medium" aria-pressed="false">M</button> <button type="button" class="border-color-default bg-color-modal text-color-default h-9 min-w-9 rounded border px-3 text-sm font-medium" aria-pressed="false">L</button> </div> <plus-divider kind="dashed"></plus-divider> <div class="flex w-full items-center gap-2"> <plus-button kind="filled" status="primary" size="md" class="min-w-0 flex-1">Add Tee</plus-button> </div> </article> </section>

<section class="bg-color-surface flex w-full max-w-none items-center justify-center p-4 sm:p-6 md:p-8" aria-labelledby="product-card-17-title"> <article class="border-color-default bg-color-modal flex w-full max-w-sm flex-col gap-5 rounded border p-4 shadow-sm sm:p-5"> <figure class="flex flex-col gap-3"> <img src="https://www.plusui.com/images/blocks/product-card/product-card-1-wine-bottles.png" alt="Gift bottle pack shown as a weekend promotion" class="bg-color-default-default h-72 w-full rounded object-cover" /> <div class="flex items-center justify-center gap-2" aria-label="Weekend Gift Pack gallery position"> <span class="bg-color-primary-default size-2 rounded-full" aria-current="true"></span> <span class="bg-color-divider size-2 rounded-full"></span> <span class="bg-color-divider size-2 rounded-full"></span> </div> <figcaption class="sr-only">Weekend Gift Pack product preview</figcaption> </figure> <header class="flex w-full items-start justify-between gap-3"> <div class="min-w-0"> <p class="text-color-caption text-xs font-medium uppercase">Member deal</p> <h2 id="product-card-17-title" class="text-color-default truncate text-xl font-semibold">Weekend Gift Pack</h2> </div> <plus-chip status="primary" size="sm" invert>Member</plus-chip> </header> <p class="text-color-caption text-sm">Reserved pricing for signed-in Plus members.</p> <div class="border-color-default bg-color-surface flex w-fit items-center gap-2 rounded border px-2 py-1"> <span class="text-color-default text-sm font-medium">4.8</span> <i class="fa-solid fa-star text-color-primary text-xs" aria-hidden="true"></i> <plus-divider orientation="vertical" class="h-4"></plus-divider> <span class="text-color-caption text-xs">203 reviews</span> </div> <div class="flex w-full flex-wrap items-baseline gap-2"> <p class="text-color-default text-2xl font-semibold md:text-3xl">$76.00</p> <p class="text-color-placeholder text-sm font-medium line-through">$95.00</p> <plus-chip status="primary" size="sm" invert>Member</plus-chip> </div> <plus-divider kind="dashed"></plus-divider> <div class="flex w-full items-center gap-2"> <plus-button kind="filled" status="primary" size="md" class="min-w-0 flex-1">Claim Pack</plus-button> </div> </article> </section>

Product Card Blocks

Product card blocks present individual catalog items in compact, image-led commerce cards. The collection now includes product-card-1 through product-card-20, preserving the original eight Figma-backed examples and adding expansion variants for catalog, stock, subscription, bundle, and quick-commerce states.

Key Features

Product Image: A durable local product image keeps the item visually identifiable.
Product Title: The product name stays prominent and aligned with quick metadata.
Rating Chip: A static Plus UI chip previews the customer rating state.
Price Hierarchy: Product price, sale price, and original price remain grouped according to the source design.
Quick Action: Compact accessible cart or favorite controls support commerce previews.
Stock Metadata: Availability-led cards can show sold and available counts with a static progress state.
Color Options: Swatch-led cards can show static color options and gallery position without scripts.
Quantity Selector: Quantity-led cards can group a static selector with the primary add action.
Paired Icon Actions: Icon-only favorite and basket actions can stay grouped at the trailing edge of the price row with accessible labels.
Size Selector: Size-led cards can show the selected size as a static segmented control without scripts.
Responsive Card Width: One static markup structure adapts from mobile to wider catalog previews.

Best Practices

Use durable product imagery and descriptive alternative text.
Keep title, rating, price, and action controls visible without extra hover-only dependencies.
Use Plus UI chips and buttons for reusable states and actions.
Pair sale price with the original price only when the source includes a discount.
Keep stock progress secondary to the image and product identity when availability is the source’s key commerce signal.
Keep carousel dots and color swatches static, accessible, and visually secondary to the image and price.
Keep paired icon-only commerce actions visible, grouped, and accessible when the source shows both wishlist and basket controls.
Keep static size selectors compact, accessible, and close to the product description when the source presents sizing as the final choice.
Keep product cards compact and comparable inside grids or carousels.

Gift Items Product Card

Gift Items Product Card is a compact catalog card for a discounted gift product. It uses a large product image, product title, warning rating chip, sale price, crossed original price, and a cart action in one static card.

Gift Items Product Card Data

Product: Gift Items
Rating: 4.8
Sale price: $129.00
Original price: $139.00
Action: Add Gift Items to cart

T-shirt Review Product Card

T-shirt Review Product Card is a compact apparel catalog card for review-led product browsing. It uses a durable product image, top-right favorite action, title and price row, info rating chip, and an underlined review link in one static card.

T-shirt Review Product Card Data

Product: T-shirt
Rating: 4.8
Reviews: 39 Reviews
Price: $29
Action: Add T-shirt to favorites

Retro Camera Product Card

Retro Camera Product Card is a compact catalog card for quick-add product browsing. It uses a durable product image, title and price row, quantity selector, primary add action, and info rating chip in one static card.

Retro Camera Product Card Data

Product: Retro Camera
Rating: 4.8
Price: $29
Quantity: 1
Action: Add Retro Camera to basket

TWS Headset Pro Product Card

TWS Headset Pro Product Card is a compact availability-led audio product card. It uses a durable product image, sold and available stock counts, a static progress bar, title and brand chip row, sale price, and crossed original price.

TWS Headset Pro Product Card Data

Product: TWS Headset Pro
Brand: Samsung
Sold: 14
Available: 22
Sale price: $129.00
Original price: $139.00

Cream Color Picker Product Card

Cream Color Picker Product Card is a compact beauty product card for color-led product browsing. It uses a durable product image, static gallery dots, category tagline, title, description, color swatches, discount chip, sale price, original price, and a basket action.

Cream Color Picker Product Card Data

Product: Cream
Category: Home and Life
Description: A lightweight moisturising cream that hydrates and softens the skin.
Discount: %40
Sale price: $110.97
Original price: $110.97
Action: Add Cream to basket

Designer Cup Quantity Product Card

Designer Cup Quantity Product Card is a compact decor product card for quantity-led catalog browsing. It uses a durable product image, static gallery dots, title and category chip row, dashed divider, price hierarchy, quantity selector, and outlined add action.

Designer Cup Quantity Product Card Data

Product: Designer Cup
Category: Decor
Gallery position: 2 of 4
Quantity: 1
Sale price: $129.00
Original price: $139.00
Action: Add Designer Cup to basket

Home Electronics Product Card

Home Electronics Product Card is a compact electronics catalog card for brand-led product browsing. It uses durable product imagery, static gallery dots, title and Samsung chip row, dashed divider, price hierarchy, favorite action, and basket action.

Home Electronics Product Card Data

Product: Home Electronics
Brand: Samsung
Gallery position: 2 of 4
Sale price: $129.00
Original price: $139.00
Actions: Add Home Electronics to favorites, Add Home Electronics to basket

Cosmetics Size Product Card

Cosmetics Size Product Card is a compact cosmetics catalog card for size-led product browsing. It uses durable product imagery, static gallery dots, a free shipping chip, favorite action, sale price, save badge, crossed original price, dashed divider, product description, and a static size selector.

Cosmetics Size Product Card Data

Product: Cosmetics
Gallery position: 2 of 4
Shipping: Free Shipping
Sale price: $110.97
Original price: $110.97
Discount: Save %40
Selected size: S
Action: Add Cosmetics to favorites

Expansion Variations

Cellar Gift Bundle Product Card: Catalog bundle card with durable gift imagery, review proof, savings chip, included-item notes, and quick add action.
Everyday Tee Size Product Card: Apparel product card with durable shirt imagery, size selector, rating chip, sale price, and wishlist action.
Retro Camera Kit Product Card: Quick-add camera kit card with durable product imagery, accessory chips, quantity controls, and grouped add actions.
Focus Headset Stock Product Card: Availability-led headset card with durable product imagery, stock progress, brand chip, and reserve action.
Daily Cream Subscription Product Card: Subscription product card with durable cream imagery, delivery cadence chip, price hierarchy, and basket action.
Desk Cup Add-on Product Card: Add-on product card with durable cup imagery, bundle metadata, quantity stepper, and outlined add action.
Home Hub Compare Product Card: Comparison-led electronics card with durable product imagery, spec badges, price row, and paired favorite/cart actions.
Glow Routine Kit Product Card: Beauty routine card with durable cosmetics imagery, swatch choices, sale chip, and basket action.
Weekend Gift Pack Product Card: Promotion card with durable gift imagery, member-only price, static gallery dots, and primary add action.
Soft Cotton Tee Product Card: Compact apparel recommendation card with durable t-shirt imagery, color chips, size state, and wishlist action.
Camera Starter Pack Product Card: Starter pack card with durable camera imagery, included accessories, rating chip, and full-width add action.
Audio Desk Reserve Product Card: Reserve-state audio product card with stock progress, delivery note, price hierarchy, and accessible commerce actions.

Frequently Asked Questions

What is a product card UI component?

A product card UI component is a reusable commerce pattern for showing a product image, name, supporting metadata, price, and purchase action in a compact card.

Why are product card components important in frontend development?

Product card components help teams keep catalog, recommendation, and shopping surfaces consistent without rebuilding repeated product-summary patterns.

Where are product card UI components commonly used?

Product Card UI components are commonly used in catalog grids, recommendation rows, checkout add-ons, product dashboards, and e-commerce listing pages.

Can product card UI components be reused across frameworks?

Yes. Static Plus UI examples are designed as portable HTML patterns that can be adapted across React, Vue, Angular, Web Components, and other frontend stacks.

How do product card components improve UI design systems?

Product Card components standardize image sizing, rating treatment, price hierarchy, quick actions, and responsive behavior across commerce-focused design systems.

UI Library

Open-source

Multi-framework support

Integrations

Design System

Foundations

Components

Blocks & Templates

Plus AI

Monitoring Dashboard

Performance Overview

AI Suggestion

Join to our newsletter

How We Differ from Other Market Providers:

Products

Documentation

Frameworks

UI Kits

Foundations

Components

Application Blocks

Marketing Blocks

E-Commerce Blocks

Content Blocks

Templates

Company

Community

Contributing